* {
  margin: 0; padding: 0;
}

html {
  cursor:url("../media/cursor.png"), default;
  padding: env(safe-area-inset);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#footer {
   position: absolute;
   bottom: 1vh;
}

#container {
  overflow: hidden;
  position: absolute;
  
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
}

#background_video {
  position: absolute;

  top: 50%; 
  left: 50%;

  transform: translate(-50%, -50%);

  object-fit: cover;

  height: 100%; 
  width: 100%;
}

#overlay {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.85) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.85)), color-stop(100%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.85) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.85) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.85) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.85) 100%); /* W3C */
}

#video_cover {
  position: absolute;

  width: 100%; height: 100%;

  background-size: cover;
  background: url('../media/pog.png') no-repeat center;
}

.text {
  font-family: 'Karla', sans-serif;
  color: #fafafa; 
  font-size: 50px;
  text-shadow: 3px 3px #7877c9;
  line-height: 0.95;
}

#timestamp {
  font-family: 'Karla', sans-serif;
  color: #fafafa;
  font-size: 18px;
  text-shadow: 2px 2px #7877c9;
  margin-bottom: -7px;
}

.small_text {
  font-family: 'Karla', sans-serif;
  color: #fafafa; 
  font-size: 20px;
  text-shadow: 2px 2px #7877c9;
}

a:link, a:visited {
  color: #fafafa; 
  background-color: transparent;
  text-decoration: none;
}

a:hover, a:active {
  color: #fafafa; 
  background-color: transparent;
  text-decoration: underline;
}

.buttons {
  color: #fafafa; 
  font-size: 38px;
  text-shadow: 3px 3px #7877c9;
}

.viewport {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column; 
  margin: auto;
}

/* Grow - https://github.com/IanLunn/Hover/blob/master/css/hover.css*/
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  
  color: #dadaf2;
}