:root {
    --primary: #183e81;
    --secondary: #ffffff;
    --secondary-transparent: rgba(255, 255, 255, 0.85);
    --suplementary: rgb(245, 245, 247);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*@keyframes hover-underline {*/
/*    from {*/
/*        text-decoration: none;*/
/*    }*/
/*    to {*/
/*        text-decoration: var(--primary) underline;*/
/*    }*/
/*}*/

@keyframes hover-fill {
    from {
        background-color: var(--suplementary);
        color: var(--primary);
    }
    to {
        background-color: var(--primary);
        color: var(--secondary);
    }
}


html, body {
    width: 100%;
    height: 100%;
    background-color: var(--secondary);
    font-family: 'Playfair Display', serif;
}

h1, h2 {
    font-family: 'Open Sans', sans-serif;
}

a {
    color: var(--primary);
    text-decoration: underline;
    cursor:  pointer;
}


header {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--secondary-transparent);
    color: var(--primary);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 1.7vh;
    padding-bottom: 1.7vh;
}

#icon {
    width: 2.5%;
    height: 2.5%;
    border-radius: 100%;
    margin-left: 3%;
}

header > h3 {
    padding: .3% .4%;
    /*padding: .1% .2%;*/
    border-radius: 3%;
    margin-left: .7%;
}
#header > a {
    padding: .2% .3%;
    border-radius: 3%;
    margin-left: .7%;
    font-size: 1.2em;
}

#mt-link {
    text-decoration: none;
}

#links > a {
    padding: .3% .5%;
    border-radius: 3%;
    text-decoration: none;
}

#links > a:hover, #header > a:hover {
    animation: hover-fill 200ms;
    background-color: var(--primary);
    color: var(--secondary);
}

#links {
    width: 60%;
    margin-left: 5%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

footer {
    background-color: var(--suplementary);
    padding: 1.2% 0;
    display: flex;
    justify-content: center;
    font-family: sans-serif;
}