/*** VSCodeEDU preview fix 

  Purpose:
  - Fix VSCodeEDU issue that causes a white border to show around
    the preview window

  When To Modify:
  - If you change the background color of your webpage, you may need to update this rule too.
***/
html {
    background-color: var(--bg-color);
}


/*** body ***
  
  Purpose:
  - Add style rules for the body of your webpage
  - This is useful if you want a rule to apply to EVERYTHING on your page
    - (Tip: You can always override these rules later in the stylesheet)

  When To Modify:
  - [ ] Project 3 (REQUIRED FEATURE) 
  - [ ] Any time after
***/

body {
    /* Add a background color or image */
    background-color: var(--bg-color); /* see bottom of file for color variables */

    /* Customize the default size, color, and font for text*/
    font-size: 16px;
    color: var(--text-color);
    font-family: var(--font); 
    line-height: 1.6;

    /* Put space around the edges of the webpage */
    margin: 50px;
}

/*** Text ***
  
  Purpose: 
  - Add style rules for headings (h1-6),
    paragraphs (p), links (a), and buttons

  When To Modify:
  - [X] Project 3 (REQUIRED FEATURE) 
  - [ ] Any time after
***/
.header-container {
  display: flex;           /* use flexbox layout */
  align-items: center;     /* vertically center items */
  gap: 20px;               /* space between logo and text */
  padding: 12px;
}

/*#header-img{
  width: 300px; 
  height:300px;
  max-width: 300px;
  max-height:300px;

  
}
*/

#header-img {
  width: 300px;
  height: 300px;
  max-width: 300px;
  max-height: 300px;

  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform: perspective(800px) rotateX(5deg) rotateY(-5deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

#header-img:hover {
  transform: perspective(800px) scale(1.1) rotateX(15deg) rotateY(-15deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  z-index: 10;
}




.header-text h1 {
    font-family: 'Quicksand',sans-serif;
    font-size: 80px;
    color: #ff8ca5; 
    text-align: left;
    margin: 0;
    line-height:1.1;
    margin-bottom:0;
    display: flex;
    flex-direction: column;
}

.button-group{
   display: flex;
   gap: 15px; /* space between buttons */
  margin-top: 15px;
  cursor:pointer;
}



.header-text #tagline {
  margin: 0;
  margin-top:0;
  line-height: 1.5;
  font-size: 5px;
  font-style: italic;
  color: #666;
}

#eventSchedule{
  text-align:center;
}

.pictures{
    width:200px;
    height:200px;
    border: white 5px solid;
    border-radius: 10px;
    box-shadow:0 4px 8px grey;
    
}
            

button {
    background-color: #ffb6c1;
    color: white;
    border: #d3d3d3 solid 1px;
    border-radius: 8px;
    padding: 10px 20px;           
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    transition: background-color 0.3s ease;            /* makes the cursor change when over button */
}

button:hover {
    background-color: #ff99ad;
    cursor:pointer;
}

button:active {
    transform: scale(0.95);
}

/*** header ***
  
  Purpose:
  - Add style rules for your website's header section

  When To Modify:
  - [X] Project 3 (REQUIRED FEATURE) 
  - [ ] Project 4 (REQUIRED FEATURE) 
  - [ ] Any time after
***/

.header { /* Example A: This styles elements with class="header" */
    
}

/*** footer ***
  
  Purpose:
  - Add style rules for your website's footer section

  When To Modify:
  - [ ] Project 3 (STRETCH FEATURE) 
  - [ ] Any time after
***/
.footer { 
    position:fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color:#f8bbd0 ;
    padding-bottom: 10px;
    font-size:12px;
    line-height:0;
    display:flex;
    gap:3px;
}

.footer-links {
  margin-right: 15px;  /* space between links */
  text-decoration: none;
  display:flex;
  gap:5px;
  font-weight: normal;
  color:#333333;

}

a {
  margin:0;
}
a:link {
  color:#616161;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-color-dark);    /* Brighter purple on hover */
  text-decoration: underline;         /* Optional: underline only on hover */
  cursor: pointer;
}

a:active {
  color: palevioletred;
  transform: scale(0.98);             /* Slight shrink effect */
}



/*** Navigation bar (navbar) ***
  
  Purpose:
  - Add style rules for your website's navbar

  When To Modify:
  - [ ] Project 4 (REQUIRED FEATURE) 
  - [ ] Any time after
***/


.navbar ul {
    z-index: 1000; /* Ensures the navbar is on top of other elements */
    list-style-type: none;
    overflow:hidden;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background-color: #dcdcdc;
    margin-bottom:100px;
    margin:0;
    border-bottom: #d3d3d3 solid;

}

.navbar ul li {
    float: left;
    margin: 10px;

}

.navbar ul li a {
    display: block;
    text-decoration: none;
    color:#ff8ca5;
    padding-right:50px;
    text-align:center;
}

.navbar ul li a:hover {
    text-decoration: underline;
    color: grey;
}






/*** About Section ***
  
  Purpose:
  - Add style rules for your website's About section

  When To Modify:
  - [ ] Project 3 (OPTIONAL)
  - [ ] Project 4 (STRETCH FEATURE) 
  - [ ] Any time after
***/


/*** Schedule Section ***
  
  Purpose:
  - Add style rules for your website's Schedule section

  When To Modify:
  - [ ] Project 3 (OPTIONAL)
  - [ ] Project 4 (STRETCH FEATURE) 
  - [ ] Any time after
***/
.schedule-container {
  display: flex;
  justify-content: space-evenly; 
  gap: 10px;                      
  margin-top: 20px;
  flex-direction: row;
  flex-wrap: wrap;                
}

.schedule-item:nth-of-type(1) {
  min-width: 250px;             /* helps wrap nicely on small screens */
  max-width: 300px;
  text-align: center;
  background-color: #dcdcdc;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.schedule-item:nth-of-type(2) {
  min-width: 250px;             /* helps wrap nicely on small screens */
  max-width: 300px;
  text-align: center;
  background-color: #dcdcdc;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.schedule-item:nth-of-type(3) {
  min-width: 250px;             /* helps wrap nicely on small screens */
  max-width: 300px;
  text-align: center;
  background-color: #dcdcdc;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


/*** Links Section ***
  
  Purpose:
  - Add style rules for your website's Links section

  When To Modify:
  - [ ] Project 3 (OPTIONAL)
  - [ ] Project 4 (STRETCH FEATURE) 
  - [ ] Any time after
***/



/*** RSVP Section ***
  
  Purpose:
  - Add style rules for your website's RSVP form

  When To Modify:
  - [ ] Project 6 (REQUIRED FEATURE)
  - [ ] Project 7 (REQUIRED FEATURE)
  - [ ] Any time after
***/

.rsvp-container {
  display:flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
  padding-bottom: 50px;
}

.rsvp-para{
  width:55%;
  padding-right:10px;
}

.rsvp-participants{
  width:45%;
  padding-right:10px;
}

.form-container{
  display:flex;
  flex-direction: row;
  /**justify-content: space-between;**/
  gap:5px;
}

#rsvp-button{
font-size: 14px;        /* Make the text smaller */
padding: 5px 10px; 
}
/* Add other rsvp-related selectors here */
.error {
  border-style: solid;
  border-width: 2px;
  border-color:red;
  background-color: pink;
  

  /* Set border-color and background */
}



/*** Animations [PLACEHOLDER] [ADDED IN UNIT 8] ***/
/*** Success Modal [PLACEHOLDER] [ADDED IN UNIT 9] ***/
/*** Success Modal  ***
  
  Purpose:
  - Add style rules to your website's pop-up modal, which appears
    when a user successfully submits the RSVP form

  When To Modify:
  - [ ] Project 9 (REQUIRED FEATURE)
  - [ ] Any time after
***/

.modal {
  display: none;   /* modal should be hidden by default*/
  position: fixed; /* modal cannot move around the screen */
  z-index: 2;      /* modal appears above other elements */ 
  
  /* TODO: Make the modal fill the entire screen */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  /* Add a semi-transparent background to shadow non-modal elements*/
  background-color: rgba(0,0,0,0.4); /* 40% opacity black */

  /* Flexbox settings for modal */
  /* These won't apply until we update "display:" from "hidden" to "flex" in our JS */
  flex-direction: column; 
  align-items: center;
  justify-content: center;
}

.modal-container {
    /* Change modal size and spacing here */
    padding: 20px;
    width: 55%;

    /* Customize modal style here */
    background-color:#dcdcdc;
    color: #ff8ca5;
    border-radius:15px;
    text-align: center;
    font-size: 1rem;
    font-family: monospace;
    

    /* Optional: Use flexbox to customize .modal-item layout */
    display: flex;
    justify-content:space-evenly;


}

#modal-text {
  white-space: pre-line;
}

.modal-item {
    border-radius: 50%;
    border-color: black;
}



/*** Dark Mode [PLACEHOLDER] [ADDED IN UNIT 5] ***/
/* Default dark mode style */

#theme-button{
  color: white;
  font-size: 10px;
  background-color: #ffb6c1;
  border: #ff038f solid 2px;
  padding: 5px 5px; 
}

body.dark-mode {
  background-color: #121212;
  margin:0px;

  color: #F5F5F5;
  font-family: 'Segoe UI', sans-serif;
  padding:50px;
   

}

.dark-mode button {
  background-color:#e75480;
  color: #121212;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease; 
}

body.dark-mode .navbar ul {
  background-color: #1E1E1E;
  border-bottom: 1px solid #2C2C2C;
}

body.dark-mode .navbar ul li a {
  color: #FFA6C9;
}

body.dark-mode .schedule-item {
  background-color: #1E1E1E;
  
}



/* Example: Different dark mode style for visited links */
.dark-mode a:visited * {

}

/*** Custom Colors (OPTIONAL) ***
  
  Purpose:
  - Use CSS variables to define custom colors for your website
  - To get you started, we've provided the color scheme used in our example site.
  - To reference a color variable in your css, use var(--variable-name) in place of a color value

  When To Modify:
  - [ ] Any time (OPTIONAL)
***/

:root {
    /* Light Mode */
    --bg-color: #f5f5f5;
    --text-color: #333333;
    --font: 'Nunito', sans-serif;

    /* Dark Mode */
    --bg-color-dark-mode: #3e3377;
    --text-color-dark-mode: #fff;

    /* Accent Colors */
    --accent-color-light: #d2cff5;
    --accent-color-medium: #684fb5;
    --accent-color-dark: #482f95;
    --accent-color-darkest: #231942;
    --accent-color-green: #28eb76;

    /* Error Colors */
    --error-color: #f8bbd0;
    --error-color-border: #e63946;

}

body.dark-mode {
  --bg-color: #121212;
  --text-color: #F5F5F5;
}

section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}