/* STYLE SECTIONING TAGS */
* { /* Reset the space of the webpage */
   margin: 0px;
   padding: 0px;
}

body {
 background-color: lightcyan; 
}

/* STYLE TEXT */

h1 {
   color: #a4e5dd;
   font-size: 4em;
}

/* STYLE IMAGES */

/* STYLE NAV BAR */
ul {
   list-style-type: none;
   background-color: #0d9c90;
   overflow: hidden;
   padding: 1.7em;
   display: flex;
   justify-content: center;
   gap: 30px;
   flex-wrap: wrap;
}

li {
   display: inline;
}

li a{
   font-size: 18px;
   font-weight: bold;
   padding: 20px;
   text-decoration: none;
   color: #ffffff;
   transition: color 0.3s ease;
}

li a:hover {
   background-color: #35bdb2;
}

li a.active {
   border-bottom: 3px solid #a4e5dd;
   background-color: #35bdb2;
}

/* ADD MORE! */

/* header background image */
.home-header {
   position: relative;
   background-image: url("assets/background-hometop.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   height: 100vh;
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
   padding: 3em;
   overflow: hidden;
}

.home-header::before{
   content: "";
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
   background: rgba(0, 0, 0, 0.4); /*semi transparet black*/
   z-index: 1;
}

.home-header * {
   position: relative;
   z-index: 2;
}

.home-header p {
   font-size: 2em;
}

.credits {
   width: 45%;
   color: #3d4342;
   text-align: center;
   font-size: 0.8em;
}

.image-block {
   display: flex;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
   padding: 2em 1em;
}

.image-row {
   width: 300px; 
   border: 3px solid #ccc; /* light border */
   border-radius: 10px;
   overflow: hidden;
   background-color: white; /* for background */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   text-align: center;
   margin: 10px;
}

.not-alone {
   width: 100%;
   height: auto;
   border-radius: 10px;
   display: block;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sad {
   width: 100%;
   height: 200px;
   border-radius: 10px;
   display: block;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.looking-up {
   width: 100%;
   height: auto;
   border-radius: 10px;
   display: block;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.letustalk {
   font-size: 1.5em;
   font-weight: 760;
   color: #2e4a62;
   text-align: center;
   margin-top: 2em;
   margin-bottom: 0.5em;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.letustalk::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: 0.5em auto 0;
  background-color: #67b26f; /* or accent color */
  border-radius: 2px; 
}

.section-support {
   background-color: #aaeeda;
   padding: 3em 1em;
   border-radius: 10px;
}

.section-truth h1 {
   color: #a4e5dd;
}

.section-truth p  {
   font-size: 1.5em;
}

.section-truth {
   position: relative;
   background-image: url("assets/background-homebottom.jpg");
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   padding: 6em 4em;
   color: white;
   text-align: center;
   z-index: 1;
   overflow: hidden;
}

.section-truth::before {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   background-color: rgba(0, 0, 0, 0.5); /* dark overlay */
   z-index: 0;
}

.section-truth > * {
   position: relative;
   z-index: 1; /* keeps text above the overlay */
}


.home-header * {
   position: relative;
   z-index: 2;
}


/* Header background images for other pages */
.feelbetter {
   background-image: url("assets/background-feelbetter.jpg");
   background-size: cover;
   background-position: center;
   background-attachment: fixed; /* parallax*/
   background-repeat: no-repeat;
   height: 100vh; /*covers whole screen*/
   color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 2em;
   position: relative;
}

.feelbetter::before {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   background: rgba(0, 0, 0, 0.4); /*darken the image*/
   z-index: 0;
}

.feelbetter > * {
   position: relative;
   z-index: 1; /* keeps text above the overly */
}

.feelbetter h1 {
   font-size: 2.8em;
   font-weight: 700;
   margin-bottom: 0.5em;
   color: #a4e5dd;
   text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* adds depth to the letters*/
}

.feelbetter p {
   font-size: 1.4em;
   font-weight: 400;
   max-width: 700px;
   color: #f0f0f0;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* better visibility on light backgrounds */
}

.mood {
   padding: 4em 1em;
   background-color: #007573; /* soft background */
   text-align: center;
   border-top: 3px solid #a3c4f3; /* separation line */
   color: #a4e5dd;
}

.mood h2 {
   font-size: 2em;
} 
.mood p {
   font-size: 1em;
}

.resources {
   position: relative;
   background-image: url("assets/background-resources.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   height: 60vh;
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
   padding: 2em;
}

.resources::before {
   content: "";
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
   background: rgba(0, 0, 0, 0.4);
   z-index: 1;
}

.resources * {
   position: relative;
   z-index: 2;
}

.resources h2 {
   font-size: 2.8em;
   font-weight: 700;
   margin-bottom: 0.5em;
   color: #a4e5dd;
   text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* adds depth to the letters*/
}

.resources-page {
   background-color: #9bf2f8; /* soft off-white blue*/
   padding: 4em 2em;
   text-align: center;
}

.intro-text {
   font-family: "Times New Roman", serif;
   font-size: 1.4em;
   line-height: 1.6;
   color: #2e4a62;
   margin-bottom: 1.5em;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.remember-text {
   font-family: "Times New Roman", serif;
   font-size: 1.3em;
   line-height: 1.7;
   color: #2e4a62;
   margin-bottom: 1.5em;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.resources-page h5 {
   font-size: 1.6em;
   color: #2e4a62;
   margin: 3em 0 1.5em 0;
   font-weight: bold;
   font-family: "Times New Roman", serif;
}

.learn-more {
   position: relative;
   background-image: url("assets/background-learnmore.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   height: 400px;
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
   padding: 3em;
   margin: 0;
}

.learn-more::before {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1;
}

.learn-more * {
   position: relative;
   z-index: 2;
}

.learn-more-page {
   background-color: #55b3b9; /* soft off-white blue*/
   padding: 4em 2em;
   text-align: center;
}

.more-heading {
   font-size: 2em;
   background: linear-gradient(135deg, #12403d, #14a38c);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   margin-bottom: 1em;
}

.more-heading p {
   font-size: 1em;
   font-family: "Times New Roman";
   font-style: italic;
   color: black;
}
.resource-link {
   display: block;
   background-color: #48a89d;
   margin: 1em auto;
   padding: 1em;
   max-width: 700px;
   border-radius: 15px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   text-decoration: none;
   color: #ffffff;
   font-family: "Times New Roman";
   font-weight: bold;
   font-size: 20px;
   transition: transform 0.2s, box-shadow 0.2s;
}

.bady {
   color: #2d6763;
   font-size: 20px;
   font-family: "Times New Roman";
   margin-bottom: 1em;
}

.learn-more .bady h4 {
   color: #ffffff;
   font-size: 2.5em;
   margin-bottom: 0.5em;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
   font-weight: bold;
}

.learn-more .bady p {
   font-size: 1.3em;
   line-height: 1.5;
   color: #ffffff;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.bady h4 {
   color: #a4e5dd;
   font-size: 25px;
   margin-bottom: 0.5em;
}

.bady p {
   font-size: 1.2em;
   line-height: 1.4;
   color: #f0f0f0;
}

.description {
   font-family: "Times New Roman";
   font-style: italic;
   margin-bottom: 3em;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.6;
   font-size: 1em;
}

.text {
   font-size: 18px;
   font-family: "Times New Roman";
   font-style: italic;
   padding: 2em;
   background-color: rgb(7, 124, 126, 0.9);
   margin: 2em auto;
   max-width: 800px;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* App logos styling */
.logos {
   width: 180px;
   height: 180px;
   object-fit: contain;
   border-radius: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   flex-shrink: 0;
}

.resource-link:hover {
   transform: scale(1.02);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   background-color: #006652;
}

/* Button styling */
button {
   background-color: #0d9c90;
   color: white;
   border: none;
   padding: 10px 15px;
   border-radius: 0;
   cursor: pointer;
   font-size: 16px;
   transition: background-color 0.3s ease;
}

button:hover {
   background-color: #35bdb2;
}

/* Input styling */
input[type="text"], input[type="number"] {
   padding: 10px;
   border: 2px solid #ddd;
   border-radius: 5px;
   font-size: 16px;
   margin: 10px 0;
   width: 300px;
   max-width: 100%;
}

/* fact buttons */
.fact-section {
   padding: 4em 1em;
   background-color: #f7faff; /* soft background */
   text-align: center;
   border-top: 3px solid #a3c4f3; /* optional separation line */
}

.fact-section h3 {
   font-size: 1.8em;
   color: #2e4a62;
   margin-bottom: 0.5em;
}

.before-btn {
   font-weight: bold;
   margin-bottom: 1em;
   color: #37505c;
}

#fact-btn {
   background-color: #67b26f;
   color: white;
   font-size: 1em;
   border: none;
   padding: 0.75em 2em;
   border-radius: 25px;
   cursor: pointer;
   transition: background-color 0.3s ease;
   margin-bottom: 1em;
}

#fact-btn:hover {
   background-color: #558b6e;
}

#fact-text {
   font-size: 1.1em;
   color: #2e4a62;
   margin-top: 1em;
   font-style: italic;
}

.input-section {
  background-color: #f1f6f9;
  padding: 4em 2em;
  text-align: center;
}

.input-section p {
  font-size: 1.1em;
  color: #444;
  margin-bottom: 1.5em;
}

#feeling-input {
  padding: 0.8em;
  width: 70%;
  max-width: 400px;
  font-size: 1em;
  border: 2px solid #a3c4f3;
  border-radius: 10px;
  outline: none;
  margin-bottom: 1em;
}

#feeling-input:focus {
  border-color: #67b26f;
}

#respond-button {
  background-color: #67b26f;
  color: white;
  padding: 0.7em 2em;
  font-size: 1em;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 0.5em;
}

#respond-button:hover {
  background-color: #558b6e;
}

#response-text {
  margin-top: 1.5em;
  font-size: 1.2em;
  font-style: italic;
  color: #2e4a62;
}

.resources-page h6 {
   font-size: 1.8em;
   color: #2e4a62;
   margin: 1.5em 0 1em 0;
   font-weight: bold;
}

.app-content {
   display: flex;
   align-items: flex-start;
   gap: 2em;
   margin-bottom: 4em;
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
   padding: 0 2em;
}

.app-text {
   flex: 1;
   font-size: 1.2em;
   line-height: 1.6;
   color: #2e4a62;
   text-align: left;
}

/* RESPONSIVE DESIGN - MEDIA QUERIES */

/* Tablet screen */
@media screen and (max-width: 768px) {
   .home-header h1 {
      font-size: 3em;
   }
   
   .home-header p {
      font-size: 1.6em;
   }
   
   .image-block {
      flex-direction: column;
      align-items: center;
   }
   
   .app-content {
      flex-direction: column;
      text-align: center;
      gap: 1em;
   }
   
   .logos {
      width: 120px;
      height: 120px;
   }
   
   .feelbetter h1 {
      font-size: 2.2em;
   }
   
   .feelbetter p {
      font-size: 1.2em;
   }
   
   ul {
      gap: 20px;
      padding: 1em;
   }
   
   li a {
      font-size: 16px;
      padding: 15px;
   }
}

/* Mobile screen */
@media screen and (max-width: 480px) {
   .home-header {
      height: 80vh;
      padding: 2em 1em;
   }
   
   .home-header h1 {
      font-size: 2.5em;
   }
   
   .home-header p {
      font-size: 1.4em;
   }
   
   .feelbetter h1 {
      font-size: 1.8em;
   }
   
   .feelbetter p {
      font-size: 1em;
   }
   
   ul {
      gap: 15px;
      padding: 1em;
      flex-direction: column;
   }
   
   li a {
      font-size: 14px;
      padding: 12px;
   }
   
   #feeling-input {
      width: 90%;
   }
   
   .section-truth {
      padding: 4em 2em;
   }
   
   .section-truth h1 {
      font-size: 3em;
   }
   
   .section-truth p {
      font-size: 1.2em;
   }
   
   .intro-text {
      font-size: 1.2em;
   }
   
   .remember-text {
      font-size: 1.1em;
   }
   
   .app-content {
      padding: 0 1em;
   }
   
   .learn-more .bady h4 {
      font-size: 2em;
   }
   
   .learn-more .bady p {
      font-size: 1.1em;
   }
}