:root{
    --bg: white;
    --txt: black;
}

@font-face {
    font-family: 'inter';
    src: url('fonts/Inter-VariableFont_slnt\,wght.woff2');
}


@font-face {
    font-family: 'steps-thin';
    src: url('fonts/Steps-Mono-Thin.otf');
}


@font-face {
    font-family: 'steps';
    src: url('fonts/Steps-Mono.otf');
}

@font-face {
    font-family: 'lineal';
    src: url('fonts/Lineal-Light.woff2');
}


html, body{
    width: 100%;
    height: 100vh;
    font-family: 'lineal';
    font-weight: 400;
    font-size: 2.5vmax;
    overflow: hidden;
}

body{
    background-color: var(--bg);
    color: var(--txt);
    display: flex;
    margin: 0;
}

.gif{
    position: absolute;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#olivissima{
    opacity: 0.82;
    filter: drop-shadow(29px 6px 40px #1c37115e);
    scale: .6;
    animation: dance .75s ease infinite;
}

#start{
    font-size: 4rem;
}

#chain, #otherchain{
    margin: 4vmin;
    height: max-content;
    position: fixed;
    transition: top .4s ease-in;
    left: 0;
    width: 43%;
    z-index: 2;
}

#chain{
    top: 100%
}

#otherchain{
    text-align: right;
    right: 0;
    left: unset;
    transition: top 1000s linear;
height:min-content;
}

#theme{
    position: fixed
}

.olive{
    color: olive;
    position: relative;
    display: inline;
}


.olive::after {
    content: '🫒'; 
    position: absolute;
    bottom: .7rem; 
    right: 0;
    /* transform: translateX(50%); */
    animation: bounce 1s infinite;
    filter: drop-shadow(9px 35px 25px #2d521d);
    filter: drop-shadow(9px 20px 20px #1c3711);
}


.melanzane{
    color: rgb(111, 0, 128);
    position: relative;
    display: inline;
}


.melanzane::after {
    content: '🍆'; 
    position: absolute;
    bottom: .7rem; 
    right: 0;
    /* transform: translateX(50%); */
    animation: bounce 1s infinite;
    filter: drop-shadow(9px 35px 25px #2d521d);
    filter: drop-shadow(9px 20px 20px #1c3711);
}

@keyframes bounce {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
    100% {
        transform: translateX(-50%) translateY(0);
    }
}


@keyframes dance {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(45deg);
    }
    30% {
        transform: rotate(60deg);
    }
    45% {
        transform: rotate(80deg);
    }
    60% {
        transform: rotate(120deg);
    }
    75% {
        transform: rotate(200deg);
    }
    90% {
        transform: rotate(288deg);
    }
    100% {
        transform: rotate(365deg);
    }
}