/* shared css */

body{
  margin: auto;
  font-family: helvetica;
}

canvas{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin:auto;
  margin-top:5vh;
  border: 1px solid black;
  background-color: white
  }
  
#navbar a{
  text-decoration: none;
  font-weight:bold;
  font-size:150%;
  color:#511;
}
  
#next{
  position: absolute;
  right: 0px;
}

#prev{
  position: absolute;
  left: 0px;
}

#center{
  width: 100%;
  display: inline-block;
  text-align: center;
}

#navbar{
  width: 800px;
  margin: auto;
  margin-top:1em;
  position:relative
}

.background{
  position:fixed;
  height:100%;
  width:100%;
  z-index: -1;
}

#gradient{           
  background: radial-gradient(circle, rgba(255,255,255,0) 0%, 80%, rgba(0,0,0,0.1) 100%),
              linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.07) 100%);
  }
  
#oyasumioyasumi{ /* play omori its good */
  position:absolute;
  right:0;
  top:0;
  cursor:pointer;
}
  
/* darkmode css */

.darkmode #navbar a{
  color:#C11;
}

body.darkmode{           
  background-color: #333;
  }
  
.darkmode #overlay{
  filter: invert(0.5);
}

.darkmode #gradient{
    background: radial-gradient(circle, rgba(255,255,255,0) 0%, 80%, rgba(0,0,0,0.5) 100%),
                linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
  
}

.darkmode #oyasumioyasumi{
  filter: invert(1)
}