:root{
  --red: rgb(237, 32, 32);
  --blood-red: #861c1c; /* rgb(99, 20, 20) */
  --ash: #0d0a0a;
}

body {
  background-color: var(--ash);
  color: var(--red);
  font-family: Verdana;
  margin: 0 0 8em 0;
}
main{  
  margin-left: 16vw;
  margin-right: 16vw;
  min-width: 40vw;
}
header{
  margin-left: 16vw;
  margin-right: 16vw;
  min-width: 40vw;
}
h1{
  text-align: center;
  color: var(--red);
}
h2{
  text-align: center;
  color: var(--red);
}
h3{
  text-align: center;
  color: var(--blood-red);
}
p{
  text-align: center;
  color: var(--blood-red);
  padding: 6px 6px;
}
a{
  color: white;
  font-style: italic;
}
img{
    filter: grayscale(100%);
}
table, th, td{
  border: 1px solid var(--blood-red);
  padding: 1em;
}
section{
  border: 1px solid rgb(167, 163, 163); 
  padding: 1em;
}


.text-effect{
  filter: blur(0.3px);
  filter: drop-shadow(0px 0px 2px var(--blood-red));
  text-shadow: 0px 0px 0.5px var(--blood-red);
  background-clip: text;
}
  
.nav{  
  width: 100%;
  height: 8rem;
}

.nav-links{
  list-style: none;
  display: flex;
  justify-content: center;

  margin-top: 2rem;
  padding: 0;
}
.nav-links > li a{
  white-space: nowrap;
  text-decoration: none;
  display: block;
  font-size: 24px;
  font-weight: 500;
  padding: 0.8vw 1.6vw;
  margin: 0.5rem;
  
  background-color: var(--ash);
  border-radius: 12px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--blood-red);

  color: var(--cyan);
  cursor: pointer;
  transition: transform .4s ease;
}
.nav-links > li > .active{
  background-color: rgba(255, 255, 255, 0.3);
  color: white;
  border-color: white;
}
.nav-links > li a:hover{
  filter: blur(0.3px);
  filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.3));
  text-shadow: 0px 0px 0.5px rgba(255, 255, 255, 0.3);

  transform: scale(1.05);
}



.drop-down, li{
  z-index: 1;
}
.drop-down-content{
  display: none;
  position: absolute;
  z-index: 1;
}
.drop-down:hover .drop-down-content{
  display: block;
}
.drop-down-content a{
  display: block;
  text-align: left;
}


/*  UNUSED */
header > .hero-image{
  background-image: url();
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  position: relative;
}
.hero-text{
  text-align: center;
  height: 8rem;
  overflow: hidden;
}
.hero-text > img{
  object-fit: contain;
  width: 100%;
  height: 100%;

  transform: scale(1.5);
}