body {
    padding: 0;
    margin: 0;
    font-family: 'Fuzzy Bubbles', cursive;
    min-width: 375px;
}

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 55px;
}

header {
    width: 100%;
    height: 46px;
    background-image: linear-gradient(60deg, rgb(165, 162, 107), yellow);
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 10px;
    position: fixed;
    box-shadow: 0px 2px 5px black;
}

a {
    text-decoration: none;
    color: #4fb180;
}

#navbar a {
    font-size: 23px;
    padding-right: 25px;
    -webkit-text-stroke: 0.7px black;
}

#navbar a:hover {
    color: rgb(184, 184, 184);
    text-shadow: 3px 3px 15px white;
}

#welcome-section {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-image: linear-gradient(60deg, #2e5857 0%, #4fb180 100%);
    justify-content: center;
    align-items: center;
}

#welcome-section h1 {
    font-family: 'Fasthand', cursive;
    font-size: 60px;
    color: #ffe641;
    text-shadow: 2.5px 2.5px black;
    height: 30px;
    text-align: center;
    margin: auto;
    margin-top: 300px;
}

#welcome-section p {
    font-size: 22px;
    background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: move 0.7s infinite;
    text-shadow: 0px 0px 15px #ffe641;
    margin-bottom: 280px;
}



@keyframes move {
    14% {
        background: linear-gradient(to right, orange, yellow, green, cyan, blue, purple, red);
        -webkit-background-clip: text;
    }

    28% {
        background: linear-gradient(to right, yellow, green, cyan, blue, purple, red, orange);
        -webkit-background-clip: text;
    }

    42% {
        background: linear-gradient(to right, green, cyan, blue, purple, red, orange, yellow);
        -webkit-background-clip: text;
    }

    56% {
        background: linear-gradient(to right, cyan, blue, purple, red, orange, yellow, green);
        -webkit-background-clip: text;
    }

    70% {
        background: linear-gradient(to right, blue, purple, red, orange, yellow, green, cyan);
        -webkit-background-clip: text;
    }

    84% {
        background: linear-gradient(to right, purple, red, orange, yellow, green, cyan, blue);
        -webkit-background-clip: text;
    }

    98% {
        background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
        -webkit-background-clip: text;
    }
}

#imagenes {
    width: 100%;
    margin-top: 95px;
    margin-bottom: 95px;
    display: flex;

    justify-content: center;
    flex-wrap: wrap;
}

#projects {
    background-color: #2d2d2d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.13' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#projects a img {
    max-width: 350px;
    border-radius: 10px 10px 0px 0px;
}

#projects a { 
    background-color: yellow;
    border-radius: 10px;
    margin: 10px;
    margin-top: 10px;
    margin-bottom: 120px;
}

#projects a:hover {
    box-shadow: 0px 5px 10px rgb(255, 238, 0);
}

#projects h1 {
    width: 100%;
    text-align: center;
    margin-top: 50px;
    font-size: 40px;
    color: #fee742;
    text-shadow: 0px 0px 15px #fee742;
    animation: luz 1s infinite;
}

@keyframes luz {
    50% {
        text-shadow: 0px 0px 5px #fee742;
    }
}

.project-tile {
    text-align: center;
    font-size: 20px;
    color: white;
    -webkit-text-stroke: 1.2px black;
}

#contact {
    height: 80vh;
    background-color: #20506e;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='12' viewBox='0 0 40 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.172L6.172 0h5.656L0 11.828V6.172zm40 5.656L28.172 0h5.656L40 6.172v5.656zM6.172 12l12-12h3.656l12 12h-5.656L20 3.828 11.828 12H6.172zm12 0L20 10.172 21.828 12h-3.656z' fill='%2314462e' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contact h1 {
    margin-top: 100px;
    color: white;
    font-size: 40px;
    text-shadow: 3px 3px rgb(85, 124, 124);
    text-align: center;
}
#contact p {
    font-size: 25px;
    color: #fee742;
    text-align: center;
    text-shadow: 0px 0px 15px #fee742;
    animation: luz 1s infinite;
}

@keyframes luz {
    50% {
        text-shadow: 0px 0px 5px #fee742;
    }
}

#images {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

#images a{
    font-size: 30px;
    margin: auto;
    font-family: 'Roboto Condensed', sans-serif;
}

#face img {
    transition: 0.5s;
}

#insta img {
    transition: 0.5s;
}

#free-img {
    transition: 0.5s;
}

#face img:hover {
    width: 120px;
}

#free-img:hover {
    width: 140px;
}

#insta img:hover {
    width: 120px;
}

footer {
    border-top: solid 3px yellow;
    height: auto;
    background-color: #303031;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='64' viewBox='0 0 32 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 28h20V16h-4v8H4V4h28v28h-4V8H8v12h4v-8h12v20H0v-4zm12 8h20v4H16v24H0v-4h12V36zm16 12h-4v12h8v4H20V44h12v12h-4v-8zM0 36h8v20H0v-4h4V40H0v-4z' fill='%23535353' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
footer a {
    color: white;
    margin: 5vh 30px;
}

footer p {
    color: #ffeb50;
    margin: 5vh 30px;
}
@media (max-width:573px) {
    #welcome-section h1 {
        margin-top: 190px;
    }
    #welcome-section p {
        margin-bottom: 170px;
    }
    #nav-bar a {
        padding: 0%;
    }
    header {
        justify-content: center;
    }
    #images a {
        font-size: 23px;
    }
}

@media (max-width:400px) {
    #images a {
        font-size: 19px;
    }
    footer {
        font-size: 11px
    }
}

@media (max-height:700px) {
    #welcome-section p {
        margin-top: 120px;
    }
}