src/app/writing/writing.component.css

body {
  margin: 0;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  background-color: #fef6e4;
  overflow: hidden;
}

.main-container {
  width: 85%;
  margin: 7vh auto;
  border: 10px solid var(--main-accent-color);
  border-radius: 1.5vw;
  background: #ffffff;
  padding: 2vw;
  box-shadow: 0 0.4vw 1vw rgba(0, 0, 0, 0.1);
  height: 73vh;
}

.writing-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.intro-section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 3vw;
}

.intro-left-image {
  width: 35%;
}

  .intro-left-image img {
    width: 100%;
    height: auto;
  }

.left-image {
  width: 25%;
}

  .left-image img {
    width: 100%;
  }

.right-content {
  width: 66%;
}

  .right-content h2 {
    font-size: 2.5vw;
    font-weight: 800;
    color: #006780;
    margin-bottom: 20px;
  }

  .right-content p {
    font-size: 1.4vw;
    text-align: justify;
  }

.center-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 1vw;
  gap: 1.5vw;
}

  .center-controls label {
    font-size: 1.5vw;
    font-weight: 600;
    color: #006780;
  }

  .center-controls select {
    font-size: 1.4vw;
    padding: 0.6vw;
    border-radius: 0.5vw;
    border: 2px solid #009688;
    background-color: #ffffff;
  }

textarea {
  width: 100%;
  height: 14vw;
  font-size: 1.3vw;
  padding: 0.5vw;
  border-radius: 1vw;
  border: 2px solid #ccc;
  background-image: linear-gradient(white 90%, #f8d7da 10%);
  background-size: 100% 2.5vw;
  line-height: 2.5vw;
  resize: none;
  background-attachment: local;
}

.submit-area {
  text-align: center;
  margin-top: 1vw;
}

  .submit-area button {
    font-size: 1.3vw;
    padding: 0.8vw 2vw;
    border-radius: 1vw;
  }

.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loader {
  font-size: 15px;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
}

@keyframes mulShdSpin {
  0%, 100% {
    box-shadow: 0em -3em 0em 0em #808080, 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.5), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.7);
  }

  12.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.7), 2.2em -2.2em 0 0em #808080, 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.5);
  }

  25% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.5), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.7), 3em 0em 0 0em #808080, 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }

  37.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.5), 3em 0em 0 0em rgba(128, 128, 128, 0.7), 2.2em 2.2em 0 0em #808080, 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }

  50% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.5), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.7), 0em 3em 0 0em #808080, -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }

  62.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.5), 0em 3em 0 0em rgba(128, 128, 128, 0.7), -2.2em 2.2em 0 0em #808080, -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }

  75% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.5), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.7), -3em 0em 0 0em #808080, -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }

  87.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.5), -3em 0em 0 0em rgba(128, 128, 128, 0.7), -2.2em -2.2em 0 0em #808080;
  }
}

.back-icon {
  position: absolute;
  top: 12vw;
  left: 10vw;
  color: #007bff;
  font-size: 24px;
  width: 5vw;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

  .back-icon:hover {
    transform: scale(1.1);
    color: #0056b3;
  }

  .back-icon img {
    width: 30px;
    height: auto;
    cursor: pointer;
  }

.topic-fieldset {
  border: 2px solid #ffc107;
  padding: 1vw;
  border-radius: 1vw;
  background-color: #fffbe6;
  margin-bottom: 2vw;
}

  .topic-fieldset legend {
    font-size: 1.6vw;
    color: #ff5e00;
    padding: 0 1vw;
    font-weight: bold;
  }

  .topic-fieldset h2 {
    color: #ff5e00;
    font-size: 1.8vw;
  }

  .topic-fieldset p {
    font-size: 1.3vw;
    color: #0097a7;
    font-weight: 900;
  }

.feedback-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feedback-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  margin-bottom: 1vw;
}

  .feedback-header img {
    width: 3vw;
    height: auto;
  }

  .feedback-header h3 {
    font-size: 2vw;
    color: #ff6f00;
    margin: 0;
    font-weight: 800;
    text-shadow: 1px 1px #ffe0b2;
  }

.feedback-box {
  background-color: #fff8e1;
  border: 2px dashed #ffca28;
  border-radius: 1vw;
  padding: 2vw 2vw 2vw 2vw;
  width: 93%;
  height: 19.5vw;
  overflow-y: scroll;
}

  .feedback-box ul {
    font-size: 1.4vw;
    color: #333;
    padding-left: 0;
    list-style: none;
    text-align: left;
  }

  .feedback-box li {
    margin-bottom: 1vw;
  }

.try-again-button {
  text-align: center;
  margin-top: 3vw;
}

  .try-again-button button {
    font-size: 1.3vw;
    border: none;
    color: white;
    border-radius: 1vw;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

.animated {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.with-blue-tooltip {
  position: relative;
  display: inline-block;
}

.blue-tooltip {
  position: absolute;
  top: 50%;
  left: 105%;
  transform: translateY(-50%);
  background-color: #2196f3;
  color: white;
  padding: 0.8vw 1.2vw;
  border-radius: 0.5vw;
  font-size: 1vw;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 0.3vw 0.6vw rgba(0, 0, 0, 0.15);
}

  .blue-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.8vw;
    transform: translateY(-50%);
    border-width: 0.6vw;
    border-style: solid;
    border-color: transparent #2196f3 transparent transparent;
  }

.user-guide-close-icon {
  top: 9vw;
  right: 7vw;
}