@font-face {
    font-family: 'Cinzel';
    src: url('./Fonts/Ancient/Cinzel-VariableFont_wght.ttf')
}
@font-face {
    font-family: 'JetBrains';
    src: url('./Fonts/JetBrainsMono/JetBrainsMono-Medium.ttf');
}
@font-face {
    font-family: 'JetBrains_Light';
    src: url('./Fonts/JetBrainsMono/JetBrainsMono-Light.ttf');
}
@font-face {
    font-family: 'JetBrains_XLight';
    src: url('./Fonts/JetBrainsMono/JetBrainsMono-ExtraLight.ttf');
}

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

:root, html {
    font-size: 16px;
}

body {
    min-height: 100vh;
    height: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

header {
    align-self: stretch;
    padding: calc(5px + 1vh);
    position: sticky;
    top: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: white;
    box-shadow: 0px 5px 4px rgba(0,0,0,0.1);
    z-index: 1000;
} header:hover {
    box-shadow: 0px 5px 4px rgba(0,0,0,0.2);
    transition: 1s;
} header .brand {
    align-self: flex-start;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
} header .brand img {
    width: 50px;
} header .brand h4 {
    display: flex;
    gap: 5px;

    font-family: 'Cinzel';
    letter-spacing: 1px;
} header .brand h4 div {
    display: flex;
    gap: 2px;
} header .brand h4 #light {
    font-weight: 100;
} header nav {
    position: relative;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
} header nav .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0px;
} header nav button {
    align-self: flex-end;
    padding: 8px;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: transparent;
    border: none;
    cursor: context-menu;
    font-size: 20px;
} header nav button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
} header nav .menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    padding: 10px;

    display: grid;
    gap: 6px;

    background: white;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
} .menu-panel a {
    font-family: 'JetBrains';
    text-decoration: none;
} .menu-panel a:hover, .menu-panel a:focus-visible {
    background: rgba(0,0,0,0.06);
    outline: none;
}
.menu.open .menu-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

main {
    align-self: stretch;
    flex: 1 0 auto;
    padding: 7vh 5vw;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(1rem + 5vh);
} main * {
    font-family: 'JetBrains';
}

.contact-title {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(10px + 0.1vh);
} .contact-title h1 {
    font-size: calc(2rem + 2vw);
} .contact-title small {
    font-size: calc(0.5rem + 0.5vw);
    font-style: italic;
    text-indent: calc(20px + 1vw);
}

form {
    /* align-self: stretch; */

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(1rem + 1.25vh);
}
form div {
    /* align-self: stretch; */

    display: flex;
    flex-flow: column nowrap;
    gap: calc(0.25rem + 0.25vh);
} form label {
    font-size: calc(1rem + 0.5vw);
} form input {
    /* flex: 1 0 auto; */
    margin-left: 1.5vw;
    padding: calc(2px + 0.1vh);
    width: 400px;

    font-size: calc(0.75rem + 0.75vh);
    letter-spacing: 1.5px;
} form textarea {
    flex: 1 0 300px;
    margin-top: 0.25vh;
    margin-left: 1.5vw;
    padding: calc(15px + 0.2vh);
    width: 800px;

    font-size: calc(0.75rem + 0.75vh);
    letter-spacing: 1.5px;
} 

form button {
    background-color: white;

    font-size: calc(0.75rem + 0.25vw);
    padding: 1vh 1vw;
}

form button:hover {
    box-shadow: 1px 1px 3px black;
    /* transition: 1s; */
}

@media(max-width: 720px) {
    form input {
        width: 250px;
        letter-spacing: 0.75px;
    }
    form textarea {
        flex: 1 0 200px;
        width: 300px;

        font-size: calc(0.5rem + 0.75vh);
        letter-spacing: 0.75px;
    }
}