@media screen and (min-width: 600px) {
    /* intro section */
    #s1 {
        width: fit-content;
    }

    #s1 > h1 {
        font-size: 4.5em;
    }

    #s1 > p {
        font-size: 2em;
    }

    /* who am i section */
    #s2 {
        max-width: 65vw;
    }

    #s2 > h1 {
        font-size: 2.5em;
    }

    #s2 > p {
        font-size: 1.35em;
    }

    /* hobbies */
    #s3 {
        max-width: 65vw;
    }

    #s3 > h1 {
        font-size: 2.5em;
    }

    #s3 > p {
        font-size: 1.35em;
    }

    /* picture of me */
    #s4 {
        max-width: 65vw;
    }

    #s4 > p {
        font-size: 1.35em;
    }

    #s4 > img {
        max-width: 60vw;
    }

    /* as a programmer */
    #s5 {
        max-width: 65vw;
    }

    #s5 > h1 {
        font-size: 2.5em;
    }

    #s5 > p {
        font-size: 1.35em;
    }


    /* programming languages */
    #s6 {
        max-width: 65vw;
    }

    #s6 > h1 {
        font-size: 2.5em;
    }

    #s6 > p {
        font-size: 1.35em;
    }

    /* school life */
    #s7 {
        max-width: 65vw;
    }

    #s7 > h1 {
        font-size: 2.5em;
    }

    #s7 > p {
        font-size: 1.35em;
    }

    
    /* achievements */
    #s8 {
        max-width: 65vw;
    }

    #s8 > h1 {
        font-size: 2.5em;
    }

    #s8 > p {
        font-size: 1.35em;
    }


    /* projects */
    #s9 {
        max-width: 65vw;
    }

    #s9 > h1 {
        font-size: 2.5em;
    }

    #s9 > p {
        font-size: 1.35em;
    }


    /* cards */
    .card > img {
        width: 50vw;
    }

    .card > div {
        width: 50vw;
    }

    .card > div > h2 {
        font-size: 2em;
    }

    .card > div > p {
        font-size: 1.35em;
    }


    /* games */
    #s10 {
        max-width: 85vw;
    }

    #s10 > h1 {
        font-size: 2.5em;
    }

    /* websites */
    #s11 {
        max-width: 85vw;
    }

    #s11 > h1 {
        font-size: 2.5em;
    }

    /* other projects */
    #s12 {
        max-width: 85vw;
    }

    #s12 > h1 {
        font-size: 2.5em;
    }

    /* blogs */
    #blogs {
        max-width: 85vw;
    }

    #blogs > h1 {
        font-size: 2.5em;
    }

    /* contacts */
    #s13 {
        max-width: 65vw;
    }

    #s13 > h1 {
        font-size: 2.5em;
    }

    #s13 > p {
        font-size: 1.35em;
    }


    /* history of website */
    #s14 {
        max-width: 65vw;
    }

    #s14 > h1 {
        font-size: 2.5em;
    }

    #s14 > p {
        font-size: 1.35em;
    }

    #s14 > a {
        font-size: 1.35em;
    }

    #s14 > .end {
        font-size: 1.15em;
    }

    /* redirect section */
    #r {
        max-width: 65vw;
    }

    #r > h1 {
        font-size: 2.5em;
    }

    #r > p {
        font-size: 1.35em;
    }

    /* blog */
    #blog > div {
        max-width: 65vw;
    }

    #blog h1 {
        font-size: 3.75em;
    }

    #blog h2 {
        font-size: 1em;
    }

    #blog p {
        font-size: 1.25em;
    }
    
    #blog img {
        width: 80%;
    }


    /* barlists */
    .barlist {
        font-size: 1.35em;
    }
}

@media screen and (max-width: 800px) {
    canvas {
        filter: brightness(1.5);
    }
}

@media screen and (min-width: 900px) {
    /* navigation */
    nav > a {
        font-size: 1.1em;
        padding: 0.25em 1em;
    }

    nav > a > p {
        display: inline;
    }

    nav > a > img {
        width: 32px;
        height: 32px;
    }
}


@keyframes navbar-show {
    0% {
        top: -100px;
    }
    100% {
        top: -0px;
    }
}

@keyframes navbar-hide {
    0% {
        top: 0px;
    }
    100% {
        top: -100px;
    }
}

@keyframes cli-show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        display: flex;
    }
}

@keyframes cli-hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

@keyframes opacity-show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes opacity-hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

@keyframes shiny {
    0% {
        background: linear-gradient(rgb(15, 219, 255), rgb(0, 255, 0));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    25% {
        background: linear-gradient(rgb(68, 216, 253), rgb(220, 245, 0));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    50% {
        background: linear-gradient(rgb(0, 255, 0), rgb(247, 255, 136));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    75% {
        background: linear-gradient(rgb(255, 247, 139), rgb(0, 255, 0));;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}