*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body { 
  position: relative;
  height: 100vh;
  overflow: hidden;
}

body.init canvas{
  height: 100vh;
  width: 100vw;
}

body.good-stonks{
  background: url('bg-good.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right; 
}

body.bad-stonks{
  background: url('bg-bad.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom right; 
}

#stonksplainer{
  position: absolute;
  width: 400px;
  top: 10vh;
  left: 50vw;
  margin-left: -200px;
  padding: 5px;
  background: #0C229C;
  color: #fff;
  font-family: Arial;
  border: 2px solid black;
  box-shadow: 
   -1px -1px 10px #fff,  
    1px -1px 10px #fff,
    -1px 1px 10px #fff,
     1px 1px 10px #fff,
   -1px -1px 20px #fff,  
    1px -1px 20px #fff,
    -1px 1px 20px #fff,
     1px 1px 20px #fff,
     0px 0px 50px #fff,
     0px 0px 70px #fff,
     0px 0px 80px #fff;
}

#stonksplainer p{
  margin: 20px;
}

#stonksplainer p#close{
  text-align: center;
}

#stonksplainer p#close > a{
  text-decoration: none;
  color: #000;
  text-shadow: 
   -1px -1px 5px #fff,  
    1px -1px 5px #fff,
    -1px 1px 5px #fff,
     1px 1px 5px #fff;
}

#stonksplainer p#close > a:hover{
  color: #0C229C;
}

#stonksman{
  position: absolute;
  top: 100vh;
  left: 5%;
  margin-top: -87vh;
  height: 90vh;
  width: 100%;
}

body.good-stonks #stonksman{
  background: url('stonksman-good.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left; 
}

body.bad-stonks #stonksman{
  background: url('stonksman-bad.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left; 
}

#spokestonks{
  position: absolute;
  top: 60%;
  right: 10%;
  font-size: 134px;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000,
   -1px -1px 10px #fff,  
    1px -1px 10px #fff,
    -1px 1px 10px #fff,
     1px 1px 10px #fff,
   -1px -1px 20px #fff,  
    1px -1px 20px #fff,
    -1px 1px 20px #fff,
     1px 1px 20px #fff,
     0px 0px 50px #fff,
     0px 0px 70px #fff,
     0px 0px 80px #fff;
}

.font{
  color: #fff;
  font-family: Arial;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000,
     0px 0px 5px #fff;
}

.font a{
  color: #fc7d28;
}

@media (max-aspect-ratio: 1/1) {
  #stonksman{
    margin-top: -47vh;
    height: 50vh;
  }
  #spokestonks{
    font-size: 84px;
    top: 30%;
  }
}

@media(min-width: 1199px){
  #spokestonks{
    font-size: 184px;
  }
}

@media(min-width: 1499px){
  #spokestonks{
    font-size: 284px;
  }
}

.hidden{
  display: none;
}