body {
    background-color: #F5F5F5;
    padding: 0;
    margin: 0;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
}

/* Navbar */
@media screen and (min-width: 426px) {
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 20px;
        height: 10vh;
    }
    .FooterNav a{
        margin: 0 10px;
    }
    .FooterNav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media screen and (max-width: 426px) {
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 20px;
        height: 15vh;
    }
    .FooterNav a{
        margin: 6px 10px;
    }
    .FooterNav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.Navbar {
    /* Do not get affected by justify-content in header */
    display: none;
}

.Navbar.active {
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5bd;
    width: 100vw;
    height: 100vh;
    position: absolute;
    /* Middle of tne viewport  */
    top: 0%;
    left: 0%;
    justify-content: center;
    align-items: center;
    font-size: 70px;
    z-index: 2;
    /*Blur background*/
    backdrop-filter: blur(10px);
}

.MainLogo{
    width: 200px;
    height: auto;
}





.FooterLogo {
    width: 318px;
    height: auto;
}