*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body { background-color: #170a1c; 
    padding-bottom: 150px;
}
footer{
    background-image: linear-gradient(to bottom,#101d42, #33738a);
    width: 100%;
    outline:  #101d42;
    outline-width: 30px;
    outline-style: double;
    
}
.footerContainer{
    width: 100%;
}
.contactBox{
    background-color: #101d42;
    width: 90%;
    margin: 10%;
}

.TopSection {
    height: 40vh;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom,#101d42, #33738a, rgba(255, 255, 255, 0));
    /*gap:3em;*/
    padding: 1em 5em;
}
.TopSection div h1 {
    display: none;
}

.TopSection div h3 {
    display: none;
}
.TopSection2 {
    height: 40vh;
    width:90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #101d42;
    padding: 1em;
    margin-top: 50px;
    margin: 4%;
    margin-bottom: 50px;
}
.TopSection2 div h1 {
    display: flex;
    font-size: 36px;
}
.TopSection2 div h3 {
    display: flex;
    margin-top: 20px;
    color: lavender;
}
.footerContainer h1{
    font-size: 60px;
}
.gif{
    text-align: center;
    padding: 20px;
}
.socialIcons{
    display: flex;
    justify-content: center;
    padding: 30px 30px 20px;
}
.socialIcons a{
    text-decoration: none;
    padding: 10px;
    color: #101d42;
    opacity: 0.9;
}
.socialIcons a:hover{
    color: lavender;
}
.footerNav ul{
    display: flex;
    justify-content: center;
    list-style-type: none;
    white-space: nowrap;
    padding-bottom: 30px;

}
.footerNav ul li a{
   color: white;
   margin: 20px;
   text-decoration: none;
   font-size: 1.3em;
   transition: 0.5s;
   font-family: ce;
   
}
.footerNav ul li a:hover{
    color: #101d42;
}
p{
    color: lavender;
    padding:  30px 20px;
    text-align: center;
    font-family:"Arial",sans-serif;
}
h1{
    color: lavender;
    text-align: left;
    font-family: sans-serif;
}
h2{
    color: lavender;
    padding: 20px;
    margin: 0%;
    text-align: center;
    font-family:sans-serif;
}
.videoYouTube, iframe {
    text-align: center;
    aspect-ratio: 16 / 9;
    width: 100%;
    padding: 3%;
}
.footerContainer h3{
    text-align: center;
    font-family: sans-serif;
}

@media (max-width:650px){
.footerNav ul{
    flex-direction: column;
    padding-bottom: 30px;
}
.footerNav ul li {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}
.profilePicture{
    text-align: center;
}
.footerContainer h1{
    text-align: center;
    margin: 20px;
}
.bigName h1{
    text-align: center;
}
.bigName p{
    max-width: 100%;
}
.bigName img{
    text-align: center;
}
}
@media (min-width:651px){
    .footerContainer h1 {
        margin-left: 150px;
        margin-bottom: 20px;
        padding-top: 70px;
        text-align: center;
    }
    .footerContainer h3 {
        margin-left: 150px;
    }
    .bigName h1{
        margin: 90px 30px 15px 90px;
    }
    .bigName img{
        text-align: right;
    }
    .TopSection {
    height: 30vh;
    width:100%;
    display:flex;
    justify-content: end;
    align-items: center;
    background-image: linear-gradient(to bottom,#101d42, #33738a);
    gap:3em;
    padding:1em 10em;
    }
    .TopSection div h1 {
        display: flex;
        font-size: 48px;
    }
    
    .TopSection div h3 {
        display: flex;
        color:#170a1c ;
    }
    .TopSection2 {
        height: 40vh;
        width:90%;
        display:flex;
        justify-content: end;
        align-items: center;
        background-color: #101d42;
        margin: 5%;
        padding:1em 10em;
        }
        .TopSection2 div h1 {
            display: flex;
            font-size: 36px;
        }
        
        .TopSection2 div h3 {
            display: flex;
            margin-top: 20px;
            color: lavender;
        }
    

    }