html, body {
    margin: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-image: url(assets/clouds.jpg);
}

.main {
    width: 90%;
    max-width: 720px;
    box-sizing: border-box;
    container-type: inline-size;
    margin: 34px auto;
    border: 1px solid black;
    text-align: center;
    background-color: springgreen;
    border: 10px ridge lawngreen;
}

.main > * {
    margin: 34px auto;
}

.main > h1 {
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: clamp(2rem, 11cqw, 5rem);
  white-space: nowrap;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  filter: drop-shadow(3px 3px 0px #000000); 
  margin: 20px 0;

  background-image: linear-gradient(to bottom, #0084ff 0%, #0084ff 40%, lawngreen 100%);
}

.mono-text {
    font-family: "Courier New", monospace;
    font-size: 1rem;
    font-weight: bold;
}

.under-construction {
    margin: 0;
    width: 100%;
}

.text-box {
    margin: 34px auto;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14pt;
    background: palegreen;
    border: 10px ridge lawngreen;
}