@font-face {
  font-family: gameboy;
  src: url(other/Early\ GameBoy.ttf);
}

* {
    margin: 0px;
    font-family: gameboy;
}

:root {
    --base: 32px;
}

body {
    background-color: black;
}

#main {
    width: calc(var(--base)*10);
    height: calc(var(--base)*8);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
}


#all {
    width: calc(var(--base)*9);
    height: calc(var(--base)*7);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
}

#background {
    width: 100%;
    height: 100%;
    background-image: url(images/background.png);
    background-position-x: calc(var(--base)*-9);
    background-position-y: calc(var(--base)*-7);
    background-repeat: no-repeat;
}

#player {
    width: var(--base);
    height: var(--base);
    background-image: url(images/playerdown.png);
    position: absolute;
    z-index: 2;
    left: calc(var(--base)*4);
    top: calc(var(--base)*3);
}

#text, #text2 {
    position: absolute;
    color: white;
}

#textbox {
    position: absolute;
    bottom: 2px;
    background-color: black;
    border: 2px solid white;
    color: white;
    margin: calc(var(--base)/2);
    width: calc(var(--base)*8);
    display: none;
    text-align: center;
    z-index: 5;
}

#op1, #op2 {
    position: absolute;
    color: white;
    bottom: -15px;
    display: none;
}

#op1 {
    left: var(--base);
}
#op2 {
    right: var(--base);
}

#inejer {
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 4;
}

#alerter {
    position: absolute;
    right: -32px;
    top: -32px;
    display: none;
    background-image: url("symbols/alert.png");
    width: var(--base);
    height: var(--base);
    z-index: 10;
}

#thing1, #thing2, #thing3, #thing4 {
    position: absolute;
    right: -32px;
}

#thing1, #text1 {
    top: var(--base);
}

#thing2, #text2 {
    top: calc(var(--base)*2);
}

#thing3, #text3 {
    top: calc(var(--base)*3);
}

#thing4, #text4 {
    top: calc(var(--base)*4);
}

#text1, #text2, #text3, #text4 {
    position: absolute;
    right: -64px;
    color: white;
}

#money {
    position: absolute;
    right: -32px;
    top: calc(var(--base)*5.5);
    color: white;
}

.thingy {
    background-image: url(Untitled_Artwork.png); /*temp backgrround make a batter one*/
}

.thingy > a {
    position: absolute;
    margin-left: calc(var(--base)*3.5);
    margin-top: calc(var(--base)*5);
    background-color: black;
    color: white;
    text-decoration: none;
    padding: 5px;
    border: 2px solid white;
    border-radius: 3px;
    text-align: center;
}

.thingy > P {
    position: absolute;
    margin-left: calc(var(--base)*2);
    margin-top: calc(var(--base)*1.5);
    font-size: 32px;
}

#tutorial {
    color: white;
    margin-left: -300px;
    width: 300px;
    margin-top: 40px;
    display: block;
}

#whiteout {
    width: 100%;
    height: 100%;
    background-color: white;
    display: none;
    z-index: 10;
    position: absolute;
}

#whiteout > p {
    text-align: center;
    margin-top: 85px;
}