body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
  background-image: linear-gradient(
    to right bottom,
    rgb(192, 132, 252),
    rgb(244, 114, 182),
    rgb(251, 146, 60)
  );
  min-height: 100vh;
}

h1 {
  color: white;
  text-align: center;
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 0;
}

h2 {
  color: white;
  text-align: center;
  font-size: 20px;
  font-weight: normal;
}

h3 {
  margin: 0;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.code-section,
.result-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 8px;
  background: white;
  padding: 20px;
  height: fit-content;

  #code-msg {
    font-size: 14px;
    font-weight: 600;
    color: rgb(125, 22, 163);
    margin-bottom: 0;
  }
}

.code-section {
  width: 40%;

  textarea {
    min-height: 50vh;
    font-size: 16px;
    padding: 10px;
    background-image: linear-gradient(
      to right bottom,
      rgb(250, 245, 255),
      rgb(239, 246, 255)
    );
    border: 1px solid lavender;
    border-radius: 8px;
    margin-top: 20px;
  }
}

.result-section {
  width: 60%;

  iframe {
    min-height: 50vh;
    border: 1px solid #ccc;
    padding: 10px;
    background: white;
    border: 1px solid rgb(187, 247, 208);
    border-radius: 8px;
    margin-top: 20px;
  }

  #result-msg {
    font-size: 14px;
    font-weight: 600;
    color: rgb(22, 163, 74);
    margin-bottom: 0;
  }
}

.dots {
  display: flex;
  gap: 0.25rem;

  .dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;

    &.red {
      background-color: red;
    }
    &.orange {
      background-color: orange;
    }
    &.green {
      background-color: green;
    }
  }
}

#tips {
  margin-top: 50px;
  margin-bottom: 50px;
  padding-top: 20px;
  padding-bottom: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;

  h2 {
    font-size: 30px;
    color: black;
  }

  .flex {
    justify-content: center;
  }

  .tip {
    width: 33%;
    max-width: 300px;
    color: #747474;
    text-align: center;
    border-radius: 8px;
    background: white;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 20px;

    .title {
      color: black;
      margin-bottom: 10px;
    }

    &.colors {
      background-image: linear-gradient(
        to right bottom,
        rgb(219, 234, 254),
        rgb(243, 232, 255)
      );
    }

    &.texts {
      background-image: linear-gradient(
        to right bottom,
        rgb(234, 254, 255),
        rgb(234, 250, 255)
      );
    }

    &.structure {
      background-image: linear-gradient(
        to right bottom,
        rgb(255, 255, 243),
        rgb(243, 255, 255)
      );
    }
  }
}

footer {
  color: white;
  text-align: center;
}

.hidden {
  display: none;
}