@import url('cssReset.css');
#HomeBody{
    background-image: url(Images/BGImage.jpg);
    background-size: cover;
}
#ContactBody{
    background-image: url(Images/BGImage.jpg);
    background-size: cover;
    height:100vh;
}
#NavBar {
    background-color: #9a1eb9;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 10px;
}
#NavBar img {
    height: 80px;
    margin-right: 20px;
}
#NavBar nav a{
    transition: font-size 0.3s, color 0.3s;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
    float:right;
    font-weight: bold;
}
nav{
    margin-left:auto;
    font-size:18px;
}
footer{
    text-align: center;
    padding: 10px;
    position: fixed;
    background-color: #9a1eb9;
    color: rgb(69, 1, 38);
    width: 100%;
    bottom:0px;
}
.exo-2-navLinks {
  font-family: "Exo 2", sans-serif;
  font-weight: 400;
  color: rgb(69, 1, 38);
  font-style: normal;
}
#AboutBody>section{
    margin: 20px;
    padding: 20px;
    background-color: rgba(156, 45, 150, 0.8);
    border-radius: 5px;
    border: #000000 2px solid;
    display: none;
}
#AboutBody{
    background-color: #611374;
}
.required::after{
    content:" * ";
    color:red;
}
textarea{
    border-radius: 3px;
    border: 1px solid #cccccc;
    padding: 5px;}
input{
    border-radius: 3px;
    border: 1px solid #cccccc;
    padding: 5px;
}
#Facebook{
    border-radius: 50%;
    height: 40px;
    width:auto;
    position:relative;
    float: right;
}
a:hover{
    font-size: 20px;
    color: white;
}
#MobileLink{
    display:none;
}
#HomeMain{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background-color: #3b0847aa;
    height: 250px;
    padding-top: 200px;
    padding-bottom: 200px;
    padding-left: -250px;
    margin-top:100px;
    position:static;
}
#HomeMain section{
    background-color: rgb(156, 45, 150);
    border-radius: 5px;
    border: #b42cea 2px solid;
    padding:20px;
    max-width:400px;
}
h1{
    font-size: 20px;
    font-weight: bold;
}
#Pictures>img{
    margin:10px;
    border: #b42cea 2px solid;
    border-radius: 5px;
    width:200px;
    height:150px;
    object-fit: cover;
}
#AboutTitle{
    text-align: center;
    margin-bottom: 20px;
    background-color: rgba(156, 45, 150, 0.8);
    border-radius: 5px;
    padding:10px;
}
#AboutButtons>button{
    width: 150px;
    height: 70px;
    font-size: 16px;
    font-weight: bold;
    background-color: #ea2cc4;
    border: #6b0e66 2px solid;
    color:#3b0847;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    cursor: pointer;
    transition:transform 0.2s, background-color 0.2s;
}
#AboutButtons{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
#AboutButtons>button:hover{
    background-color: #ff3ac1;
    transform: scale(1.05);
}
#AboutButtons>button:active{
    transform: scale(0.95);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
#ContacterM{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    margin-top:50px;
}
#ContacterM>div{
    background-color: #cb3dd8;
    border: #3b0847 10px solid;
    border-radius: 4px;
}
#WAHFguy{
    background-color: #771d9b;
    border: #3b0847;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
}
#ContactMain{
    width: 500px;
}
#Members>section{
    margin-bottom:250px;
}
#Members>section>img{
    position:static;
    float:right;
    width:auto;
    height: 300px;
}
#Members>section>h3{
    font-size: 25px;
    font-weight: bold;
}
#rDesc{
    font-size: 16px;
}
.role{
    font-size: 20px;
    font-style: italic;
}
#ContactInfo>h2{
    font-weight: bold;
}
legend{
    font-weight: bolder;
}


/*I do realize that the assignment asked for Mobile being 410px and lower, however
I found setting it to 600px makes it look much nicer overall as a website (or at least as
well as a website that I made could look)*/

@media screen and (max-width: 600px){
    #NavBar{
        flex-direction: column;
        align-items: flex-start;
    }
    #NavBar nav{
        margin:auto;
    }
    #NavBar img{
        margin-bottom: 10px;
        margin-left:auto;
        margin-right:auto;
    }
    nav{
        margin-left:0;
    }
    #HomeBody{
    background-color: #611374;
            background-image: none;
    }
    #ContactBody{
    background-color: #611374;
            background-image: none;
    }
    #WAHFguy{
        display:none;
    }
    #CompLink{
        display:none;
    }
    #MobileLink{
        display:inline;
    }
    #AboutButtons>button{
        width: 70px;
        height: 50px;
        font-size: 10px;
    }
    #ContacterM{
        flex-wrap: wrap;
    }
    #Members>section>img{
        display: none;
    }
    #Members>section{
        margin-bottom: 20px;
    }
    #Events>img{
        width:25vh;
        height: auto;
        margin: auto;
    }
    nav{
        font-size: 14px;
    }
}