html, body {
  overflow-x: hidden;

}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 100%;
    position: relative;
  }
  
  
  h1 {
    text-align: center;
    color: white;
    font-size: 75px;
  }

  .banner {
    
    width: 100%;
    padding: 7px;
  }

  #events-banner {
    background-image: url(images/fire-pit_Banner.jpg);
    background-size: cover;
    background-position: center;
    
  }

  #home-banner{
    background-image: url(images/home_banner.jpeg);
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
  }

  #calender-banner{
    background-image: url(images/calender.jpg);
    background-size: cover;
    background-position: center;
   
  }

  #sunday-banner{
    background-image: url(images/sunday.jpg);
    background-size: cover;
    background-position: center;
  
  }

  
  .topnav {
    overflow: hidden;
      min-width: 300px;
    background-color: white;
    
    width: 100%;
    position: fixed;
    z-index: 1000;
    
    /*border: 3px solid red;*/
  }
  


  #events:hover {
    background-color: rgb(219, 56, 11);
    /*background-color: rgb(248, 80, 58);8*/
    
    
  }
  #events-active {
    background-color: rgb(219, 56, 11);
    
  }

  #home:hover {
    background-color: rgb(255, 140, 0);
    /*background-color: rgb(248, 80, 58);8*/
    
  }
  #home-active {
     background-color: rgb(255, 140, 0);
    
  }

  #calender:hover {
    background-color: rgb(19, 185, 0);
  }

  #calender-active {
    background-color: rgb(19, 185, 0);
  }

  #sunday:hover {
    background-color: rgb(255, 255, 3);
    color:black;
  }
  #sunday-active {
    background-color: rgb(255, 255, 3);
    color:black;
  }
  



  .con {
  /*display: inline-block;*/
    float: left;
    position: relative;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
    font-size: 17px;
    width: 25%;
  
    /*outline: 3px solid rgb(119, 255, 0);*/
  }
  
  

  .topnav a {
   display: block;
    color: #f2f2f2;
   width: 80%;
   
    text-align: center;
    padding: 5px;
    text-decoration: none;
    font-size: 17px;
    background-color: #4f4f4f;
    border-radius: 30px;
   margin: 5%;
   transition: background-color 0.2s, color 0.2s;
   -webkit-transition: background-color 0.2s, color 0.2s;
   
   /*border: 3px solid rgb(0, 115, 255);*/
   
  }
  
  .place-holder {
    background-color: white;
    /*height: 90px;*/
    height: 5.5em;
  
    width: 100%;
  }

  @keyframes apr {
    from {opacity: 0;
          transform: translateY(50px);}
    to {opacity: 1;
        transform: translateY(0);}
  }

  .appear-head {
    animation-name: apr;
    animation-duration: 0.5s;
  }
  .appear-body{
    animation-name: apr;
    animation-duration: 0.5s;
    animation-delay: 0.1s;
    animation-fill-mode: backwards;
  }
  
  
  

  /*
  .topnav a:hover {
    background-color: #ddd;
    color: black;
    
  }


  .topnav a.active {
    background-color: #04AA6D;
    color: white;
   
  }
  */



  h2 {
    text-align: center;
    font-size: 50px;
  
  }
  p {
    margin-left: 20px;
    
    margin-right: 20px;
    font-size: 20px;
  }

  #about-img {
    border-radius: 50px;
    float: left;
    margin-left: 7%;
    margin-right: 7%;
    margin-top: 10px;
    margin-bottom: 20px;
    max-width: 86%;
    height: auto;
  }

  #map-img {

    max-width: 100%;
    height: auto;

    
  }



  #about-head {
    text-align: center;
    font-size: 60px;
    margin-bottom: 5px;
    margin-top: 0px;

  }

  #about-desc {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-top: 10px;
    padding: 10px;
    font-size: 25px;
  }


  .event-rule {
    width: 100%;
    border-bottom: 3px solid lightgray;
    margin: 0px;

  }








  .more-info {
    
    margin-top: 10px;
    clear: both;
    margin-left: 7%;
    margin-right: 7%;
   /* outline: 3px solid red;*/
  }


  .info-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   
   
    gap: 20px;
   
    /*background-color: lightpink;*/
    /* outline: 3px solid rgb(251, 0, 255);*/
  }

  .info-container {
  
    /*float: left;*/
    flex: 1 1 calc(50% - 20px);
    max-width: 700px; 
    text-align: center;



    /*border: 3px solid rgb(119, 255, 0);*/
   
  }

  .info-button {
    color: white;
    font-size: 30px;
    font-weight: bold;


   text-align: center;
    text-decoration: none;
   
    display: block;
    background-color: black;
    padding: 30px;
    border-radius: 10px;

    /*filter: saturate(0);*/
    /*border: 3px solid rgb(0, 115, 255);*/
    transition: filter 0.5s, scale 0.5s;

  }
  
  .info-button:hover {
    filter: brightness(120%);
    
    scale: 1.04;
  }

  .info-button:active {
     scale: 0.9;
  }

  .info-text{
    font-size: 30px;
    margin: 0px;
    z-index: 10;

  }
 
  .info-img {
    position: absolute;
    z-index: 1;
  }


 


  #events-info {
    background-image: url(images/fire-pit_Banner.jpg);
    background-size: cover;
    background-position: center;
     
  }


  
  #calender-info {
    background-image: url(images/calender.jpg);
    background-size: cover;
    background-position: center;
    

  }

  #sunday-info {
    background-image: url(images/sunday.jpg);
    background-size: cover;
    background-position: center;
  }

  #contact-info {
      
  }

 


  #logo {
    display: block;
    height: auto;
    max-width: 500px;

    margin-right: 20px;
    margin-left: 20px;
   
  }

  @media only screen and (max-width: 600px) {
    
      #logo {
        display: block;
        height: auto;
        max-width: 80%;
    
        margin-right: 20px;
        margin-left: 20px;
       
        
      
    }


  }

  #logo-container {

    display: flex;
    justify-content: center;
    align-items: center;
   
    margin-top: 40px;
    margin-bottom: 40px;
 
  }




  



  .next {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 100px;
    clear: both;
  }
  
  .event {
     border-bottom: 3px solid lightgray;
  }

  .event-name {
    text-align: center;
    font-size: 30px;
  }
  .event-date{
    text-align: center;
    color: rgb(175, 0, 0);
    font-size: 19px;
  }

  .cal-event {
    margin-bottom: 100px;
  }


  .info {

    margin-left: 8%;
  }

  
  #calender-div {
    aspect-ratio: 1/1;
    /*width: min(80vw, 80vh);*/
    width: 90%;
    max-width: 800px;
    margin: auto;
    /*border: 3px solid rgb(255, 0, 0);*/
    display: flex;
    align-items: center;
    justify-content: center;
  }

  table {
    aspect-ratio: 1/1;
    /*border: 3px solid rgb(20, 16, 255);*/
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  th {  
    width: 14.29%;
    font-size: 80%;

  }
  td {
    aspect-ratio: 1/1;
    width: calc(100% / 7);
    height: auto;
    /*border: 3px solid rgb(40, 255, 16);*/

  }
  

  .day {
    aspect-ratio: 1/1;
    width: 90%;
    height: auto;
    margin: auto;
    /*border: 3px solid rgb(215, 16, 255);*/

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;


    border-radius: 10px;
    /* border-radius: 10%;*/
    background-color: rgb(229, 229, 229);
    transition: filter 0.08s, scale 0.07s;
    -webkit-transition: filter 0.5s, scale 0.07s;
    filter: brightness(100%);

    overflow: hidden;
  }

  .day:hover {
    filter: brightness(107%);

  }

  .day:active {
    scale: 0.9;
    filter: brightness(107%);
  }

  .day-num {
    color: rgb(82, 82, 82);
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 80%;
  }

.day-icon {
  font-size:  1.5em;
  max-width: 20%;

  
}

.today  {
  border: 3px solid rgb(161, 207, 154);
   background-color: rgb(219, 237, 219);
 
}

.selected {
  outline: 3px solid rgb(29, 205, 2);
  background-color: rgb(207, 238, 207); 
 
}
    

#no-event {
  text-align: center;
  margin-bottom: 100px;

}



 #test {
  position: relative;
  max-width: 800px;
  margin: auto;
  /*border: 3px solid rgb(255, 0, 0);*/
  display: flex;
    align-items: center;
    justify-content: center;
  
 }

 
 .month-button {
  
  aspect-ratio: 1 / 1;
  background-color: lightgrey;
  border: none;
  text-decoration: none;
  border-radius: 50%;
  position: absolute;
  color: rgb(58, 58, 58);
  transition: transform 0.4s;

  padding-top: 3px;

 }



@keyframes button {
  0%   {transform: scale(1); filter: brightness(100%);}
  50%  {transform: scale(0.5); filter: brightness(110%);}
  100% {transform: scale(1); filter: brightness(100%);}
}



#left-button {
  left: 20px;
  
}

.press {
  animation-name: button;
  animation-duration: 1s;
}



#right-button {
  right: 20px;
}


 .month-button:hover {
  filter: brightness(110%);
 }
 
 .month-button:active {
  transform: scale(0.1);
 }

 
 #test22
 { display: flex;
  justify-content: space-between;}

  .more {
    color: rgb(0, 172, 0);
  }

  .overlap-icon {
    text-shadow: -2px 0px 2px rgba(67, 67, 67, 0.524);
  }