html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'Bungee Outline', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

video#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: brightness(0.1) blur(5px);
  z-index: 0; 
}

/* Text SOON */
h1 {
  font-size: 25vh;
  color: white;
  text-align: center;
  font-weight: normal;
  filter: drop-shadow(calc(var(--x, 0px) * 3.14) calc(var(--y, 0px) * 3.14) 0.3px hsl(270, 100%, 12%))
          drop-shadow(calc(var(--x, 0px) * 6.28) calc(var(--y, 0px) * 6.28) 0.6px hsl(270, 100%, 24%))
          drop-shadow(calc(var(--x, 0px) * 9.42) calc(var(--y, 0px) * 9.42) 0.9px hsl(270, 100%, 36%))
          drop-shadow(calc(var(--x, 0px) * 12.56) calc(var(--y, 0px) * 12.56) 1.2px hsl(270, 100%, 48%))
          drop-shadow(calc(var(--x, 0px) * 15.7) calc(var(--y, 0px) * 15.7) 1.5px hsl(270, 100%, 60%))
          drop-shadow(calc(var(--x, 0px) * 18.84) calc(var(--y, 0px) * 18.84) 1.8px hsl(270, 100%, 72%));
}

@media (max-width: 768px) {
  h1 {
    font-size: 15vh;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 12vh;
  }
}

.speaker {
	height: 30px;
	width: 30px;
  top: 10px;        
  left: 10px;  
	position: fixed;
	overflow: hidden;
	display: inline-block;

	span {
		display: block;
		width: 8px;
		height: 8px;
		background: #fff;
		margin: 11px 0 0 2px;

		&:after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-style: solid;
			border-color: transparent #fff transparent transparent;
			border-width: 10px 14px 10px 15px;
			left: -13px;
			top: 5px;
		}

		&:before {
			transform: rotate(45deg);
			border-radius: 0 50px 0 0;
			content: '';
			position: absolute;
			width: 5px;
			height: 5px;
			border-style: double;
			border-color: #fff;
			border-width: 7px 7px 0 0;
			left: 18px;
			top: 9px;
			transition: all 0.2s ease-out;
		}
	}

	&:hover {

		span:before {
			transform: scale(.8) translate(-3px, 0) rotate(42deg);		
    }
	}
  
  &.mute {
    span:before {
			transform: scale(.5) translate(-15px, 0) rotate(36deg);
      opacity: 0;
    }
  }
}

.last-edition-btn {
  position: fixed;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0);
  color: white;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
  z-index: 2;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.last-edition-btn:hover {
  color: rgb(225, 0, 255);
}