*{
    margin: 0;
}
    
body{
    display: flex;
    flex-direction: column;
    min-height: 120vh;
}

.home__page{
    background-color: #DBCDF0;
    color: #8a2be2;
}
.my__cv{
    background-color: #c6f4fa;
    color: #4491f6;
}
.media__log{
    background-color: #F7D9C4;
    color: #fa952a;
}

h1{
    font-family: Verdana, sans-serif;
    font-size: 2vw;
    text-align: center;   
    margin: 2%; 
}

main{
    flex-grow: 1;
}

p{
    font-family: Verdana, sans-serif;
    font-size: 1.25vw;
    text-align: center;
    justify-self: center;
}

/* navbars */
#mobile-navbar{
    position: absolute;
    top:-100000px;
}

.navbar{
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar.home__page div{
    background-color:#831fe0;
}

.navbar.my__cv div{
    background-color:#4491f6;
}

.navbar.media__log div{
    background-color:#fa952a;
}

.navbar__tab{
    list-style-type: none;
    overflow: hidden;
    border-radius: 2rem;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    width: 40%;
    aspect-ratio: 50 / 3;
    padding-inline-start:0;
    margin: 0.5% 20%;
    padding: 1% 1%;
    gap: 2.5%;
}

.navbar a{
    font-family: "archivo black", sans-serif;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    background-color: #9e9e9e;
    color: #171717;
    float: left;
    flex-grow:1;
    padding: 1.5%;
    display: block;
    text-align: center; 
    border-radius: 2rem;

}

.active#home-page-button{
    background-color: #DBCDF0;
    color: #831fe0;
    border-radius: 2rem;
}

.active#my-cv-button{
    background-color: #c6f4fa;
    color: #4491f6;
    border-radius: 2rem;
}

.active#media-log-button{
    background-color: #F7D9C4;
    color: #fa952a;
}

#home-page-button:hover{
    background-color: #DBCDF0;
    color: #831fe0;
}

#my-cv-button:hover{
    background-color: #c6f4fa;
    color: #4491f6;
}

#media-log-button:hover{
    background-color: #F7D9C4;
    color: #fa952a;
}


#mobile-contacts{
    position: absolute;
    top:-100000px;
}
footer{
    position: relative;
    top: 25px;
    width: 100vw;
}

.contacts{
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contacts.home__page div{
    background-color:#831fe0;
}

.contacts.my__cv div{
    background-color:#4491f6;
}

.contacts.media__log div{
    background-color:#fa952a;
}

.contacts__tab {
    list-style-type: none;
    overflow: hidden;
    border-radius: 2rem;
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    width: 40%;
    aspect-ratio: 50 / 3;
    padding-inline-start: 0;
    margin: 0.5% 20%;
    padding: 1% 1%;
    gap: 2.5%;
}

.contacts a{
    font-family: "archivo black", sans-serif;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    background-color: #f2f2f2;
    color: #3d3b3e;
    float: left;
    padding: 1.5%;
    display: block;
    text-align: center; 
    border-radius: 2rem;
    flex-grow: 1;
}

.contacts a:hover{
    background-color: #3d3b3e;
    color: #f2f2f2;
}
/* onedrive embeds*/
#my-cv{
    justify-self: center;
}

iframe{
    justify-self: center;
    width: 630px;
    height: 700px;
}

/* Mobile */

@media screen and (max-width:800px){
    h1{
    font-size: 1.5rem;
    }

    p{
    font-size: 0.8rem;
    }

    #normal-navbar{
        position:absolute;
        top: -100000px;       
    }

    #mobile-navbar{
        position:absolute;
        left:10%;
        top: 0px;
        margin: 1%;           
    }

    #mobile-tab{
        width: 80vw;
        height: 8vh;
        margin: 0.0% 0%;
        padding:0;
    }

    .navbar__tab a{
        width: 20%;
        margin: 1% 2.5% 1% 0;
        padding:1%;
    }

    .navbar__toggle{
    height: 1.25rem;
    width: 1rem;
    position: relative;
    left: 4px;
    margin: 0 5px 0 0;
    }

    .navbar__toggle span{
    height: 0.15rem;
    width: 120%;
    background-color: #DBCDF0;
    border-radius: 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
    margin: 0 0 0 20%;
    }

    .navbar__toggle span:nth-child(1){
    top: 25%;
    }

    .navbar__toggle span:nth-child(3){
    top: 75%;
    }

    .navbar__toggle .bar{
        display: block;
        cursor: pointer;
    }

    #mobile-menu.active1 .bar:nth-child(2) {
        opacity: 0;
    }

    #mobile-menu.active1 .bar:nth-child(1) {
        transform:translateY(5.0px) translateX(-8px) rotate(45deg);
    }

    #mobile-menu.active1 .bar:nth-child(3) {
        transform:translateY(-6.0px) translateX(-8px)rotate(-45deg);
    }

    #normal-navbar.active2{
        position: relative;
        display: flex;
        top: 80px;  
        background: 0;
    }

    #normal-navbar div{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 200px;
        height: 200px;
        padding: 2% 0%;
    }
    
    #normal-navbar a{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 150px;
    }

    main{
        text-align: center;
        position: relative;
        top: 60px;
    }

    main.active3{
        opacity:0;
    }
/* Contacts */
    #normal-contacts{
        position:absolute;
        top: -100000px;       
    }
    
    #mobile-contacts{
        position:absolute;
        top: 0px;
        margin: 1%;    
        width: 100%;
        font-weight: bold;      
    }
    
    #mobile-contacts-tab{
        width: 40vw;
        height: 7vh;
        margin: 1% 0%;
        padding: 0;
    }

    .contacts__tab a{
        width: 20%;
        margin: 0% 4% 0% 4%;
        padding:1%;
    }

    #mobile-contacts.active4{
        position:absolute;
        top: 100%;
        margin: 1%;    
        width: 100%;
        font-weight: bold;     
    }

    #mobile-contacts.active4 a{
    background-color: #3d3b3e;
    color: #f2f2f2;
    }

    #normal-contacts.active5{
        position: relative;
        display: flex;
        top: 0px;  
        background: 0;
    }

    #normal-contacts div{
        display: flex;
        flex-direction: column;
        justify-content: space;
        width: 200px;
        height: 200px;
        padding: 2% 0%;
    }
    
    #normal-contacts a{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 150px;   
    }

/* onedrive embeds */
    main{
        margin-top: 2rem;
        width: 100%;
    }

    iframe{
        justify-self: center;
        width: 100%;
        aspect-ratio: 630/700;
    }

    #my-cv{
        width: 100%;    
        justify-self: center; 
    }
}