body{
  margin:0px;
  background:#121731FF;
  font-family:sans-serif;
}
section.navigation{
  position:fixed;
  background:#3A223C;
  width:100%;
  display:flex;
  flex-direction:row;
  opacity:80%;
}
.navigation * {
  align-self:center;
  font-size:25px;
  margin:8px;
  text-decoration: none;
  font-weight:bold;
  color:#80FFFF;
}
div.separator {
  width:2px;
  align-self:stretch;
  height:auto;
  background:blue;
  margin:15px;
  opacity:80%;
}
@font-face {
  font-family: cools;
  src: url('fonts/Quantico-BoldItalic.ttf');
}
.VMM {
  color:purple;
  font-family:cools;
  text-shadow: 1px 1px 3px aqua;
}
#moonlake{
  position:fixed;
  z-index:-1;
  background: no-repeat url("photos/moonmatrix.jpeg");
  background-size:cover;
  width:100%;
  aspect-ratio:1920/1024;
}
.ygradient{
  background:linear-gradient(#00000000,#00000000,#000000FF);
  aspect-ratio:1920/1200;
}
.ygradient *{
  position:relative;
  top:30%;
  z-index:-1;
}
.ygradient > *{
  position:absolute;
  top:30%;
  z-index:-1;
}
.ygradient p{
  font-size:32px;
  left:10%;
  max-width:50%;
  font-family:sans-serif;
  padding:5px;
  background:#0088001F;
}
#logo{
  width:15%;
  left:75%;
  top:30%;
  aspect-ratio:1/1;
  border:1px;
  border-style:solid;
  box-shadow:2px 2px 10px black;
}
.bg{
  width:100%;
  height:100%;
  background:#323B66;
}