@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  height: 100%;
  background-color: #0D0D0D;
}  

a {
  text-decoration: none;
  transition: 0.6s;
  color: #ffffff;
}

a:hover {
  color: #fff;
}

#video, body {  
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

#welcome {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-size: 20px;
  color: #ffffff;
  transition: 0.6s;
  user-select: none;
}

#hidden {
  transition: 0.6s;
}

.wrapper{   
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  width: auto;
  margin: auto;
  line-height: 0.7; 
}

.content {
  margin-left:auto;
  text-align:center;
  margin-right:auto;
  margin-top:50px;
}

.title {
  width: auto;
  height: auto;
  margin: 15px;
  text-align: center;
  transition-duration: .5s;
  transition-timing-function: ease-out;
  text-shadow: 4px 4px 10px black;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: -2px;
  font-weight: 400;
  font-size: 7vh;
  color: white;  
}
.title:hover {
  -webkit-transition: .4s;
  transition-duration: .4s;
  transition-timing-function: ease-out;
  text-shadow: 1px 1px 12px white;
}

@keyframes fadebg {
  0%   { opacity: 0;}
  100% {opacity: 0.4;}
}  
.bgfade {
  animation-timing-function:ease-in;
  animation-name: fadebg;
  animation-duration: 2.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadetext {
  0%   { opacity: 0;}
  100% {opacity: 1;}
}
.fadetitle {
  animation-timing-function:ease-in;
  animation-name: fadetext;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-delay: .5s;
  opacity: 0; 
}

.centrets {
  color: white;
  text-align: center;
  user-select: none;
}

#typewriter {
  margin: 10px;
  margin-top: 20px;
  white-space: nowrap;
}

#typewriter:hover {
  -webkit-transition: .4s;
  transition-duration: .4s;
  transition-timing-function: ease-out;
  text-shadow: 1px 1px 12px white;
}

#volume-control {
    -webkit-appearance: none;
    width: 70%;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    opacity: 0.6;
    transition: opacity 0.2s;
}

#volume-control:hover {
    opacity: 1;
}


#volume-control::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #6a6a6a;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}

#volume-control::-webkit-slider-thumb:hover {
    background: #3a3a3a;
}

#volume-control::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #6a6a6a;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}

#volume-control::-moz-range-thumb:hover {
    background: #3a3a3a;
}