:root {
    --inner: black;
    --border: black;
    --accent: #0073EE;
  }
body{
    display: flex;
    font-family: 'Press Start 2P', cursive;
    color: #0073EE;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url('gfx/interface-elements/background-pattern.png');
    background-color: green;
    background-repeat: repeat;
    background-size: 44px;
    background-position-x: center;
    background-position-y: top;
    zoom: 120%;
    margin: 10px;
}
.menu{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    text-align: center;
    width: 600px;
    height: 300px;
    background: var(--inner);
    box-shadow:
            0   -6px 0  -2px var(--inner),
            0    6px 0  -2px var(--inner),
            0  -12px 0  -4px var(--inner),
            0   12px 0  -4px var(--inner),
            0  -18px 0  -8px var(--inner),
            0   18px 0  -8px var(--inner),
            0  -24px 0 -12px var(--inner),
            0   24px 0 -12px var(--inner),
          
           -2px  0   0   0   var(--border),
            2px  0   0   0   var(--border),
            0   -4px 0   0   var(--border),
            0    4px 0   0   var(--border),
            0  -10px 0  -2px var(--border),
            0   10px 0  -2px var(--border),
            0  -14px 0  -4px var(--border),
            0   14px 0  -4px var(--border),
            0  -20px 0  -8px var(--border),
            0   20px 0  -8px var(--border),
            0  -26px 0 -12px var(--border),
            0   26px 0 -12px var(--border),
          
           -4px  0   0   0   var(--accent),
            4px  0   0   0   var(--accent),
            0   -2px 0   2px var(--accent),
            0    2px 0   2px var(--accent),
            0   -8px 0   0px var(--accent),
            0    8px 0   0px var(--accent),
            0  -12px 0  -2px var(--accent),
            0   12px 0  -2px var(--accent),
            0  -16px 0  -4px var(--accent),
            0   16px 0  -4px var(--accent),
            0  -22px 0  -8px var(--accent),
            0   22px 0  -8px var(--accent),
            0  -28px 0 -12px var(--accent),
            0   28px 0 -12px var(--accent),
          
           -6px  0   0   0   var(--border),
            6px  0   0   0   var(--border),
            0    0   0   4px var(--border),
            0   -6px 0   2px var(--border),
            0    6px 0   2px var(--border),
            0  -10px 0   0   var(--border),
            0   10px 0   0   var(--border),
            0  -14px 0  -2px var(--border),
            0   14px 0  -2px var(--border),
            0  -18px 0  -4px var(--border),
            0   18px 0  -4px var(--border),
            0  -24px 0  -8px var(--border),
            0   24px 0  -8px var(--border),
            0  -30px 0 -12px var(--border),
            0   30px 0 -12px var(--border);  
}
.menu-button{
    cursor: pointer;
    font-size: 20px;
    margin: 30px;
}
.menu-button:hover{
    color: #479efa;
}
#settings{
    display: none;
    text-align: center;
}
#settings>p{
    margin-bottom: 20px;
    padding: 2px;
    background-color: black;
}
.settings-button{
    margin: 20px;
    display: flex;
    flex-direction: row;
    
}
.settings-button>h2{
    justify-self: left;
    color:#479efa
}
#about{
    display: none;
    flex-direction: row;
}
#about>p,img{
    margin: 10px;
    color: #479efa;
    font-size: 7px;
}
#playground{
    display: none;
    margin-top: 150px;
    background-image: url('gfx/interface-elements/bottle.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 455px;
    width: 256px;
}
#playgroundContent{
    position: relative;
    top: -147px;
    left:40px;
    height: 344px;
    width: 176px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
}
.playground-element{
    background-repeat: no-repeat;
    background-size: cover;
    height: 22px;
    width: 22px;  
}
.gameinfo-image{
    width: 334px;
    height: 119px;
    position: absolute;
    z-index: 1;
}
#loupe{
    display: none;
    background-image: url("gfx/loupe/loupe.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 422px;
    height: 386px;
    position: absolute;
    bottom: 0;
    left: 0;
}
#blue-loupe{
    position: absolute;
    bottom: 70px;
    left: 180px;
    z-index: 1;
}
#brown-loupe{
    position: absolute;
    bottom: 220px;
    left: 200px;
    z-index: 1;
}
#yellow-loupe{
    position: absolute;
    bottom: 170px;
    left: 80px;
    z-index: 1;
}
#scoreboard{
    display: none;
    background-image: url("gfx/interface-elements/scoreboard.png");
    width: 207px;
    height: 157px;
    position: absolute;
    top:50px;
    left:100px;
}
#top-score{
    position: relative;
    left: 100px;
    top:50px;
}
#current-score{
    position: relative;
    top:70px;
    left: 100px;
}
#game-info{
    display: none;
    background-image: url("gfx/interface-elements/game-info.png");
    position: absolute;
    right: 200px;
    bottom: 100px;
    height: 205px;
    width: 175px;
}
.game-info-element{
    margin: 30px 0px 30px 0px;
    position: relative;
    top:40px;
    left: 100px;
}
#doctor{
    display: none;
    background-image: url("gfx/interface-elements/doctor_hand_up.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 210px;
    width: 210px;
    position: relative;
    top: 0px;
    left: 350px;
}
#pill{
    width: 44px;
    height: 22px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
}
.pill-part{
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: cover;
}