@font-face {
    font-family: "Shippori Mincho";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/ShipporiMincho-Regular.ttf);
}

@font-face {
    font-family: "Pretty Sans";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/Tajawal-Regular.ttf);
}

:root {
    --purple: #5d3786;
    --white: #f6f6f6;
    --off-white: #e6e6e6;
    --light-gray: #aaa;
    --gray: #777;
    --dark-gray: #444;

    --subheader-right-width: (1px + 0.5vw + 4vw + 7vh + 16vh + 8vh + 6vh);
}

* {
    font-family: "Pretty Sans", Arial, Helvetica, sans-serif;
}

body {
    background-color: var(--purple);
    z-index: -2;
    padding: 0;
    margin: 0;
}

a {
    color: var(--off-white);
    text-decoration: none;
}

a:hover {
    color: var(--white);
    text-decoration: underline;
}

#header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 6.5vh;
    background-color: var(--purple);
}

#subheader {
    display: flex;
    flex-flow: row nowrap;
    width: 70%;
    height: 100%;
}

#subheader-left {
    display: flex;
    flex-flow: row nowrap;
    width: calc(100% - var(--subheader-right-width));
    height: 100%;
}

#cornerLogo {
    cursor: pointer;
    padding: 0.5vh;
    height: 5.5vh;
    width: 5.5vh;
    /* margin-top: 4%; */
}

input {
    background-repeat: no-repeat;
    background-size: 2.5vh auto;
    background-position: 1.5vh 2.0vh;
    background-image: url(https://scryfall.com/assets/icons/search-field-1734239605b08e7f5d4dc8aaa3f6796c5e89d73a35e2eddff7ee433c267b6190.svg);

    outline: 0;
    padding-left: 5.5vh;
    /* margin-bottom: 0.1vh;
    margin-top: 0.1vh; */
    width: calc(100vw - (6.5vh + var(--subheader-right-width)));
    height: 100%vh;
    font-size: 2.5vh;
    color: var(--white);
    background-color: var(--purple);
    border: none;
    border-radius: 3px;
}

#subheader-right {
    display: flex;
    flex-flow: row-reverse nowrap;
    width: var(--subheader-right-width);
    height: 100%;
}

.header-vertical-divider {
    margin-top: 1.7vh;
    height: 3.0vh;
    width: 1px;
    border-right: 1px solid var(--light-gray);
    margin-right: 0.5vw;
}

.header-link {
    font-size: 2.1vh;
    padding-top: 1.8vh;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    height: calc(100% - 1.8vh);
}

#header-home {
    text-align: center;
    width: 7vh;
}

#header-announcements {
    text-align: center;
    width: 16vh;
}

#header-listings {
    text-align: center;
    width: 8vh;
}

#header-about {
    text-align: center;
    width: 6vh;
}

#fullPage {
    width: 100vw;
    background-color: var(--light-gray);
    min-height: 93.5vh;
}