:root {
    --palette-color-0: #071108;
    --palette-color-1: #364652;
    --palette-color-2: #9395D3;
    --darker-purple: #6e71ad;
    --palette-color-3: #B3B7EE;
    --palette-color-4: #A2A3BB;
    --main-background-color: #FBF9FF;
    --secondary-background-color: #f1e9fe;
    --lighter_gray: #878787;
    --header-opacity: 0.9;
    --carat-thickness: 0.15vw;
}

body {
    background-color: var(--main-background-color);
}

#standard-menu li.current a {
    color: var(--darker-purple);
}

#menu ul a li.current {
    color: var(--darker-purple);
}

header {
    background-color: var(--main-background-color);
    height: 7vh;
    align-content: center;
    position: fixed;
    width: 100%;
    opacity: var(--header-opacity);
    z-index: 998;
    /* border-bottom: 0.3vmin solid var(--palette-color-3); */
}

header nav {
    display: flex;
    justify-content: right;
    align-content: center;
    margin-right: 3vw;
}

#standard-menu {
    display: flex;
    list-style-type: none;
    align-content: center;
    align-items: center;
}

#standard-menu li {
    margin-left: 1vw;
    margin-right: 1vw;
}

#standard-menu li a {
    text-decoration: none;
    font-size: 2.8vh;
    font-family: Verdana, sans-serif;
    color: var(--palette-color-3);
}

#standard-menu li a:hover {
    transition: 0.25s;
    color: var(--palette-color-2);
    cursor: pointer;
}

.header-logo-placement {
    position: absolute;
    left: 0.5vw;
    top: 0;
    align-content: center;
    opacity: 0.75;
}

.header-logo-placement:hover {
    transition: 0.25s;
    opacity: 1;
    cursor: pointer;
}

.header-logo-size {
    height: 6.5vh;
    width: auto;
}

#hamburger-menu {
    display: none;
    z-index: 1;
}

#hamburger-menu a {
    text-decoration: none;
    color: var(--palette-color-3);
}

#hamburger-menu a:hover {
    transition: 0.25s ease-in-out;
    color: var(--palette-color-2);
}

#hamburger-menu input {
    display: block;
    z-index: 2; /* place checkmark over hamburger */
    width: 4vh;
    height: 4vh;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

#hamburger-menu .actual-hamburger {
    margin-top: -0.5rem;
    display: flex;
    width: 4vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#hamburger-menu .actual-hamburger span {
    display: block;
    width: 4vh;
    height: 0.5vh;
    margin-top: 0.75vh;
    background: var(--palette-color-0);
    opacity: 0.8;
    border-radius: 0.5rem;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.25s ease;
}

#hamburger-menu input:hover ~ span {
    opacity: 1;
}

#hamburger-menu input:checked ~ span {
  opacity: 1;
  transform: translate(-0.15vh, -1.5vh) rotate(-45deg);
  background: #232323;
}

#hamburger-menu input:checked ~ span:nth-last-child(3){
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#hamburger-menu input:checked ~ span:nth-last-child(4) {
  transform: translate(-0.1vh, 1vh) rotate(45deg);
}

#menu {
    position: absolute;
    top: 7vh;
    left: 0;
    display: flex;
    opacity: 0;
    background-color: var(--main-background-color);
    width: 100%;
    height: 25vh;
    transition: 0.25s ease-in-out;
}

#menu ul li {
    text-decoration: none;
    list-style-type: none;
    display: flex;
    margin-top: 2vh;
    margin-bottom: 2vh; 
    font-size: 2.8vh;
    font-family: Verdana, sans-serif;
    color: var(--palette-color-3);
}

#menu ul {
    display: flex;
    flex-direction: column;
    align-self: center;
    margin-left: 10vw;
}

#hamburger-menu input:checked ~ #menu {
    opacity: var(--header-opacity);
    border-bottom: 0.15vh solid var(--palette-color-3);
    border-top: 0.15vh solid var(--palette-color-3);
}

@media (max-aspect-ratio: 1/1) {
    #standard-menu {
        display: none;
    }
    #hamburger-menu {
        display: block;
    }
}

footer {
    border-top: 1px solid var(--palette-color-2);
    height: 10vh;
}

footer .email {
    display: flex;
    height: 7.5vh;
    align-items: center;
    justify-content: center;
}

footer .email div {
    width: 25vw;
    font-size: 2vmin;
    font-family: Verdana, sans-serif;
    color: var(--palette-color-3);
}

footer .email .left {
    display: flex;
    justify-content: center;
}

footer .email .left a {
    text-decoration: underline;
    text-underline-offset: 0.5vmin;
    text-decoration-color: var(--palette-color-3);
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
    color: var(--palette-color-1);
    cursor: pointer;
}

footer .email .left a:hover {
    transition: 0.25s ease-in-out;
    color: var(--palette-color-0);
    text-decoration-color: var(--palette-color-2);
}

footer .email .right {
    margin-left: 5rem;
    display: block;
    text-align: center;
}

footer .email .right span {
    font-size: 2vmin;
    text-align: center;
}

footer .email .right .time {
    color: var(--palette-color-1);
}

footer .icons ul li a img {
    height: auto;
    width: 2rem;
}

footer .icons {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5vh;
    margin-top: -1vh;
}

footer .icons ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    width: 7.5rem;
}

footer .icons ul li a {
    display: flex;
    align-content: center;
    justify-content: center;
}

footer .icons ul li {
    flex: 1;
    opacity: 0.8;
}

footer .icons ul li:hover {
    transition: 0.25s ease-in-out;
    opacity: 1;
}

@media (max-aspect-ratio: 0.75/1) {
    footer .email .left a {
        font-size: 1.25rem;
        text-underline-offset: 0.15rem;
    }
    footer .email .right {
        margin-left: 0rem;
    }
    footer .email div {
        width: 15rem;
    }
    footer .email .right {
        width: 20rem;
    }
    footer .icons {
        margin-top: 0.3rem;
    }
    footer .icons ul {
        width: 10rem;
    }
    footer {
        height: 15vh;
    }
    footer .icons ul li a img {
        width: 3rem;
    }
    footer .email .right span {
        font-size: 1.25rem;
    }
}