@media screen and (min-width: 1000px) {
    .dm-mono-medium {
        font-family: "DM Mono", monospace;
        font-weight: 500;
        font-style: normal;
    }

    .press-start-2p-regular {
        font-family: "Press Start 2P", system-ui;
        font-weight: 400;
        font-style: normal;
    }


    #audio {
        height: 32px;
        width: 32px;
        position: absolute;
        top: 2vh;
        right: 2vw;
        background: #522F81;
        padding-top: 0.75vh;
        padding-bottom: 0.75vh;
        padding-left: 0.5vw;
        padding-right: 0.5vw;
        border-radius: 10px;
        opacity: 0.25;
        box-shadow: #000000 0px 0px 10px, #000000 0px 0px 20px, #000000 0px 0px 30px;
        animation: audiofly 1s ease-in-out forwards;
    }

    #audio:hover {
        opacity: 1;
    }



    body {
        font-family: dm-mono-medium, monospace;
        background-image: url('../assets/background-scrollable.png');
        background-size:cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        image-rendering: pixelated;
        background-color: #000000;
    }


    .buttons {

        display: flex;
        justify-content: center;
        margin-top: 35vh;
        border-color: white;
        padding: 1vh;
    }

    .buttons button {
        font-family: "Press Start 2P", system-ui;
        color: #BBD6FD;
        margin-left: 1vw;
        margin-right: 1vw;
        border: none;
        background-color: #522F81;
        padding: 1vh 2vw;
        border-radius: 5px;
        font-size: 1.5em;
        box-shadow: #000000 0px 0px 10px, #000000 0px 0px 20px, #000000 0px 0px 30px;
        
    }
    .buttons button:hover {
        background-color: #8B8BDB;
        cursor: pointer;
    }

    h1 {
        font-family: "Press Start 2P", system-ui;
        font-weight: bold;
        text-align: center;
        color: #BBD6FD;
        font-size: 5em;
        text-shadow: 2px 2px 0 #000000, 4px 4px 0 #000000, 6px 6px 0 #000000, 8px 8px 0 #000000;
    }

    .description {
        color:#BBD6FD ;
        font-size: 1.2em;
        text-align: center;
        margin-top: 70vh;
    }

    .animal{
        height: 128px;
        position: relative;
        z-index: -1;
    }
    #a1{
        right: 20vw;
        bottom: 5vh;
        rotate: 320deg;
    }
    #a2{
        right: 25vw;
        top: 50vh;
    }
    #a3{
        left: 15vw;
        bottom: 18vh;
    }
    #a4{
        left: 15vw;
        top:40vh;
    }
    #a5{
        right: 20vw;
        top: 35vh;
    }
    #a6{
        right: 10vw;
        top: 80vh;
    }
    #a7{
        left: 20vw;
        top: 90vh;
    }
    #a8{
        left: 5vw;
        top: 35vh;
    }
    #a9{
        height: 64px;
        left: 20vw;
        top: 75vh;
    }
    #a10{
        height: 64px;
        right: 30vw;
        top:60vh;
    }


    .tips {
        color:#BBD6FD ;
        font-size: 1.2em;
        text-align: center;
        margin-top: 20vh;
    }

    .credentials {
        color: #BBD6FD;
        font-size: 1.2em;
        text-align: center;
        margin-top: 70vh;
    }

    ::-webkit-scrollbar {
        width: 0px;
    }
    
}

@media screen and (max-width: 1000px) {
   .dm-mono-medium {
        font-family: "DM Mono", monospace;
        font-weight: 500;
        font-style: normal;
    }

    .press-start-2p-regular {
        font-family: "Press Start 2P", system-ui;
        font-weight: 400;
        font-style: normal;
    }


    #audio {
        height: 32px;
        width: 32px;
        position: sticky;
        background: #522F81;
        padding-top: 0.5vh;
        padding-bottom: 0.5vh;
        padding-left: 1vw;
        padding-right: 1vw;
        border-radius: 10px;
        opacity: 0.2;
        box-shadow: #000000 0px 0px 10px, #000000 0px 0px 20px, #000000 0px 0px 30px;
        animation: audiofly 1s ease-in-out forwards;
    }



    body {
        font-family: dm-mono-medium, monospace;
        background-image: url('../assets/background-scrollable.png');
        background-size:cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        image-rendering: pixelated;
        background-color: #000000;
    }


    .buttons {

        display:grid;
        gap: calc(2vw + 10px);
        justify-content: center;
        margin-top: 10vh;
        border-color: white;
        padding: 1vh;
    }

    .buttons button {
        font-family: "Press Start 2P", system-ui;
        color: #BBD6FD;
        border: none;
        background-color: #522F81;
        padding: 1vh 10vw;
        border-radius: 5px;
        font-size: 1.5em;
        box-shadow: #000000 0px 0px 10px, #000000 0px 0px 20px, #000000 0px 0px 30px;
        
    }
    .buttons button:hover {
        background-color: #8B8BDB;
        cursor: pointer;
    }

    h1 {
        font-family: "Press Start 2P", system-ui;
        font-weight: bold;
        text-align: center;
        color: #BBD6FD;
        font-size: calc(2.5em + 5vw);
        text-shadow: 2px 2px 0 #000000, 4px 4px 0 #000000, 6px 6px 0 #000000, 8px 8px 0 #000000;
    }

    .description {
        color:#BBD6FD ;
        font-size: 1.2em;
        text-align: center;
        margin-top: 70vh;
    }

    .animal{
        height: 64px;
        position: relative;
        z-index: -1;
    }
    #a1{
        right: 2vw;
        bottom: 5vh;
        rotate: 320deg;
    }
    #a2{
        right: 25vw;
        top: 50vh;
    }
    #a3{
        left: 15vw;
        bottom: 18vh;
    }
    #a4{
        left: 5vw;
        top:60vh;
    }
    #a5{
        right: 2vw;
        top: 55vh;
    }
    #a6{
        right: 15vw;
        top: 180vh;
    }
    #a7{
        left: -25vw;
        top: 140vh;
    }
    #a8{
        left: 5vw;
        top: 60vh;
    }
    #a9{
        height: 64px;
        left: 35vw;
        top: 80vh;
    }
    #a10{
        height: 64px;
        right: 3vw;
        bottom: 8vh;
    }


    .tips {
        color:#BBD6FD ;
        font-size: 1.2em;
        text-align: center;
        margin-top: 20vh;
    }

    .credentials {
        color: #BBD6FD;
        font-size: 1.2em;
        text-align: center;
        margin-top: 70vh;
    }

    ::-webkit-scrollbar {
        width: 0px;
    }
    
}


.flyout {
    animation: flyOut 1s ease-in-out forwards;
}
.scrolly {
    animation: flyIn 1s ease-in-out forwards;
}

@keyframes flyIn {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 50%;
    }
}


@keyframes flyOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(25%);
        opacity: 0;
    }
}

@keyframes audiofly {
    from{
        transform: translateY(-100%);
        opacity: 0;
    }
    to{
        transform: translateY(0%);
    }
}