:root {
    --screen-width: 921px;
    --screen-height: 576px;
    --main-height: 526px;
}
body {
    background-color: #f8f0e3;
}
.bubble {
    position: absolute;
    height: fit-content;
    padding: 2px 0;
    font-size: 2em;
    user-select: none;
    background-color: whitesmoke;
    border: 2px solid black ;
}

.button-row {
    position: relative;
    height: 50px;
    left: 0 ;
    top: 0 ;
    margin: 0 ;
    width: var(--screen-width) ;
    z-index: 50 ;
    background-color: black ;
    border: 1px solid black ;
}
.button_style {
    border: 5px solid darkblue;
    background-color: turquoise;
    color:white ;
    display: flex;
    justify-content: center;
    user-select: none;
}

.container {
    position: relative ;
    width: var(--screen-width) ;
    padding: 0 ;
}
#container {
    padding: 0 ;
}


#dialog-box {
    width: 25%;
    height: auto;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    padding: 10px;
}
.dialog-box-end {
    background-color: white;
    border: 1px solid black ;
}
#dialog-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin: auto ;
    background-color: lightgray;
    width: var(--screen-width) ;
    height: var(--screen-height) ;
    top: 0;
    z-index: 50;
}
#game_container  {
    height:  calc(var(--screen-height) - 120px);
    width: 100% ;
    padding: 0 ;
}
#hint , .hint {
    position: absolute;
    height: 50px;
    font-size: 2em ;
    max-width: 100px ;
    right:0 ;
    top:0 ;
    z-index: 5;
}


#instructions {
    display: flex;
    width: 70%;
    justify-content: center;
    justify-self: center;
    font-size: 2em;
    margin-left: max(72px,15%) ;
}
#instructions1 {
    position: relative ;
    width: 70%;
    z-index: 10;
}

/* Buttons to change language from English and back again */

#lang , #lang1button , #lang2button {
    width: fit-content;
    padding: 3px ;
    height: fit-content;
}
#layer1 , #layer2, #main  {
    position: absolute;
    left: 0 ;
    width: var(--screen-width) ;
    height: calc(var(--screen-height) - 70px) ;
}
#layer1 {
    z-index: 2;
    height: calc(100%  - 50px) ;
}
#layer2 {
    z-index: 3;
    height: calc(100%  - 50px) ;
}


#next , .next {
    height: 60px ;
    width:50px;
}


#play-audio {
    font-size: 2em;
    width: max(50px,6%) ;
}

#play_button , #play {
    width: max(70px,9%);
    height: max(70px,9%);
}
#play_button  {
    position: absolute ;
    bottom: 20% ;
    left: 40% ;
}


#title {
    position: absolute;
    width: 50%;
    height: fit-content;
    left: 25%;
    top: 45%;
    text-align: center;
    font-size: 2em;
    user-select: none;
}
#tryagain {width: max(25%, 200px);}

#wrapper {
    position: relative;
    width: var(--screen-width) ;
    height: var(--screen-height)  ;
    margin: auto ;
    padding: 0 ;
}