/*Whole file*/
html{
    scroll-behavior: smooth;
    color:#002454;
}
/*Whole page*/
body{
    background-color: white;
    display:grid;
    padding:0%;
    gap:0px;
    margin:0%;
    grid-template-rows: auto 1fr auto;
    text-align:center;
    font-family: system-ui, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
}

/*Header*/
.header{
    grid-row:1;
    background-color: rgb(233, 233, 248);
}

/*Header / Navigation Bar*/
#NavBar{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    gap: 30px;
    height:auto;
    padding:30px;

}
.nav-link{
    flex:1;
    width: 1fr;
    text-decoration: none;
    color: #002454;
    font-size: 18px;
    padding:10px;
    border-radius: 10px;
    max-width:100px;
    border:#00245484 1px solid;
}

.nav-link:hover{
    background-color: rgb(166, 166, 214)!important;
}

/*Main body*/
#MainBody{
    grid-row:2;
    gap:0px;
    padding:0px;
    margin: 0px;
}

.BodySection{
    padding: 10px 30px 30px 30px;
    margin: 20px 20px 40px 20px;
    border-radius:20px;
    background-color: rgba(233, 233, 248, 0.612);
}

/*Main Body / Banner and introduction*/
#BannerTitle{
    height:300px;
    margin:0px;
    z-index:9;
    background-image: url("../images/placeholderbanner.png");
    background-size: 50% auto;
    background-repeat:no-repeat;
    background-position: center;
    background-position-y: center;
    display:flex;
    align-items:center;
    justify-content:center;

    text-shadow: 2px 2px 4px #fac01a;
    font-size:50px;
}
/*Main Body / YMEC*/

#YMECLogoID:hover {
    scale:1.05;
    opacity:0.9;
    transition: scale 1s ease, opacity 1s ease !important;
}

/*Main Body / Team Lists*/
.TeamList{
    display:flex;
    justify-content: center;
    flex-wrap:wrap;
    gap: 20px;
    padding: 10px 20px 10px 20px;
}
.MemberCard{
    background-color: rgb(242, 242, 255);
    width: 120px;
    padding: 10px;
    padding-top:20px;
    padding-bottom:20px;
    border-radius: 10px;
    border: 1px solid #0024544b;
}
.CardPicture{
    width:100px;
    height:auto;
}

.LinkLogo{
    width: 15px;
    height:auto;
    transform: translateY(2px)translateX(-3px);
}

/*Main Body / Sponsors*/
.SponsorList{
    display:flex;
    justify-content: center;
    flex-wrap:wrap;
    gap: 20px;
}

.SponsorImage{
    width:110px;
}

.SponsorBorder{
    text-decoration:none;
    width: auto;
    height: auto;
    padding: 10px;
    border-radius: 10px;
    color:#002454;
    font-weight: bold;
    transition: background-color 0.5s ease, transform 0.5s ease !important;
}

.SponsorBorder:hover{
    transform:scale(1.05);
}

.SponsorBorder:hover .SponsorImage{
    opacity:0.9;
    transition: opacity 0.5s ease !important;
}

.Diamond{
    background-color: #B9F2FF;
    border: 1px solid #20738639;
}
.Diamond:hover{
    background-color: #38b2cd;
    box-shadow: 5px 5px 5px #207486;
    transition: background-color 0.5s ease, box-shadow 0.3s ease !important;
}

.Gold{
    background-color:gold;
    border: 1px solid #8370023d; 
}

.Gold:hover{
    background-color: #cfb001;
    box-shadow: 5px 5px 5px #837002;
    transition: background-color 0.5s ease, box-shadow 0.3s ease !important;
}

.Iron{
    background-color:#D4D7D9;
    border: 1px solid #6e6b6b3d; 
}

.Iron:hover{
    background-color: #989595;
    box-shadow: 5px 5px 5px #6e6b6b;
    transition: background-color 0.5s ease, box-shadow 0.3s ease !important;
}

.SponsorCard{
    background-color: rgba(245, 245, 245, 0.697);
    display:flex;
    align-items:center;
    flex-direction:column;
    width: 120px;
    height:calc(100% - 45px);
    bottom:0px;
    padding: 10px;
    border-radius:10px;
    transition: background-color 0.5s ease !important;
}

/*footer*/
.footer{
    width:100%;
    grid-row:3;
    background-color: rgb(233, 233, 248);
}
/*footer / contact*/

#ContactID{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    gap: 10px;
    height:auto;
    padding:20px;
    padding-bottom:30px;
}

.phoneNum{
    color: #002454;
    font-size: 17px;
    padding:10px;
    border-radius:15px;
}

/*For small screens*/
@media (max-width:500px){
.ListSection{
    padding:0px;
}
}