@font-face {
  src: url("../assets/DepartureMonoNerdFont-Regular.otf");
  font-family: Departure Mono;
}

:root {
  background-color: #1e1e1e;
  color: whitesmoke;
  font-family: Departure Mono, monospace;
}

* {
  margin: 0;
}


#soon {
  text-align: center;
  margin-top: 12rem;
  display: inline-block;
  animation: spin 30s linear infinite;
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

.web {
  background-image: linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%);
  background-size: 400% 400%;
  animation: move 15s linear infinite;
  background-clip: text;
  color: transparent;
}

@keyframes move {
  0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
/* Mosaic */
#mosaic {
  display: block;
  overflow: hidden;
}

#mosaic * {
  display: inline-block;
  margin: 0;
}

.zero {
  background-color: palegreen;
  color: #1e1e1e;
  padding: 64px 72px;
  text-align: center;
  transition: all 200ms;
}
@media (width >= 48rem) {
  .zero:hover {
    padding: calc(50vh - 2em) 72px;
  }
}

#one {
  background-color: gray;
  color: #1e1e1e;
  padding: 64px 48px 128px 48px;
}


#back {
  background-color: salmon;
  padding: 48px 12px;
  width: 64px;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: all 200ms;
}

#back:hover {
  padding: 48px 50%;
}

#spinner {
  animation: spin 15s linear infinite;
  display: inline-block;
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 50vh;
}

a {
  color: white;
  text-decoration: none;
}