* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    text-decoration: none;
    position: relative;
}

.d-none {
    display: none;
}

.d-flex {
    display: flex;
}

button {
    cursor: pointer;
    background-color: #ED9046;
    color: white;
    border-color: white;
    padding: 8px;
    font-weight: bold;
    border-radius: 8px;
    margin: 32px;
    transition: 300ms;
    font-family: 'Rye';
}

button:hover {
    background-color: #FFD600;
}

body {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(#4185A6, #FDD8A4, #64100E);
    font-family: 'Rye';
    font-size: 24px;
    color: #ED9046;

    #title {
        text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.8);
        margin: 24px;

        @media (max-width: 1024px) {
            display: none;
        }
    }
}

#wrapper {
    width: 720px;
    height: 480px;
    display: flex;
    justify-content: center;

    @media (max-width: 720px) {
        aspect-ratio: 720 / 480;
        width: 100%;
        height: 100dvh;
    }

    canvas {
        background-color: black;
        display: block;

    }

    div {
        width: 100%;
        height: 100%;
        background-position: center;
        position: absolute;
        top: 0;
        left: 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    #start-screen {
        background-image: url('./img/9_intro_outro_screens/start/startscreen_1.png');
        justify-content: center;
        align-items: flex-start;
    }

    #controls-screen {
        background-color: #ED9046;
        color: white;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2;

        table {
            width: 100%;
            height: 80%;
            display: flex;
            justify-content: center;
            align-items: center;

            tbody {
                width: 100%;
            }

            tr {
                width: 100%;

                display: flex;
                justify-content: space-around;
                align-items: center;

                td {
                    padding: 8px;
                    width: 50%;
                    text-align: center;
                }
            }
        }



    }

    #legal-notice-screen {
        background-color: #ED9046;
        flex-direction: column;
        align-items: center;
        color: white;
        overflow: auto;
        z-index: 2;
        padding: 16px;
        text-decoration: none;
        a{
            color: white;
        }

        /* p {} */
    }

    #loser-screen {
        background-image: url('./img/9_intro_outro_screens/game_over/oh no you lost!.png');
        justify-content: center;
        align-items: flex-start;
    }

    #winner-screen {
        background-image: url('./img/You won, you lost/You Win A.png');
        background-color: rgba(0, 0, 0, 0.429);
        background-size: contain;
        justify-content: center;
        align-items: flex-start;
    }

    #mobile-btns {
        position: fixed;
        align-items: flex-end;
        justify-content: space-between;

        @media (min-width: 1100px) {
            display: none;
        }

        div {
            position: relative;
            width: auto;
            height: auto;
        }

        button {
            border: none;
            border-radius: 100%;
            background-color:  #453d37a8;
            width: 40px;
            height: 40px;
            background-position: center;
            background-size: auto;
            background-repeat: no-repeat;
            img {
                width: 24px;
                height: 24px;
            }

        }

        #btn-left {
            background-image: url('./img/icons/arrow-left.png');
            margin: 0 32px 32px 40px ;
        }

        #btn-right {
            background-image: url('./img/icons/arrow-right.png');
            margin: 0 0 32px 0;
        }

        #btn-jump {
            background-image: url('./img/icons/arrow-up.png');
            margin: 0 0 32px 0;
        }

        #btn-throw {
            background-image: url('./img/icons/glass-bottle.png');
            margin: 0 40px 32px 32px;
        }
    }

    #loading-screen {
        background-color: #ED9046;
        align-items: center;
        justify-content: center;
        z-index: 2;

        h1 {
            color: white;
        }
    }

    #turn-phone-screen {
        justify-content: center;
        align-items: center;
        background-color: black;
        z-index: 2;

        @media (max-width: 500px) {
            display: flex;
        }
    }

    #btn-sound-mute {
        height: 35px;
        width: 35px;
        background-image: url(./img/icons/sound_on.png);
        background-size: cover;
        background-position: center;
        margin: 0;
        z-index: 1;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
    }

    #btn-sound-on {
        height: 35px;
        width: 35px;
        background-image: url(./img/icons/sound_off.png);
        background-size: cover;
        background-position: center;
        margin: 0;
        z-index: 1;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media only screen and (max-width: 1000px) {

    canvas {
        width: 100%;
    }
}


@media only screen and (max-height: 480px) {

    canvas {
        height: 100dvh;
    }
}