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

* {
  font-family: 'Fira Code', monospace;
  color: white;
  box-sizing: border-box;
}

html {
  --background-spacing: 30px;
  --background-rotate-right: 45deg;
  --background-rotate-left: -45deg;
  --background-thickness: 5px;
  
  position: absolute;
  display: flex;
  background: black;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

html::before {
  position: fixed;
  content: "";
  width: 100%;
  z-index: -100;
  height: 100%;
  background: repeating-linear-gradient( var(--background-rotate-right), #111, #111 var(--background-thickness), rgba(0, 0, 0, 0) var(--background-thickness), rgba(0, 0, 0, 0) var(--background-spacing) );
}

html::after {
  content: "";
  z-index: -100;
  position: fixed;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient( var(--background-rotate-left), #111, #111 var(--background-thickness), rgba(0, 0, 0, 0) var(--background-thickness), rgba(0, 0, 0, 0) var(--background-spacing) );
}

div {
  border-radius: 10px;
  padding: 10px;
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.content {
  opacity: 0%;
  animation: fade-in 2s 5s forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  margin: 20px;
}

.top {
  background-color: rgba(87, 87, 87, 0);
  animation: fade-in-background 2s 5s forwards;
  position: fixed;
  top: 10px;
  width: 90vw;
  height: 4rem;
  left: 5vw;
  display: flex;
  align-content: center;
  justify-content: start;
}

.title {
  height: min-content;
  width: fit-content;
  position: relative;
  animation: top-left 3s 2s forwards;
  font-size: 5rem;
  z-index: 100;
  opacity: 100%;
  margin-left: 0px;
  margin-block: 0px;
  top: 50vh;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  white-space: nowrap
}

@keyframes top-left {
    to {
        font-size: 2rem;
        height: 2rem;
        top: 0;
        left: 0;
        transform: translateX(0) translateY(0);
    }
}
@keyframes fade-in {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
@keyframes fade-in-background {
  from {
    background: rgba(0, 0, 0, 0);
  }
  to {
    background: rgba(87, 87, 87, 1);
  }
}