/* Reset The H */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

/* Base layout */
body {  
  background-color: rgb(174,218,203);
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* font-family: "Trebuchet MS", sans-serif; */
  font-size: 11pt;
}

body a {
    text-decoration: none;    
    color: #000;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

button {
  background-image: linear-gradient(
    45deg,
    rgb(130,163,152) 25%,
    rgb(148,185,173) 25%,
    rgb(148,185,173) 50%,
    rgb(130,163,152) 50%,
    rgb(130,163,152) 75%,
    rgb(148,185,173) 75%,
    rgb(148,185,173) 100%
  );
  background-size: 14.57px 14.57px;
  color: #fff;
  padding: 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  float: right;
  font-weight: bold;
  opacity: 0.8; /* slightly transparent */
  transition: filter 0.3s ease, opacity 0.3s ease;
  line-height: 0px;
}

button:hover {
  opacity: 1; /* fully visible */
  filter: brightness(85%); /* darkens the button */
}

h2 {
   color: rgb(148,185,173); 
}

    .h2Light {
        color: rgb(148,185,173);
    }

h3 {
    color: rgb(148,185,173);   
}

    .h3Light {
        color: rgb(148,185,173,0.6);  
    }

/* Centered content container */
.container {
  color: rgb(148,185,173);
  text-align: center;
  width: 100%;
  max-height: 100vh;
  padding-top: 30vh;
}

/* Logo styling */
.container img {
  width: 25vw;
  max-width: 240px;
  height: auto;
}

/* Headline */
.container h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
}

/* Paragraphs */
.container p {
  margin: 0.5em 0;
}

/* Email link */
.container a {
  color: #000;
  text-decoration: none;
}

/* Log in link */
#footer1 {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 12px;
  font size: 11px;
  color: rgb(148,185,173);
}

    #footer1 a {
      color: rgb(148,185,173);  
    }

#footer2 {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px;
  color: rgb(148,185,173);
}

    #footer2 a {
      color: rgb(148,185,173);  
    }

.login-link a {
  text-decoration: none;
  font-weight: bold;
  color: rgb(148,185,173);
}

/* Bottom-right link */
.bottom-right {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #6c63ff;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
}

/* Modal container */
#modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  display: none;
  position: absolute;
  z-index: 1000;
  left: 0;
  top: 0;
  background: 
  linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.35)
  );
  overflow-y: auto;
}

/* Modal content box */
#modalContent {
  position: absolute; 
  z-index: 1001;
  background: linear-gradient(
    to bottom,
    rgb(255,255,255) 0px,
    rgb(255,255,255) 74px,
    rgb(255,255,255,0.88) 74px,
    white 100%
  );
  width: 400px;
  padding: 23px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
}

/* Second Modal - Contact Form */
#message {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1002;
  left: 0;
  top: 0;
  background: none;
  overflow-y: auto;
}

/* Second Modal content box */
#messageContent {
  position: absolute;
  z-index: 1003;
  width: 500px;
  padding: 23px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  background:
    linear-gradient(to right, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.97) 97%, transparent 97%, transparent 100%),
    repeating-linear-gradient(-60deg,
      rgb(223,240,234),
      rgb(223,240,234) 20px,
      rgb(182,222,208) 20px,
      rgb(182,222,208) 40px
    );
}

/* Modal Title */
#modalTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 0 5%;
}

    /* Modal Title Text */
    #modalTitleText {
        color: rgb(148,185,173);
        width: 60%;
    }

/* Close button */
#modalClose {
  font-family: Arial;
  color: #666;
  position: relative;
  top: -3px;
  float: right;
  font-size: 32px;
  cursor: pointer;
  text-align: right;
}

/* Second Modal Close button */
#messageClose {
  font-family: Arial;
  color: #666;
  position: relative;
  top: -3px;
  float: right;
  font-size: 32px;
  cursor: pointer;
  text-align: right;
}

/* LogIn Form */
.loginForm {
    width: 90%;
    padding: 5%;    
}

/* HR */
.modalBottom {
    margin-top: 68px;
    border-top: 3px dashed rgb(148,185,173,0.15);
    width: 100%;
    padding-top: 13px;
}

    .modalBottom a {
        color: rgb(148,185,173);
    }

    .modalBottom a:hover {
        color: #000;
        text-decoration: underline;
    }

/* Contact Form Bottom */
.contactBottom {
    margin-top: 68px;
    border-top: 3px dashed rgb(148,185,173,0.15);
    width: 100%;
    padding-top: 13px;
}

    .contactBottom a {
        color: rgb(148,185,173);
    }

    .contactBottom a:hover {
        color: #000;
        text-decoration: underline;
    }

/* Mobile Mode */
@media (max-width: 600px) {
  body {
      font-size: 10pt;
  }

    #footer1 {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-100%);
        padding: 12px;
        color: rgb(148,185,173);
        border-right: 1px dashed rgb(148,185,173);
        text-align: right;
    }

    #footer2 {
        position: fixed;
        bottom: 20px;
        left: 50%;
        padding: 12px;
        color: rgb(148,185,173);
        text-align: left;
        padding-bottom: 20px;
    }

  #modalContent {
    width: 70%;
    margin: 10%;
  }

  #messageContent {
    width: 75%;
    margin: 10%;
  }

  button {
    width: 50%;
    font-size: 14pt;
    height: 40px;
    float: right;
    padding: 24px;
  }
}

  @media (orientation: landscape) and (max-height: 600px) {
    #modalContent {
      margin-top: 120vh;
      margin-bottom: 25vh;
      width: 80%;
    }

    #messageContent {
      margin-top: 20vh;
      margin-bottom: 20vh;
      width: 85%;
    }
    
    .container {
      padding-top: 5vh;
    }

    .container img {
      width: auto;
      height: 40vh;
    }
  }