:root {
    
    /* t1 (Theme 1 - Dark) */
    --t1-text: hsl(15, 52%, 60%);
    --t1-text-muted: hsl(15, 52%, 40%);
    --t1-bg: hsl(210, 52%, 18%);
    --t1-bg-alt: hsl(210, 52%, 30%);

    /* t2 (Theme 2 - Light) */
    --t2-text: hsl(211, 63%, 22%);
    --t2-text-muted: hsl(211, 25%, 50%);
    --t2-bg: hsl(0, 0%, 100%);
    --t2-bg-alt: hsl(210, 52%, 90%);

    /* t3 (Theme 3 - Orange)*/
    --t3-text: hsl(0, 0%, 95%);
    --t3-text-muted: hsl(0, 0%, 85%);
    --t3-bg: hsl(15, 52%, 60%);
    --t3-bg-alt: hsl(15, 52%, 53%);

    --shadow: 0 2px 10px hsla(210, 52%, 20%, 0.2);
    --shadow-lifted: 0 4px 20px hsla(210, 52%, 20%, 0.3);

    --banner: polygon(
        0% 0%, 
        100% 0%, 
        calc(100% - 20px) 50%, 
        100% 100%, 
        0% 100%, 
        20px 50%
    );

    --font-primary: "Noto Serif", Arial; /* "Times New Roman" */
    --font-secondary: Ubuntu, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;

    --error-text: hsl(0, 0%, 95%);
    --error-bg: hsl(0, 100%, 75%);
    --error-bg-alt: hsl(0, 100%, 60%);
}

body {
    flex-direction: column;
    font-family: "Noto Serif", Arial;
    color: var(--t2-text);
    background-color: var(--t2-bg);
    font-family: var(--font-primary);
    
    margin: 0;
}

.content {
    min-height: 100vh;
    height: 100%;
}

.banner { 
    box-sizing: border-box;
    display: inline-block;
    margin: 10px;

    font-size: clamp(1rem, 3vw + 1rem, 2rem);
    color: var(--t2-bg);
    font-weight: bold;
    text-align: center;

    background-color: var(--t1-bg-alt);
    padding: 4px 40px;

    clip-path: var(--banner);
}

.pill {
    background-color: var(--bg-3);
    border-radius: 100px;
    color: var(--t2-text-muted);
    padding: 3px 10px;
    display: flex;
    margin: 4px;
}

.pill-split {
    padding: 1px 10px;
    margin: 0 8px;
    background-color: var(--bg-1);
}

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

section {
    padding: 20px;
}

.header {
    margin: 0 auto;
    box-sizing: border-box;
}

h1 {
    font-weight: bold;
}

p {
    font-size: 1rem;
    font-weight: normal;
}