body {
  background-color: #025699;
}

#warning {
  z-index: 100;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 50px;
}

#continue {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
}

#logo {
  z-index: 1;
  position: fixed;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

#black {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 150;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
}

.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2.5s;
}

.fade-out {
  opacity: 0;
  animation-name: fadeOutOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1s;
}

h1 {
  font-size: 130px;
}

a {
  color: white;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeOutOpacity {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}