body {
  font-family:Arial;
  background: #ffffff url("images/assets/Infiltration.png") repeat center;
  background-size:cover;
}

.flex {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:1em;
  align-items:flex-start;
}


.img .left {
  margin:0 2em 1em 0;
}
  
.flood {
  background:rgba(0, 0, 0, 0.9);
  color:#99d9f1;
  text-shadow:0 0 10px #2971dc;
  border:10px ridge #0f1220;
  padding:2em;
  overflow:auto;
  margin-bottom:0.5em;
}

h1 {
  color:#bb005c;
  font-size:18px;
}

.main {
  max-width:50vw;
  
}

.shadow {
  box-shadow: 0 0 5px 0 white;
-webkit-box-shadow: 0 0 5px 0 white;
-moz-box-shadow: 0 0 5px 0 white;
}


/*.bgnav {
  overflow:hidden;
  max-height:4em;
  min-height:4em;
  width:100%;
  margin:auto auto 2em auto;
  background: cyan;
  background-image: url("images/assets/glitch.gif");
  padding:0.3em;
}*/
  
.topnav {
  /*position:absolute;
  top:0;*/
  height:5em;
  /*width:100%;*/
  margin:auto auto 2em auto;
  background-image: url("images/assets/darksci.png");
  background-size:200px;
  padding:0.3em;
overflow:hidden;
}

.topnav ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:0.5em;
  list-style-type: none;
  overflow: hidden;
}

.topnav li {
  float:left;
}

.topnav li a {
  display: inline-block;
  background:#f8e0f9;
  background-image:linear-gradient(#f8e0f9 70%, #cfccff);
  text-align: center;
  padding: 0.2em 1em;
  text-decoration: none;
  color:#bb005c;
  border:3px solid #0200d8;
  font-size:30px;
}

.topnav li a:hover {
    background:#787fff;
  background-image:linear-gradient(#787fff 70%, #9f78ff);
}

.active {
  background-color: red;
}


/*background-image: url("images/assets/glitch.gif");*/