body {
  background-color: #202124;
  color: #FFFFFF;
    font-family: "Inter", sans-serif;

}



.feelinghow {
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wanttofeel {
  position: absolute;
  top: 550px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.better12 {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.better1 {
  position: absolute;
  top: 150px;
  left: 65%;
  transform: translate(-50%, -50%);
}

.better2 {
  position: absolute;
  top: 300px;
  left: 70%;
  transform: translate(-50%, -50%);
}

.better3 {
  position: absolute;
  top: 450px;
  left: 75%;
  transform: translate(-50%, -50%);
}

.better4 {
  position: absolute;
  top: 600px;
  left: 70%;
  transform: translate(-50%, -50%);
}

.better5 {
  position: absolute;
  top: 750px;
  left: 65%;
  transform: translate(-50%, -50%);
}

.better6 {
  position: absolute;
  top: 850px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.better7 {
  position: absolute;
  top: 750px;
  left: 35%;
  transform: translate(-50%, -50%);
}

.better8 {
  position: absolute;
  top: 600px;
  left: 30%;
  transform: translate(-50%, -50%);
}

.better9 {
  position: absolute;
  top: 450px;
  left: 25%;
  transform: translate(-50%, -50%);
}


.better10 {
  position: absolute;
  top: 300px;
  left: 30%;
  transform: translate(-50%, -50%);
}

.better11 {
  position: absolute;
  top: 150px;
  left: 35%;
  transform: translate(-50%, -50%);
}



textarea {
  background-color: #424242;
  color: #FFFFFF;
  border: none;
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
}

textarea:focus {
  outline: 5px solid lightgrey;
}

label {
  display: block;
  margin-bottom: 0px;
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF;
}
.save-button {
  position: absolute;
   top: 950px;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #424242;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.save-button:hover {
  background-color: #303030;

}
.clear-button {
  position: absolute;
  top: 950px;
  left: 60%;
  transform: translate(-50%, -50%);
  background-color: #424242;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.clear-button:hover {
  background-color: #303030;
}
.screenshot-button {
  position: absolute;
  top: 950px;
  left: 40%;
  transform: translate(-50%, -50%);
  background-color: #424242;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.screenshot-button:hover {
  background-color: #303030;
}

.yellow-textarea {
  background-color: #424242;
  color: #FDD835; /* Yellow font color */
  border: 5px solid #FDD835; /* Yellow border color */
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
}

.yellow-label {
  color: #FDD835; /* Yellow font color */
}

#better1 {
  border: 5px solid #8BC34A;
}

label[for=better1] {
  color: #8BC34A;
}

.start-here-text {
  color: #FF7F7F; /* Light red color */
}

.logo h1 {
  font-size: 48px; /* Adjust to the desired size */
}

.material-icons {
  font-size: 48px; /* Adjust to match the h1 size */
  vertical-align: middle; /* Align the icon with the text */
  color: white;
}




 .top-buttons {
    position: absolute;
    top: 1rem;
    display: flex;
  }

  .top-button-wrapper {
    margin: 0 0.5rem;
  }

        .top-button {
            color: #ffffff;
            background-color: #bb86fc;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            padding: 0.5rem;
            font-size: 1rem;
            text-decoration: none;
            display: block;
        } 

  .top-button.selected {
    background-color: #3700b3;
  }

  .shortcut {
    font-size: 0.7rem;
    text-align: center;
    margin: 0;
  }