/* Variables */
:root {
    --background: #171717;
    --highlight: #ffdc2f;
}

/* Embedded Typefaces */
@font-face {
    font-family: 'Pokemon Fire Red';
    src: url('assets/Pokemon-Fire-Red.woff2') format('woff2'),
        url('assets/Pokemon-Fire-Red.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}

/* Animation */
@keyframes parallax {
    to {
        transform: translateY(calc(var(--parallax-speed) * 100px));
    }
}

/* Main */
.noon {
    margin: 0;
    background-color: var(--background);
    font-family: 'Open Sans', sans-serif;
}

.noon-border {
    border-bottom: 1px solid var(--highlight);
}

.parallax {
    /* position: relative; */
    min-height: 15vh;
    display: grid;
    grid-template-areas: "stack";
    z-index: 0;
}

.parallax > * {
    grid-area: stack;
    animation: parallax linear;
    animation-timeline: scroll();
}

.parallax > img {
    width: 100%;
}

.hero {
    --parallax-speed: 3;
    z-index: 0;
}

.frown {
    --parallax-speed: 0.5;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-left: 48.541%;
    padding-top: 3.8%;
    padding-right: 11.458%;
    z-index: 2;
}

.content {
    position: relative;
    top: 58.5%;
    background-color: var(--background);
}

.navbar {
    background-color: var(--background);
}

.pixtext {
    font-family: 'Pokemon Fire Red';
    font-weight: normal;
    font-style: normal;
}

.dropshadow {
    text-shadow: 0.25rem 0.25rem dimgray;
}

.role-title {
    padding: 10px;
    margin-top:20px;
    border-top: 1px solid var(--highlight); 
    border-radius: 10px;
    color: var(--highlight);
    background-color: var(--background);
    width:100;
}

.text-white {
    color: #FFFFFF;
}

.role-title-dark {
    padding: 10px;
    margin-top:20px;
    border-top: 1px solid var(--highlight); 
    border-radius: 10px;
    color: var(--highlight);
    background-color:#111111;
    width:100;
}

.role-divider {
    padding-left:50px !important; 
    padding-right: 50px !important;
}

.card-color {
    color: white !important;
    background-color: var(--background) !important;
    border-bottom: 1px solid var(--highlight) !important;
}

.card-color-dark {
    color: white !important;
    background-color:#111111 !important;
    border-bottom: 1px solid var(--highlight) !important;
}