@import url('navbar.css');
@import url('button.css');
@import url('card.css');
@import url('mega-card.css');
@import url('member-portrait.css');

@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
@font-face {
    font-family: Fyodor;
    src: url('/assets/fonts/fyodor/Fyodor-BoldExpanded.woff');
}

:root {
    --bw-light-red: #d10000;
    --bw-dark-red: #570d0d;
    --bw-vivid-gold: #ffd700;
    --bw-faded-gold: #fff0a0;
    --paper-stroke: black;
    --paper-fill: white;
    --background: white;
    --loud-font: fyodor;
    --soft-font: Karla;
    --stroke-width: 0.2em;
}

html {
    background: linear-gradient(90deg,#500016 0%, #000 50%, #500016 100%);
    font-family: var(--loud-font);
    display: flex;
}

body{
    max-width: 70em;
    margin:auto;
    background: white;
    z-index: -10;
    position: relative;
}

main {
    width: 80%;
    height: 100%;
    margin: auto;
}

h1 {
    font-family: var(--loud-font);
    text-align: center;
    font-size: 2.5em;
    padding-left: 3em;
    padding-right: 3em;
}

h2 {
    text-align: center;
}

h3 {
    text-align: center;
    font-size: 1.0em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

p, li{
    font-family: var(--soft-font);
    text-align: justify;
    font-size: 1.1em;
}


@media (pointer:none), (pointer:coarse) {
    :root {
        --stroke-width: 0.5em;
    }

    html {
        background: white;
    }

    body {
        padding-bottom: 9.5em;
    }

    main {
        padding-bottom: 10em;
    }

    h1 {
        font-size: 6em;
        padding-left: 1em;
        padding-right: 1em;
    }
    h2 {
        font-size: 5em;
    }

    h3 {
        font-size: 4em;
    }

    p, li {
        font-size: 3em;
    }
}



#project-landing {
    position: relative;
    z-index: 1;
}

#project-landing img {
    width: 100%;
    height: 24em;
    object-fit: cover;
}

#project-banner-border {
    background-image: linear-gradient(to bottom, transparent 40%, black 60%);
    height:5em;
    margin-top: -5em;
    position: relative;

}

#project-landing h1 {
    border-top-right-radius: 1em;
    border-top-left-radius: 1em;
    background: white;
    margin-top: -1em;
    padding-top: 1em;
    position: relative;
    z-index: 3;
}