* {
    box-sizing: border-box;
}

:root {
    --yo-size: clamp(220px, 70vmin, 500px);
    --redes-size: clamp(78px, 23vmin, 150px);
    --edge-gap: clamp(10px, 4vmin, 50px);
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #016991;
    background: linear-gradient(180deg, rgb(7, 55, 73) 0%, rgb(0, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

#yo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    z-index: 999;
    box-sizing: border-box;
    height: var(--yo-size);
    width: var(--yo-size);
    padding: 0 5vw;
    margin-top: 10vh;
    margin-top: 10dvh;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.redes {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    z-index: 999;
    box-sizing: border-box;
    height: var(--redes-size);
    width: var(--redes-size);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
}
#linkedin {
    top: var(--edge-gap);
    right: var(--edge-gap);
    animation: flotar 3s ease-in-out 1s infinite alternate;
}
#instagram {
    bottom: var(--edge-gap);
    left: var(--edge-gap);
    animation: flotar 3s ease-in-out 2s infinite alternate;
}
#github {
    top: var(--edge-gap);
    left: var(--edge-gap);
    animation: flotar 3s ease-in-out 3s infinite alternate;
}
#gmail {
    bottom: var(--edge-gap);
    right: var(--edge-gap);
    animation: flotar 3s ease-in-out 4s infinite alternate;
}
.redes a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.redes {
    transition: background-color 1s ease, filter 1s ease;
}
.redes:hover {
    background-color: rgba(60, 214, 253, 0.822);
    filter: drop-shadow(0 0 50px rgb(0, 89, 255));
}

#img-insta,
#img-github,
#img-linkedin,
#img-gmail {
    height: 60%;
    width: 60%;
}


.bolita {
    position: fixed;
    height: clamp(50px, 6vw, 100px);
    width: clamp(4px, 1.5vw, 10px);
    background-color: rgba(60, 214, 253, 0.822);
    border-radius: 1px;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(10px);
    top: 110vh;
    filter: drop-shadow(0 0 50px rgb(0, 89, 255));
    animation: move 0.5s linear forwards;
}

@media (prefers-reduced-motion: reduce) {
    .redes,
    #samuel {
        animation-name: nombre-aparecer !important;
    }
}

@keyframes move {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-120vh);
        display: none;
    }
}

@keyframes encoger {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.6);
        rotate: 360deg;
        opacity: 100%;
        background-image: url(../img/deperfil.jpg);
        background-size: cover;
        background-position: center;
    }
}
@keyframes quitar {
    0% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.5);
        opacity: 0.1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
        display: none;
    }
}
@keyframes nombre-aparecer {
    0% {
    }
    100% {
        opacity: 1;
    }
}