/* Styles */

.nav {
    height: 75px;
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically in the center */
    justify-content: space-evenly; /* Evenly space out items */
    background-color: black;
  }
  
  .nav a {
    color: white;
    text-decoration: none;
  }
  
  .eelogo img {
    height: 50px; /* Adjust logo size to match text height */
    vertical-align: middle; /* Align logo with links' vertical alignment */
  }

  .front-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    /* height: 25vw; 
    padding-bottom: 4em; */
}



body {
    background-color: white;
    margin: 0;
}

.background {
    background-color: white;
    width: 90%;
    margin: auto;
    padding-top: 3em;
    
}

.flag1 {
    height: 25px;
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    background-color: purple;
}
.flag2 {
    height: 25px;
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    background-color: black;
}

.separate {
    padding-bottom: 3em;
}


.about {
    margin: auto;
    border-radius: 0px;
    width: 50%;
    padding: 15px;
    
    box-shadow: 0px 25px 20px -20px rgba(0,0,0,0.45),
    -25px 0px 20px -20px rgba(0,0,0,0.45); 

}

.about h1 {
    text-align: center;
}

.about p {
    text-align: center;
}

.center-links {
    padding-top: 3em;
    text-align: center;
}


/* Parks Styles --------------------------------------------*/

.container .box {
    display: flex; /* Enables flexbox layout */
    justify-content: center;
  }
  
  .container .box-row {
    display: flex; /* Ensures the boxes align side by side */
    flex-direction: row; /* Horizontal alignment */
  }
  
  .container .box-row .box1, .container .box-row .box2 {
    flex: 1; /* Ensures equal width for both boxes */
    margin: 50px; /* Optional spacing between boxes */
  }
  


.box1, .box2 {
    margin: auto;
    border-radius: 25px;
    width: 500px;
    padding: 15px;
   /* box-shadow: 0px 25px 20px -20px rgba(0,0,0,0.45),
-25px 0px 20px -20px rgba(0,0,0,0.45); */
}

.box1 h1 {
    text-align: center;
}

.imgbox1 img {
    height: 300px;
    width: 450px;
}


a.new:link {
    color: black;
}
a.new:visited {
    color: black;
}

/* styles the link on being hovered */
a.new:hover {
    color: blue;
    text-decoration: none;
}


/* styles the link while clicked */
a.new:active {
    color: blue;
}


/* Article Styles --------------------------------------- */

.articleimg img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.articlesecondimg img {
    max-width: 75%;
    max-height: 75%;
    display: block;
    padding-bottom: 2em;
}

.articleabout {
    margin: auto;
    border-radius: 25px;
    width: 55%;
    padding: 15px;
    box-shadow: 0px 25px 20px -20px rgba(0,0,0,0.45),
-25px 0px 20px -20px rgba(0,0,0,0.45);
}

.articlebackground {
    background-color: white;
    width: 98%;
    margin: auto;
    padding-top: 3em;
}

/* Article2 Styles --------------------------------------- */

.articleimg2 img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.articleabout2 {
    border-radius: 25px;
    width: 55%;
    padding: 15px;
    box-shadow: 0px 25px 20px -20px rgba(0,0,0,0.45),
-25px 0px 20px -20px rgba(0,0,0,0.45);
}

.articlebackground2 {
    background-color: white;
    width: 98%;
    padding-left: 10em;
    padding-top: 3em;
}

/* Article2 Photo slide Styles --------------------------------------- */

.container2 {

    padding-top: 3em;
}
.container2 .boxed {
    display: flex; /* Enables flexbox layout */
    justify-content: center;
  }
  
  .container2 .b-row {
    display: flex; /* Ensures the boxes align side by side */
    flex-direction: row; /* Horizontal alignment */
  }
  
  .container2 .b-row .pic1, .container2 .b-row .pic2 {
    flex: 1; /* Ensures equal width for both boxes */
    margin: 30px; /* Optional spacing between boxes */
  }
  


.pic1, .pic2 {
    margin: auto;
    border-radius: 0px;
    width: 600px;
    padding: 15px;
   box-shadow: 0px 25px 20px -20px rgba(0,0,0,0.45),
-25px 0px 20px -20px rgba(0,0,0,0.45); 
}

.pic1 h1 {
    text-align: center;
}

.picbox img {
    height: 400px;
    width: 550px;
}


/* Music Two boxes Styles --------------------------------------- */

.twocontainer .twobox {
    display: flex; /* Enables flexbox layout */
    justify-content: center;
  }
  
  .twocontainer .twobox-row {
    display: flex; /* Ensures the boxes align side by side */
    flex-direction: row; /* Horizontal alignment */
  }
  
  .twocontainer .twobox-row .twobox1, .twocontainer .twobox-row .twobox2 {
    flex: 1; /* Ensures equal width for both boxes */
    margin: 10px; /* Optional spacing between boxes */
  }
  


.twobox1, .twobox2 {
   /* margin: auto;
    border-radius: 25px;
    width: 500px;
    padding: 15px;
    box-shadow: 0px 25px 20px -20px rgba(0,0,0,0.45),
-25px 0px 20px -20px rgba(0,0,0,0.45); */
}

.twobox1 h1 {
    text-align: center;
}

.twoimgbox1 video {
    height: 400px;
    width: 600px;
    
}

.twoimgbox1 img {
    height: 400px;
    width: 600px;
    
}


/* Music Three boxes Styles --------------------------------------- */

.threecontainer .threebox {
    display: flex; /* Enables flexbox layout */
    justify-content: center;
  }
  
  .threecontainer .threebox-row {
    display: flex; /* Ensures the boxes align side by side */
    flex-direction: row; /* Horizontal alignment */
  }
  
  .threecontainer .threebox-row .threebox1, .threecontainer .threebox-row .threebox2 {
    flex: 1; /* Ensures equal width for both boxes */
    margin: 20px; /* Optional spacing between boxes */
  }
  


.threebox1, .threebox2 {
  /*  margin: auto;
    border-radius: 25px;
    width: 300px;
    padding: 15px;
    box-shadow: 0px 25px 20px -20px rgba(0,0,0,0.45),
-25px 0px 20px -20px rgba(0,0,0,0.45); */
}

.threebox1 h1 {
    text-align: center;
}

.threeimgbox1 video {
    height: 230px;
    width: 380px;
}

.threeimgbox1 img {
    height: 230px;
    width: 380px;
}



/* Music 2 Styles --------------------------------------- */

 /* Remove bullets and reset padding/margin */
  #playlist {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  /* Style each song entry */
  #playlist li {
    margin: 10px 0;   /* space between songs */
    padding: 5px;     /* optional padding inside */
    cursor: pointer;
  }

  /* Highlight on hover */
  #playlist li:hover {
    background-color: #f0f0f0;
  }