/* Base styles */
    @font-face {
        font-family: leather;
        src: url(leather-light-1.woff);
    }
    :root {
        --primary: #ff2d2d;
        --secondary: #000000;
        --light: #ffeada;
        --accent: #003154;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        border: 60px solid transparent;
        padding: 15px;
        border-image: url(border2.png) 40% round;
        font-family: leather, serif;
        font-style: normal;
        font-weight: 300;
        line-height: 1.6;
        color: var(--primary);
        background-color: var(--light);
        margin: 10px;
        padding: 20px;
    }
    
    /* Image for the borders */
    #borderImg { 
        border: 60px solid transparent;
        padding: 15px;
        border-image: url(border2.png) 40% round;
    }

    /* Subheadings */
    h1, h2, h3 {
        font-weight: 400;
        line-height: 1.2;
        margin-bottom: 0.5em;
    }
    h1 {
        font-size: 3rem;
        margin-bottom: 0.2em;
    }
    h2 {
        font-size: 2rem;
        border-bottom: 2px solid var(--accent);
        padding-bottom: 0.3em;
        margin-top: 2em;
    }
    h3 {
        font-size: 1.5rem;
        color: var(--accent);
    }
    p {
        margin-bottom: 1em;
    }
    
    /* Header */
    header {
        text-align: center;
        padding: 1.6em 0;
        margin-bottom: -2em;
    }
    .title {
        font-size: 6rem;
        font-weight: 400;
        letter-spacing: -1px;
        margin-top: -0.2em;
        margin-bottom: -0.2em;
    }
    .subTitle {
        font-size: 2rem;
        font-weight: 400;
        color: var(--secondary);
    }

    /* Sections */
    body {
        text-align: center;
        padding: 1.6em 0;
        margin-bottom: -4em;
    }
    section {
        margin-bottom: 3em;
    }

    /* History */
    .historyText {
        display: flex;
        max-width: 80%;
        gap: 2rem;
        margin: auto;
        font-size: 1.5rem;
        font-weight: 300;
        line-height: 1.7rem;
    }
    
    /* Weight */ 
    .weight {
        background: white;
        padding: 2em;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    #weightText {
        font-size: 2rem;
        margin-bottom: 0.5em;
        line-height: 1.2;
    }

    /* Character Sheet */
    .letterDisplay {
        width: 300px;
        height: 300px;
        border: 2px solid #333;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 8rem;
        font-weight: bold;
        margin: 20px auto;
    }
    button {
        padding: 10px 20px;
        font-size: 1.6rem;
        cursor: pointer;
        margin: 10px;
        background-color: white;
        color: #ff2d2d;
    }

    /* Footer */
    footer {
        text-align: center;
        padding: 2em 0;
        border-top: 1px solid white;
        margin-top: 2em;
        color: var(--secondary);
        font-size: 0.9rem;
    }