@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');
@import url('https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@400;500;600;700&display=swap');


@font-face {
    font-family: "KomikaTitle";
    src: url("Fonts/KomikaTitle-aDJ.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


* {
    box-sizing: border-box;
    font-family: Raleway;
    color: #777;
}





html, body {
    margin: 0;
    padding: 0;
    background-color:bisque;
}

.nav ul {
    margin: 0;
}

.nav li {

    display: inline;
}

.nav a {
    display: inline-block; /* allows for padding, unlike reg. inline  */
    padding: .5em;
    color: white;
    text-decoration: none;
    
}

.main-nav {
    text-align: center;
    font-size: 1.1em;
    font-weight: lighter;
    
    border-bottom: 3px solid rgba(255,255,255,.3);
    border-top: 3px solid rgba(255,255,255,.3);
    
    /*New Stuff*/
    position:fixed;
    z-index:1;
    width:100%;
    background: repeating-linear-gradient(45deg, rgba(255, 0, 0), rgba(255, 165, 0));
    /*New Stuff*/
}

/*new stuff*/
.nav-wrapper{
    height:30px;
    
}
/*new stuff*/
.main-nav li{
    padding: 0 5%;
    
}

.nav a:hover { /* hover for when mouse is over link  */
    background-color: rgba(255,255,255, .3);
    
}




.main-header {
    background-color: rgba(0,0,0,.2);
    background-image: repeating-linear-gradient(45deg, red, orange);
    background-blend-mode: multiply;
    padding-bottom: 30px;
    text-align:center;
}



.chapter-name {
    text-align:center;
    margin: 0;
    font-size: 9vw;
    font-family: "KomikaTitle";
    font-weight: normal;
    color: white;
}


.chapter-name-large {
    font-size: 8vw;
}

.content-section {
    margin: 1em;
}

.container p,h2 {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5em;
    text-align: center;
}

section p{
    font-size:2vw;
}

.container img {
    max-width:300px;
    margin: 0 auto;
}

.section-header {
    font-family: "Palanquin Dark";
    font-weight: normal;
    text-align: center;
    font-size: 4vw;
}


.logo-img {
    display:flex;
    justify-content:center;
    align-items:center;
    height: 20vw;
    border-radius: 50%;
    
}

.main-footer {
    background-color: rgba(0,0,0,.2);
    background-image: repeating-linear-gradient(45deg, red, orange);
    background-blend-mode: multiply;
    padding: .25em 0;
}


.main-footer-container {
    display: flex;
    align-items:center;
}

.main-footer-container ul {
    flex-grow:1;
    text-align:end;
}

.footer-nav li{
    padding: 0 .5em;
}

.footer-nav img {
    width: 4vw;
    height:4vw;
}


.small-chapter-name{
    font-size:3vw;
    margin-left:.5em;
}


iframe {
    display:block;
    margin: 0 auto;
}

.green-button {
    color: white;
    border-radius: 5px;
    background: repeating-linear-gradient(45deg, green, lime);
    
    display: inline-block;    
    height:3vw;
    font-size:1.5vw;
    font-weight:bold;
    cursor:pointer;

}

.green-button a {
    color:white;
    text-decoration:none;
}

.event-button {
    border-radius: 5px;
    background: repeating-linear-gradient(45deg, red, orange);
    
    display: inline-block;    
    height:3vw;
    font-size:1.5vw;
    font-weight:bold;
    cursor:pointer;
}


.event-button a {
    color:white;
    text-decoration:none;
}


.event-row {
    border-bottom: 1px solid black;
    padding-bottom: 1em;
    margin-bottom: 1em;
    font-size:2vw;
    display:flex;
    justify-content: center;
}

.event-row:last-child{
    border-bottom: none;
}


.event-item {
    display: inline-block;
    padding-right:.5em;
    

}


.map {
    height:50vw;
    width:50vw;
}


.leadership{

    
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
    

}

.leader{
    padding:1.5em;
    text-align:center;
    box-shadow: 0 0.5vw 1vw rgba(0,0,0,.2);
    background-color: #f5f5f5;
    width:40vw;
    font-size:3vw;

}

section img{
    height:auto;
    
    width:250px;
    height:auto;
    border-style:solid;
    border-color:black;
    
    
}


.dropbtn {
    background: none;
    color: white;
    
    
    height:30px;
    font-size:20px;;
    font-weight:bold;
    border:none;
    cursor:pointer;
    
    
    
    
}




.nav .dropbtn:hover, .dropbtn:focus { /* hover for when mouse is over link  */
    background-color: rgba(255,255,255, .3);

    
}

.dropdown{
    position: relative;
    display: inline-block;
}

.dropdown-content{
    
    position:fixed;
    top:50;
    left:0;
    width:100%;
    height:auto;
    
    box-sizing:border-box;
    display:none;
    
    background: repeating-linear-gradient(45deg, rgba(255, 0, 0), rgba(255, 165, 0));
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
}

.drop-row:first-child{
    border-top: 3px solid rgba(255,255,255,.3);
    
}

.dropdown-content a {
    color: white;
    font-weight:bold;
    padding: 12px 16px;
    text-decoration:none;
    display: block;
    
    
}

.dropdown-content a:hover {
    background-color: rgba(255,255,255, .3);
}

.show {display:block;}

.drop-row {
    border-bottom: 1px solid white;
    margin:0 auto;
    width:70%;
}

.drop-row:last-child {
    
    border-bottom: 3px solid rgba(255,255,255,.3);
}




/*Mobile Optimization!*/

@media (max-width: 768px){
    header {
        font-size: 4vw; 
    }
    .chapter-name-large {
        font-size: 12vw; /*12*/
    }
    .small-chapter-name{
        font-size:7vw; /*7*/
    }
    .leader-img{
        width:130px !important; /*3*/
        height:auto !important;
        transform-origin: center;
    }

    .footer-img{
        transform: scale(1.3); /*3*/
        
        transform-origin: center;
    }



     .event-row {
        font-size:4vw; /*4*/
        
    }
    footer{
        font-size:5vw; /*5*/
    }

    .section-header{
        font-size:7vw; /*7*/
    }

    .event-button{
        font-size:4vw; /*4*/
        height: 8vw;


    }
    .green-button{
        font-size:4vw;
        height: 8vw;

    }
    .map-container{
        position: relative;
        width:100%;
        padding-top: 15%;
        padding-bottom: 15%;
    }
    p {
        margin:2vw;
    }

    .information{
        font-size:4vw;
    }

    .afeet{
        font-size:3.5vw ;
    }

    /*new stuff*/
.nav-wrapper{
    height:100px;
}
/*new stuff*/




}