:root {
    /* Colors */
    --primary-red: #973D3D;
    --white: #FFFFFF;
    --primary-darkGrey: #474747;

    /* Spacing */
    --padding-standard: 20px;
    --padding-light: 10px;
    --padding-lightest: 5px;

    /* Sizing */
    --card-radius-standard: 15px;
    --card-flex-width: 70%;

    /* Typography */
    --font-size-base: clamp(1rem, 0.575rem + 1.812vw, 2.75rem);
    --font-size-large: clamp(1rem, 0.575rem + 2.718vw, 2.75rem);
    --font-size-heading: clamp(1rem, 0.575rem + 3.625vw, 2.75rem);

}

/* Fonts */

@font-face {
    font-family: 'Michroma';
    src: url("/font/Michroma_Regular.ttf");
}

body {
    font-size: var(--font-size-base);
    display: flex;
    flex-direction: column;
    letter-spacing: 1px;
    font-family: 'Michroma';
}

.headNav {
    display: flex;
    gap: 10px;
    margin: auto;
}

.headshot {
    padding: var(--padding-standard);
    margin: auto;
    border-radius: 45%;
    width: 45%;
}

.header {
    display: flex;
    border-radius: var(--card-radius-standard);
    background-color: var(--primary-red);
    width: var(--card-flex-width);
    flex-direction: column;
    align-self: center;
}

.fullName {
    color: var(--white);    
    font-size: var(--font-size-heading);
    margin: auto;
    margin-bottom: 20px;
}

/* Card classes */
.traits {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--primary-darkGrey);
    border-bottom-right-radius: var(--card-radius-standard);
    border-bottom-left-radius: var(--card-radius-standard);

@media (min-width: 750px) {
        display: grid;
        grid-template-areas: "";
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        padding: var(--padding);
    }
}

.traitWrap {
    color: var(--white);
}

.trait {
    font-size: var(--font-size-large);
}

.traitValue {
    font-size: var(--font-size-base);
}

.herald {
    color: black;
}