body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  background-color: white;
  color: black;
  font-family: 'Roboto', sans-serif;
  align-items: center;
  justify-content: center;
}

input[type="checkbox"] {
  transform: scale(2);
  margin-top: 10px;
  margin-right: 10px;
}

input[type="checkbox"], input[type="radio"] {
  transform: scale(2);
  margin-right: 10px;
}



section {
  margin-bottom: 40px;
}

textarea {
  width: 80%;
  height: auto;
}

main {
  width: 100%;
  text-align: center;
  justify-content: center;
  margin-top: 0;
}

.time-options, .water-icons {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

/* General styles for mood section */
#mood {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.mood-icons {
  display: flex;  /* Using Flexbox for layout */
  justify-content: space-between;  /* Space items evenly */
  width: 80%;  /* Adjust to your needs */
  margin: 0 auto;  /* Center the flexbox container */
}

.mood-item {
  display: flex;  /* Using Flexbox for layout */
  flex-direction: column;  /* Stack items vertically */
  align-items: center;  /* Center items horizontally */
  justify-content: center;  /* Center items vertically */
}

/* Specific styles for the mood images and checkboxes */
.mood-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin-bottom: 5px;  /* Space below the image */
}

.mood-checkbox {
  margin-top: 5px;  /* Space above the checkbox */
}

.mood-label {
  margin-top: 5px;  /* Space above the label */
}


#morning-routine {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.checkbox-list {
  width: 90vw;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  justify-items: center;
  align-items: center;
  row-gap: 20px;  
  column-gap: 120px;
  padding-left: 30px;
  padding-right: 30px;
}


.checkbox-list li {
  display: flex;
  align-items: center;
}






.new-page {
  page-break-before: always;
}



#date-section,#name-section {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -10px; /* Adjust this to move it higher or lower */
}

label {
  margin-right: 10px;
}

input[type="text"] {
  border: none;
  border-bottom: 1px solid black;
  outline: none;
  width: 50vw;
}








 .to-do-list {
  list-style-type: none;
  width: 100%;
  text-align: center;
}

#img, #print {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  cursor: pointer;
}

#headerimg {
  max-width: 600px;
  width: 100vw;
  margin: 0 auto;
  margin-top: 0;
}

#print {
  position: fixed;
  top: 2%;
  left: 5%;
}



#water-balance {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center vertically */
  align-items: center; /* Center horizontally */
  height: auto;
  width: 100%; /* Full width */
  text-align: center;
  margin-bottom: 40px;
}

.water-icons {
  display: flex;
  flex-wrap: wrap;  /* Allow items to wrap */
  justify-content: center;
  align-items: center; /* Center items vertically */
  width: calc(100% - 60px); /* Full width minus 30px padding on each side */
  padding: 0 30px;  /* Padding left and right */
}

.water-item {
  flex: 0 0 calc(25% - 20px); /* Each item takes up 25% of the row minus margin */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5px 10px; /* Margin to each side of the item */
}

.water-item img {
  width: 50px;
  height: 50px;
}






#grateful-for {
  text-align: center;
  margin: auto;
}

#grateful-for h2 {
  margin-bottom: 10px; /* Adjust this value according to your needs */
}

.grateful-lines {
  width: 80%;
  margin: 0 auto;
  margin-top: 5px;  /* Add this line to adjust the distance from the title */
}

.grateful-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid black;
  margin: 5px 0;
  padding: 5px;
  font-size: 16px;
}

.grateful-input:focus {
  outline: none;
}


#happy-moments {
  text-align: center;
  margin: auto;
}

#happy-moments h2 {
  margin-bottom: 10px; /* Adjust this value according to your needs */
}

.happy-lines {
  width: 80%;
  margin: 0 auto;
  margin-top: 5px;  /* Add this line to adjust the distance from the title */
}

.happy-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid black;
  margin: 5px 0;
  padding: 5px;
  font-size: 16px;
}


#to-do-list {
  text-align: center;
  margin: auto;
  padding-left: 30px;
  padding-right: 30px;
}

.to-do-list {
  list-style-type: none;
  padding: 0;
}

.to-do-list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 30px;  /* Padding at the end of the line */
  margin-bottom: 20px;  /* Increased vertical spacing */
}

.to-do-checkbox {
  margin-right: 30px;  /* Space between checkbox and text input */
}

.to-do-input {
  flex-grow: 1;  /* takes up remaining space */
  border: none;
  border-bottom: 1px solid black;  /* Creates the underline */
  padding: 5px;
  font-size: 16px;
  margin-bottom: 20px;  /* Increased vertical spacing */
}






button {
  background-color: #120c69;
  color: white;
  border: none;
  border-radius: 5px;
  position: fixed;
  margin-top: 50px;
  z-index: 9999;
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  top: -5%;
  right: 2%;
  font-size: 20px;
  cursor: pointer;
}

@media print {
  body {
    font-size: 10pt;
  }
  h2 {
    font-size: 20pt;
  }
  /* Continue with whatever styles you want to apply for print */
}





#qrcode {
  width: 20%;
  height: auto;
}

#qrcodelabel {
  color: blue;
font-size: 16px;
box-sizing: border-box;
}