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

}



.feelinghow {
  position: absolute;
  top: 270px;
  left: 50%;
  
}

.wanttofeel {
  position: absolute;
  top: 350px;
  left: 50%;
  
}

.better12 {
  position: absolute;
  top: 120px;
  left: 50%;
}

.better1 {
  position: absolute;
  top: 150px;
  left: 300px;
  
}

.better2 {
  position: absolute;
  top: 230px;
  left: 330px;
  
}

.better3 {
  position: absolute;
  top: 300px;
  left: 360px;
  
}

.better4 {
  position: absolute;
  top: 380px;
  left: 330px;
  
}

.better5 {
  position: absolute;
  top: 450px;
  left: 300px;
  
}

.better6 {
  position: absolute;
  top: 850px;
  left: 50%;
  
}

.better7 {
  position: absolute;
  top: 750px;
  left: 35%;
  
}

.better8 {
  position: absolute;
  top: 600px;
  left: 30%;
  
}

.better9 {
  position: absolute;
  top: 450px;
  left: 25%;
  
}


.better10 {
  position: absolute;
  top: 300px;
  left: 30%;
  
}

.better11 {
  position: absolute;
  top: 150px;
  left: 35%;
  
}



textarea {
  width: 65px; /* Add this line to set the width */
  height: 45px; /* Add this line to set the height */
  background-color: #424242;
  color: #FFFFFF;
  border: none;
  padding: 2px;
  border-radius: 3px;
  font-size: 10px;
  
}

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

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

label {
  display: block;
  margin-bottom: -15px;
  font-size: 9px;
  font-weight: normal;
  color: #FFFFFF;
}
.save-button {
  position: absolute;
   top: 950px;
  left: 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%;
  
  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%;
  
  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-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;
}

/* ... (previous CSS code) ... */

nav {
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: left;
  align-items: left;
  margin-bottom: 20px;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 20px; /* Padding for a larger button area */
  margin-right: 10px; /* Add right margin to create space between buttons */
  border: 2px solid #ffffff; /* White border */
  border-radius: 4px; /* Rounded corners */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

nav a:last-child {
  margin-right: 0; /* Remove right margin for the last button */
}

nav a:hover {
  text-decoration: none;
  background-color: #ffffff; /* Change background color on hover */
  color: #6200ee; /* Change text color on hover */
}

nav a.active {
  font-weight: bold;
  text-decoration: underline;
}

/* ... (remaining CSS code) ... */