:root{
    --primary-color:#093042;
    --second-color:#c9dae1;
    --third-color:#495f9c;
    --fourth-color:rgba(230, 230, 230, 0.918);
}
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    font-family: 'Raleway', sans-serif;
    line-height:1.5em;
}
.button{
    margin:10px;
    padding:10px;
    background-color: white;
    box-shadow: 0 0 20px rgb(187, 180, 177);
    color: var(--primary-color);
    font-size:16px;
    border-radius: 5px;
    border:none;
    /* width: 80px;
    height: 40px; */
}

.logo img{ 
    order: 1;
    width: 8em;
    height: auto;
    margin-left: 10px;
}
nav { 
    max-width: 700px;
    margin:1rem auto;
}
#menu {
    display:block;
    font-size:2rem;
    background-color: white;
    position:absolute;
    top:3rem;
    right:1rem;
    color: var(--primary-color);
}
#menu::before{
    content:"☰";
}
#menu.open::before{
    content:"☓";
}
.navigation{
    display:flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--primary-color); 
    color:white; 
}
.navigation a{
    display: none;
    padding: 10px;
    text-align:center;
    color: var(--second-color);
}
.navigation a:hover, .navigation a:active{
    background-color:var(--second-color);
    color:var(--primary-color);
}
.open a{
    display: block;
}
.hero-section{
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content:center;
    gap:40px;  
}
.hero-section img{
    width: 400px;
    height: 250px;
}
div .hero-text{
    background-color: rgba(255, 255, 255, 0.574);
    position: absolute;
    border-radius:5px;
    
}
.hero-text{  
    padding:10px;
}
.hero-text p {
    padding: 20px 0 20px;
    font-size: 16px;
    font-weight: 500;
}
.button:hover{
    background-color:var(--primary-color);
    color:white;
    font-weight: bold;
}

.more-title h2{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    background-color: var(--second-color);
    font-size:30px;
}
.more{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height:35em;
    background-color: var(--second-color);
    border-bottom:1px solid white;
}
img.icons {
    display: flex; 
    width: 6em;
    height: auto;
    padding: 20px;
}
section.more h3{
    text-align: center;
    color:var(--primary-color);
}
img.icons:hover{
    width:9em;
    height: auto;
}
.mission {
    display:flex;
    flex-direction: column;
    padding: 30px;
    border:1px solid var(--second-color);
}
.mission img{
    width: 30em;
    height:auto;
    justify-content: center;
    padding: 20px;
    width: 333px;
    height: auto;
}
.statement h2, .statement p{
    padding: 20px;
    flex-wrap: wrap;
   
}

/* middle section  */
.mid-section{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* margin:20px 20px; */
    background-image: linear-gradient(#c9dae1c6, white);
   
}
.weather{
    width: 60em;
    height: auto;
    margin:20px;
    overflow: hidden;
    background-color: var(--primary-color);
    color: white;
    padding: 20px;
    border-radius: 5px;
    
}
.weather img{
   float:left;
    width:140px;
    height: auto;
}
p.temp{
    font-size: 35px;
    font-weight:500;
}
div.home-weather1{
    padding-bottom: 20px;
}
div.home-weather2  h2{
    padding: 10px;
}
div.square{
    background-color: rgba(255, 255, 255, 0.225);
    padding:10px 5px 10px;
    margin:6px;
    border-radius: 6px;
   
}
section#forecast{
    text-align: center;
    display: flex;
    justify-content: center;
    
}
img.weather-icon{
    width: 50%;
   padding: 30px 30px 0;
  
}

.event{
    width: 40em;
    margin:20px;
    overflow: hidden;
    background-color: var(--primary-color);
    color: white;
    padding: 20px;
    border-radius: 5px;
}
div.news-title h2{
    display: flex;
    justify-content: center;
    margin:30px 0 0 30px;
    font-size: 30px;
}
.card{
    width: 325px;
    overflow: hidden;
    box-shadow: 0 0 20px rgb(187, 180, 177);
    border-radius: 5px;
    margin: 20px;  
}
.news{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top:100px;
    
}
.title h1{
    display:flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px; 
}
section.news{
    margin:20px;
}

.card img{
    width: 100%;
    height: auto;
}
.card-content{
    padding: 16px;
}
.card-content h2{
    color:var(--third-color);
}
.card-content .btn{
    display: inline-block;
    padding: 8px 16px;
    margin-top: 16px;
    color: var(--primary-color);
    font-weight: 500;
    border-radius: 5px;
}
.btn:hover{
    background-color:var(--second-color);
    color:var(--primary-color);
    font-weight: bold;
}
footer{
    background-color: var(--fourth-color);   
    height: 8em;
}
footer p{
    
    padding: 6px;
    display: flex;
    justify-content: center;
}
#lastModified{
    color: var(--primary-color);
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 10px;
}

.spotlightCard{
    display: flex;
    flex-direction: column;
    justify-content:center;
    margin-left:20px;
}
h2.title-business{
display: flex;
justify-content: center;
margin:30px 0 0 30px;
font-size: 30px;
}

.spotlightCard img{
    width:50%;
    padding:10px;
}
.spotlightCard h4, p, a{
    padding:8px;
}
/* dark mode */
#mode {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 50px;
    text-align: center;
	cursor: pointer;
	font-size: 10px;
    margin-right: 10px;
}
.dark-mode {
	background-color: #000;
	color: #fff;
    
}

/* discovery page styling */
.grid-area{
    display: flex;
    flex-direction: column;
}
.sidebar{
    background-color:rgb(109, 145, 201);
}
.details{
    box-shadow: 0 0 20px rgb(128, 129, 134);
    border-radius: 5px;
    margin:30px;
    padding:20px;

}
.grid-area h1{
    margin-left: 30px;
    border-bottom: 1px solid var(--second-color);
}
.main{
    background-color: var(--second-color);
    display: flex;
    flex-direction: column;
    padding:36px;
}
section.main img{
   width:20em; 
   height: auto;
   padding-top: 20px;
}
@keyframes fade {  
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* join page  */
h1.header{
    margin-left:40px;
    border-bottom: 1px solid var(--second-color);
}
.grid-form{
    display: flex;
    flex-direction: column-reverse;
    /* display: grid;
    grid-template-columns: 650px 800px; */
}
fieldset{
    width: 300px;
}
.member-form{
    display: grid;
    grid-template-columns: 400px;
    margin-left: 10px;
    padding: 20px;
     
}
.member-desc{
    margin-right: 40px;
}

/* form styling */
.mform fieldset{
    margin: 2rem 0;
    border: 1px solid var(--second-color);
    border-radius: 6px;
    padding:.5rem 2%;
}
.mform legend{
    color:var(--third-color);
    padding: 0 .5rem;
    font-weight: bold;
}
.mform label{
    display: block;
    padding-top: 1rem;
    color:var(--primary-color);
    font-size: .9rem;
}

.mform input[type="text"],
.mform input[type="tel"],
.mform input[type="email"]
{
    background-color: var(--second-color);
    display:block;
    border:solid 1px var(--second-color);
    border-radius: 6px;
    padding: .75rem;
    color:#556065;
    width:100%;
    max-width: 270px;
    appearance:none;
}
.mform input[type="radio"]{
    margin-right:6px;
}

#gold{
    background-image:linear-gradient(to right, rgba(254, 249, 218, 0.7), rgba(241, 191, 29, 0.7));
}
#silver{
    background-image:linear-gradient(to right, rgba(203, 209, 216, 0.7), rgba(150, 150, 152, 0.7));
}
#bronze{
    background-image:linear-gradient(to right, rgba(225, 206, 180, 0.7), rgba(202, 130, 59, 0.7));
}
#np{
    background-image:linear-gradient(to right,rgba(191, 220, 169, 0.7), rgba(77, 116, 47, 0.7));
}
.gesture img{
    margin-bottom: 20px;
    width: 90px;
    height: auto;
}
div.thanks{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    margin: 40px;
}

/* directory style */
main.directory {
    margin: 0 auto;
    padding: 0.5rem;
    max-width: 700px;   
} 
h1.directory-title{
    margin-left: 30px;
    border-bottom: 1px solid var(--second-color);
}
.menu{
    margin: 3rem auto;
    text-align: center;
}
.cardview img{ 
width:40%;
height: auto;
align-items: center;
}
.cardview {
    display:flex;
    flex-direction: column;
}
.cardview div{
    background-color:white;
    box-shadow: 0 0 20px rgb(212, 205, 203);
    padding:10px;
    align-items: center;
    text-align: center;
    margin:10px;
}
.listview{
    display:none;
}
.list{
    display: flex;
    flex-direction: column;
}
.list section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding:0.25rem;
}
.list section >*{
    margin:0 1rem;
}
.list section img{
    display: none;
}
.list section h3{
    font-size: 1rem;
}
.list section:nth-child(even){
    background-color: var(--second-color);
}
.banner{
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width:100%;
    background-color:rgba(65, 52, 122, 0.883);
    color:white;
    font-weight:500;
    text-align: center;
    padding:10px 70px 10px 0;
}