header .header-bar{
    position: relative;
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: center;
}

.header-bar h1{
    font-weight: 300;
}

html.dark #dark-mode{
    border: 2px solid white;
}
html.light #dark-mode{
    border: 2px solid black;
}

.header-bar #dark-mode{
    display: flex;
    justify-content:space-between;
    align-items: center;
    position: absolute;
    height: 20px;
    width: 35px;
    right: 20px;
    border-radius: 20px;
    background-color: transparent;
    user-select: none;
}

html.dark #sun-moon{
    background-color: white;
    transform: translateX(15px);
}

html.light #sun-moon{
    background-color: black;
    transform: translateX(0px);
}

#dark-mode #sun-moon{
    height: 100%;
    border-radius: 50%;
    transition: transform 0.3s;
}

header .navbar{
    height:60px;
    background-color: white;
    box-shadow: inset 2px 2px 10px rgba(105, 102, 102, 0.2);
    border: 1px solid grey;
    border-left: none;
    border-right: none;

    /* flex box */
    display: flex;
}

html.dark header .navbar a{
    --inner-color: rgb(43, 40, 40);
    --hover-color: rgb(79, 72, 72);
    color: white;
}

html.light header .navbar a{
    --inner-color: white;
    --hover-color: black;
    color: black;
}

header .navbar a{
    border-right: 1px solid grey;
    text-align: center;
    align-content: center;
    font-size: 18px;
    text-decoration: none;  
    flex:1;               /* for each to occupy same space */
    background-color: var(--inner-color);

    transition: background-color 1s, color 1s;
}

#right-option{
    border-right: none;
}

header .navbar a:hover{
    background-color: var(--hover-color);
}

/* Footer */
#aboutus-footer{
    margin-top: 50px;
    margin-left: 50px;
    padding-bottom: 50px;
}

@media (max-width: 600px) {
    #aboutus-footer{
        margin-left: 10px;
    }
}