/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@import "compass/css3";

@font-face {
  font-family: Interceptor; /* set name */
  src: url(/fonts/Interceptor.otf); /* url of the font */
}

@font-face {
  font-family: Dystopian; /* set name */
  src: url(/fonts/dystopian.otf); /* url of the font */
}

 @font-face {
  font-family: D3Digitalism; /* set name */
  src: url(/fonts/D3Digitalism.ttf); /* url of the font */
}

@font-face {                  
  font-family: Barecast-Thin;
  src: url(https://humantooth.neocities.org/fonts/Barecast-Regular.woff2) format('woff2');
  font-weight: normal;
  font-style: normal;
} 


body { 
  margin: 0; padding: 0;
  min-height:100vh;
  font-family:Dystopian;
  background-color: #000000;  
}

h3 {
  font-family:Barecast-Thin;
  color: #f3e600;  
  font-size: 1em; 
  font-weight: 5000;
  margin: 0; padding: 0;
  position:absolute;
  top: 57%; left: 50%;
  transform:translate(-50%,-50%);
  text-transform:uppercase;
}

ul {
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  min-width:530px;
  background-color:#000000;
  position:relative;
}

li {
  font-family:Barecast-Thin;
  color: #f3e600;  
  font-size: 1em; 
  font-weight: 5000;
  margin: 0 auto;
  display: inline-block;
  list-style: none;
  padding:0;
}

li {
  box-shadow: inset 0 0 0 0 #55ead4;
  color: #55ead4;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

li:hover {
  box-shadow: inset 100px 0 0 0 #55ead4;
  color: white;
}

h3::before {
  background: #55ead4;
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
}

h3:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

h2 {
  margin: 0; padding: 0;
  position:absolute;
  top: 50%; left: 50%;
  transform:translate(-50%,-50%);
  font-size: 6em; color:transparent;
  text-transform:uppercase;
}
h2 span:nth-child(1){
  position:absolute;
  top:0; left:0; color: #c5003c;
  transition:0.5s;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  overflow:hidden;
}
h2:hover span:nth-child(1){
  transform:translateY(-18px); 
}
h2 span:nth-child(2){
  position:absolute;
  top:0; left:0; color: #c5003c;
  transition:0.5s;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  overflow:hidden;
}
h2:hover span:nth-child(2){
  transform:translateY(18px); 
}
h2 span:nth-child(3){
  font-family:Barecast-Thin;
  position:absolute;
  top:50%; left: 0;
  transform:translateY(-50%) scaleY(0);
  width: 94%; color: #000;
  background:#55ead4;
  font-size: 0.25em; font-weight: 5000;
  letter-spacing:1.1em;
  text-align:center;
  padding-left: 15px; margin-left: 5px;
  transition:0.5s;
}
h2:hover span:nth-child(3){
  transform:translateY(-50%) scaleY(1);
}

.marquee {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position:absolute;
  top: 95%; left: 50%;
  transform:translate(-50%,-50%);
  font-family:Barecast-Thin;
  color: #c5003c;  
  font-size: 1em; 
  font-weight: 5000;
}