:root{
  --purple: #cb59ff;
  --purple-bg: #6800ff57;

  --cyan: #00ff73;
  --green-bg: rgba(0, 111, 69, 0.16);

  --dark-cyan: #1bffdfc9;
}

body {
  background-image: url("assets/endbg.jpg"); 
  background-color: #061b1f; /*#061f16 deep green*/
  color: #feda84;
  font-family: Verdana;
  margin: 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: #cd80ff;
}
h2{
  text-align: center;
  color: var(--cyan);
}
h3{
  text-align: center;
  color: var(--cyan);
}
p{
  text-align: center;
  color: var(--dark-cyan);
  padding: 6px 6px;
}

.container{
  background-color: var(--green-bg);
  border-radius: 24px;
  border-style: solid;
  border-width: 4px;
  border-color: var(--cyan);

  filter: blur(0.3px);
  
  padding-top: 8vh;
  padding-bottom: 8vh;

  margin-bottom: 2rem;
  padding: 1.5rem;
}

.text-effect{
  filter: blur(0.3px);
  filter: drop-shadow(0px 0px 2px var(--cyan));
  text-shadow: 0px 0px 0.5px var(--cyan);
  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(--green-bg);
  border-radius: 12px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--cyan);

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

  transform: scale(1.05);
}


/*  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);
}


.intro{
  margin-left: 8vw;
  margin-right: 8vw;
  margin-bottom: 2rem;
}

.computer-img{
  width: 800px;
}


/* BLOG.HTML */
.filter-container{
  display: grid;
  grid-template-columns: auto auto;
}
.checkbox-container{
  display: grid;
  grid-template-columns: auto auto auto auto;
}