* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Outfit', sans-serif;
}

body {
    /* background: linear-gradient(135deg, #282884, #2d2d5f, #3d3d7e, #210745); */
    background-size: 400% 400%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    background-color: #fdfdfd;
    background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="%23bddfe6cc" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)" /></svg>');
    background-repeat: repeat; /* Ensure the pattern repeats */
    font-size: 20px;
    box-shadow: inset 0 0 30vh 0vh white;
    padding: 50px;
}


.spacing-control {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.prompt {
  font-family: 'Outfit', sans-serif;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: -0.5px;
  margin-bottom: 0.75em;
  line-height: 105px;
}

.logo {
  font-size: 1em;
  margin-bottom: 28px;
}

.logo-gradient {
  font-family: 'Outfit', sans-serif;
  font-size: 2.5em;
  font-weight: 300;
  letter-spacing: -0.5px;
  color: transparent;
  background-image: linear-gradient(90deg, #123dff 0%, #66349a 80%,  #66349a 100%);
  background-clip: text;
  border-bottom: 2px solid #66349a;
  /* border-bottom-left-radius: 10px; */
  border-image: linear-gradient(90deg, white 6px, #8ea2ff 6px, #5b52bb 80%,  #8b5cbb 100%) 1;
}

.logo-q {
  font-size: 1.4em;
  /* font-weight: 800; */
}

.container {
    width: 100%;
    /* height: 100%; */
    max-width: 700px;
    /* max-height: 600px; */
    background-color: white;
    border-radius: 20px;
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    box-shadow: 8px 8px 128px rgba(0, 0, 0, 0.05),
                8px 8px 32px rgba(0, 0, 0, 0.15);
    padding: 2em 2em 2.5em 2em;
}

.description {
  font-weight: 250;
  font-size: 1.1em;
  max-width: 580px;
  margin-bottom: 0.5em;
  font-family: Outfit;
  letter-spacing: 0.15px;
  color: #333;
}

.emphasis {
  color: transparent;
  /* background-image: linear-gradient(90deg, #123dff 0%, #9949eb 80%,  #8e5dc0 100%); */
  background-clip: text;
  font-weight: 350;
}

.emphasis-red {
  background-image: linear-gradient(90deg, #ff3311 0%, #e77418 100%);
}

.emphasis-green {
  background-image: linear-gradient(90deg, #409927 0%, #19a586 100%);
}

.emphasis-blue {
  background-image: linear-gradient(90deg, #276d99 0%, #3124cb 100%);
}

.pitch {
  font-weight: 250;
  font-size: 0.8em;
  max-width: 600px;
  margin-top: 20px;
  margin-bottom: 0.5em;
  font-family: Outfit;
  letter-spacing: 0.15px;
  color: #555;
}


a {
  color: #3a86d2;
  text-decoration: none;
}

a:hover {
  color: #1e4b78;
  text-decoration: none;
}


@media(max-width: 500px) {
  body {
    padding: 0;
    background-color: white;
    background: none;
    align-items: flex-start;
  } 
  
  .container {
    box-shadow: none;
  }
}

.math {
  font-family: Times New Roman, serif;
}

sup {
  font-size: 12px;
}