body {
  font-family:Arial;
  background: #ffffff url("../images/assets/water.gif") repeat center;
}

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

.flood { /*main style class*/
  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;
}

.frame { /*frame class*/
  border: 30px solid transparent;
	border-image: url('https://static.wikitide.net/floodescapewiki/4/4b/YoutubeFrame.png') 55 stretch;
	
	width: fit-content;
	display: inline-block;
}


.shadow { /*applies glow on selected items*/
  box-shadow: 0 0 5px 0 white;
-webkit-box-shadow: 0 0 5px 0 white;
-moz-box-shadow: 0 0 5px 0 white;
}


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

.main {
  max-width:50vw;
  
}
  



.topnav{
  width:100vw;
  background-image: url("../images/assets/glitch.gif");
}

.topnav ul{
  background: rgba(111, 0, 213,0.5);
  background-image: url("../images/assets/darksci.png");
  background-size:200px;
  padding:0.5em;
  border:2px dashed #787fff;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-evenly;
  list-style-type: none;
  
}

.topnav li {
  float:left;
}

.topnav li a {
  display: inline-block;
  text-align: center;
  padding: 0.2em 1em;
  text-decoration: none;
  color:#bb005c;
  
  transform-origin: center center;
	transform: scale(1);
	transition: transform 180ms ease;
}

.topnav li a:hover {
  transform:scale(1.2);
  filter:brightness(1.2);
}







.bannerspace{
  max-width:10vw;
}
.banners {
  width:100%;
  box-sizing:border-box;
}

.dropdown {
  display:none;
  background:rgba(0, 0, 0, 0.9);
  color:#99d9f1;
  text-shadow:0 0 10px #2971dc;
  border:10px ridge #0f1220;
  padding:1em;
  margin-bottom:0.5em;
  position:relative;
}

  .dropdown-content {
  display: none;
  position: absolute;
  background:black;
}

.dropdown:hover .dropdown-content {
  display: block;
  
}

/*@media all and (max-width: 1400px) and (min-width:1000px) {
    .bannerSpace {
    width:10vw
  }
  
}*/

@media all and (max-width: 1000px) {
  .bannerSpace {
    display:none;
  }
  
    .banners {
    display:none;
  }
  
  .main {
    max-width:50vw;
  }
}

@media all and (max-width: 767px) {
  .flood{
    padding:0.5em;
    margin:1em;
  }
  
  .main {
    max-width:100%
  }
  
  .dropdown {
    display:block;
  }
  
  #webNav {
    display:none;
  }
  

}

@media all and (max-width: 500px) {
  .flood{
    padding:0.5em;
    margin:1em;
  }
}


















.column {
padding-top:3em;
}

.img {
  margin:2em;
}


.inv {
  background:#bb005c;
  color:#787fff;
}

.outline {
  max-width:55vw;
  border:2px solid blue;
}

.banner{
  display:block;
  transform-origin: center center;
	transform: scale(1);
	transition: transform 180ms ease;
	width:10vw;
	border:2px dotted cyan;
	margin:auto;
}

.banner:hover {
  transform:scale(1.02);
  filter:brightness(1.2);
}

.column div {
  margin-bottom:1em;
}

.main-nav ul{
  padding-top:0;
  padding:0.5em;
  list-style:none;
  margin:0;
}

.side-bar {
  width:10vw;
  max-width:12em;
  padding:1em;
}

.pink{ 
  background:rgba(128, 0, 70,0.8);
  color:#46afe6;
  border:2px dotted magenta;
  border-radius:3px;
}

.cyan{ 
  background:rgba(0, 41, 65,0.8);
  color:#46afe6;
  border:2px dotted orange;
  border-radius:3px;
}