@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,600;1,700&display=swap');

/* Slider (Volume) */
:root {
  --slider-thumb-color: #8b0000;
  --slider-color: white;
}
#slide {
	left: 1%;
}
.slider {
  width: 70%;
  height: 1.5vh;
  border-radius: 5px;
  background: var(--slider-color);
  outline: none;
  -webkit-appearance: none;
  box-shadow: 0px 0px 10px black;
  -webkit-transition: .4s;
  transition-duration: .4s;
  transition-timing-function: ease-out;
}
.slider:hover {
  -webkit-transition: .4s;
  transition-duration: .4s;
  transition-timing-function: ease-out;
  box-shadow: 0px 0px 20px white;
}
.slider::-webkit-slider-thumb {
  width: 2.5vh;
  height: 1.5vh;
  cursor: pointer;
  appearance: none;
  border-radius: 50%;
  background: var(--slider-thumb-color);
  -webkit-appearance: none;
  box-shadow: 0px 0px 10px black;
}
.slider::-moz-range-thumb {
  width: 2.5vh;
  height: 1.5vh;
  cursor: pointer;
  appearance: none;
  border-radius: 50%;
  background: var(--slider-thumb-color);
  -moz-appearance: none;
  box-shadow: 0px 0px 10px black;
}

/* Body elements */

body {
background: #000;
font-family: 'Source Code Pro', monospace;
font-size: 10px;
color: #fff;
text-align: center;
padding: 0;
margin: 0;
overflow: hidden;
-webkit-backface-visibility: hidden;
}

.br {
            display: block;
            margin-bottom: 0.4em;
        }

/* Background */
video {
   position: fixed;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: -100;
   transform: translateX(-50%) translateY(-50%);
   background-size: cover;
   filter: opacity(33%);
   transition: 4s opacity;
   -webkit-filter: blur(10px);
   -moz-filter: blur(10px);
   -o-filter: blur(10px);
   -ms-filter: blur(10px);
   filter: blur(10px);
   filter: grayscale(100%);
}

/* Links, Hovering */
a {
text-decoration: none;
color: white;
-moz-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}


/* Logo */
#main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}
#main:hover {
  filter:invert(100%);
  -webkit-animation: flash 1s;
  animation: flash 1s;
}

/* GIFs of nH face */
#logo {
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  opacity: 50%;
}

#logo2 {
  position: absolute;
  left: 65%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  opacity: 50%;
}

/* useless, unnecessary but keeping it as design idea --o-- */
#logo3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  opacity: 30%;
}

#logo4 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  opacity: 30%;
}

/* Right and left member boxes. links = right, linkalt = left */
#links-right {
position: fixed;
top: 81%;
right: 2.6%;
text-align: right;
}
#links-right a:hover {
  filter:invert(100%);
}
#links-right i {
  color: #000;
}

#links-left {
position: fixed;
top: 81.5%;
right: 89.5%;
text-align: left;
}
#links-left a:hover {
  filter:invert(100%);
}

#shota {
  position: fixed;
  left: 5%;
  top: 7%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  opacity: 100%;
  text-align: left;
}

#wd {
  position: fixed;
  left: 93%;
  top: 5%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  opacity: 100%;
  text-align: right;
}

#foot {
  position: absolute;
  left: 50%;
  top: 90.5%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  text-align: center;
  color: #000;
  opacity: 50%;
}
#cright {
  position: absolute;
  left: 50%;
  top: 89%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  opacity: 60%;
  /* border-style: solid;
    border-width: thin;
    border-color: #000;
    border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    padding: 10px;
    border-spacing: 10px; */
}

#cright {

}
#cright hr {
  border-top: 2px solid #000;
  filter: drop-shadow(0px 0px 1px #000);
}
#cright a {
  color: black;
  -moz-transition: .6s;
  -o-transition: .6s;
  -webkit-transition: .6s;
  transition: .6s;
}
#cright a:hover {
  color: #ff7700;
}

#socials {
  position: fixed;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  opacity: 100%;
  text-align: center;
  white-space: nowrap;
}
#socials hr {
  filter: drop-shadow(0px 1px 2px #000000);
}
#socials i.fab {
  filter: drop-shadow(0px 1px 2px #000000);
  stroke: 1px black;
}
#socials .fa-twitter:hover {
  color: #8affff;
}
#socials .fa-soundcloud:hover {
  color: #ff7700;
}
#socials .fa-instagram:hover {
  color: #8134af;
}
#socials .fa-discord:hover {
  color: #7289da;
}
#socials i {
  -moz-transition: .3s;
  -o-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
#socials i:hover {
  color: #8a0303;
}