/* Mobile First View  */

 h2 {
    display: none;
 }

 h3 {
    color: #990000;
 }

    aside {
        background-color: transparent;
        color: #990000;
        padding: 5px 45px;
        width: 100%;
        align-content: stretch;
     }

 li::marker {
    color: #990000;
  }

 aside a {
    color: #990000;
    display: block;
    padding: 5px 0;
    text-decoration: none;
    width: 100%;
}

aside a:hover {
    background-color: #990000;
    color: #ffffff;
    padding: 2%;

}
aside a:focus {
    background-color: #fef1dc;
    color: #990000;
    padding: 5%;
    outline: none;

}

#portrait {
  width: 100%;
  max-width: 512px; /* your preferred max size */
  height: auto;
  display: block;
  margin: 0 auto; /* centers the image */
}


#main_image {
    width: 100%;
}

article {
    background-color: transparent;
    color: #990000;
    font-size: 10px;     /* not 10% */
    padding: 20px 30px;  /* balanced padding */
  }



article a {
    color: #fef1dc;
    padding: 5px;
    text-decoration: none;
}

article a:hover {
background-color: #fef1dc;
color: #990000;
}

article a:focus {
    background-color: #fef1dc;
    color: #990000;
    text-decoration: none;
    }



    

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
main {
    display: flex;
}


aside {
    display: flex;
    flex-direction: column;
    float: left;
    justify-content: flex-start;  /* top of container */
    align-items: flex-start;      /* align text to the left */
    width: 30%;
}



/* option if you want the aside text to sit in the muddle of fthe page

aside {
    align-items: center;
    display: flex;
    flex-direction: column;
    float: left;
    justify-content: center;
    width: 30%;
}

*/

main {
    display: flex;
    justify-content: center; /* centers the section/article horizontally */
    align-items: center;      /* keeps aside content vertically centered */
    padding: 60px 0 40px 0;  /* adds top + bottom space under header and above footer */
    gap: 20px;                /* space between aside and article */
  }
  
  aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* centers image/text inside the aside */
    width: 50%;
  }
  
  article {
    background-color: transparent;
    color: #990000;
    font-size: 10%;
    padding: 20px 65px;
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
    border-radius: 20px;
  }

  
section {
    display: inline;
    float: right;
    width: 70%;
}
}

form {
    background-color: transparent;
    color: #990000;
    font-family: sans-serif;
    border-radius: 0px 0px;
    margin: 10px auto;
    padding: 1px;
    width: 70%;
    font-size: 9px;
    
}


/* Form CSS BELOW*/

input, select, textarea {
  border: 1px solid #ccc;
  border-radius: 1px;
  margin: 5px 0;
  padding: 5px;
  width: 100%;
  color: grey;
  font-family: sans-serif;
  font-size: 9px;
  outline: none;
  font-style: none; /* this makes the text italic */
  background-color: rgb(255, 255, 255); /* optional: to match input background */
}


textarea {
    border: 1px solid #ccc;
    border-radius: 1px;
    margin: 5px 0;
    height: 50px;           /* increase height */
    padding: 8px;      /* smaller padding */
    width: 100%;
    color: grey;
    font-family: sans-serif;
    font-size: 9px;
    outline: none;
    font-style: none; /* optional: change to make input text italic */
    resize: vertical;        /* optional: lets user resize vertically only */
  }

  /* Prevent mobile browsers from zooming the form on focus */
input:focus,
textarea:focus {
  font-size: 9px;
}

input, textarea {
  font-size: 9px;   /* your preferred size */
  -webkit-text-size-adjust: 100%; /* reduces auto-zoom behavior */
}

  /* Base dropdown style  will add later 
select {
    border: 1px solid #ccc;
    border-radius: 1px;
    margin: 5px 0;
    padding: 5px;
    width: 100%;
    color: #990000;
    font-family: sans-serif;
    font-size: 8px;
    outline: none;
    font-style: italic;
    background-color: lightgray;
  } */
  
  /* Style for the disabled placeholder option  - add later
  select option[disabled] {
    color: #888;
    background-color: #888;
  } */


  button {
    background-color: #990000;
    border: none;
    border-radius: 0px;
    color: rgb(255, 253, 250);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    cursor: pointer;
    font-style: normal;
    font-weight: bold;
    margin: 5px 0px;   /* adds horizontal gap between buttons */
    padding: 5px 10px;
    width: auto;        /* prevents overly small buttons */
    display: inline-block;
  }

button:focus,
button:hover {
    color: #990000;
    

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

     form {
        width: 70%;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    form {
        width: 50%;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    form {
        width: 40%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

    form {
        width: 40%;
    }
}


  aside img {
    display: block;
    margin: 0 auto;
  }
  aside {
    display: flex;
    justify-content: center; /* horizontal */
    align-items: center;     /* vertical */
    flex-direction: column;  /* keeps text below/above the image if needed */
    text-align: center;
  }


  #countdown {
    font-family: sans-serif;
    font-size: 10px;
    color: #990000;
    background: none;
    text-align: center;
    font-weight: normal;
    margin: 10px auto;
    letter-spacing: 1px;
    animation: softbeat 4s ease-in-out infinite;
  }
  
  
  /* Smooth, gentle pulse */
  @keyframes softbeat {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    40% {
      transform: scale(1.03);
      opacity: 0.96;
    }
    60% {
      transform: scale(1.05);
      opacity: 0.94;
    }
  }
 
  #portrait {
    display: block;
    margin: 0 auto; /* centers the image */
    animation: softbeat 4s ease-in-out infinite;
  }
  
  @keyframes softbeat {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    40% {
      transform: scale(1.03);
      opacity: 0.96;
    }
    60% {
      transform: scale(1.05);
      opacity: 0.94;
    }
  }
  #successMessage {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(255, 253, 250);
    color: #990000;
    padding: 10px 20px;
    border: 1px solid #990000;
    border-radius: 5px;
    font-family: sans-serif;
    font-size: 10px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.4s ease;
  }