@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital@0;1&display=swap');

:root {
    --font-stack: 'Gill Sans', 'Inclusive Sans', sans-serif;
    --dark: #0b0707;
    --light: #f8fbff;
    --accent-1: #b1111d;
    --accent-2: #abced8;
    
    /* Fluid type scale: @link https://utopia.fyi/type/calculator?c=320,16,1.2,1920,22,1.25,5,2,1440&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.6944rem, 0.6573rem + 0.1856vw, 0.88rem);
  --step--1: clamp(0.8333rem, 0.78rem + 0.2667vw, 1.1rem);
  --step-0: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
  --step-1: clamp(1.2rem, 1.0963rem + 0.5188vw, 1.7188rem);
  --step-2: clamp(1.44rem, 1.2983rem + 0.7084vw, 2.1484rem);
  --step-3: clamp(1.728rem, 1.5365rem + 0.9575vw, 2.6855rem);
  --step-4: clamp(2.0736rem, 1.8169rem + 1.2833vw, 3.3569rem);
  --step-5: clamp(2.4883rem, 2.1468rem + 1.7078vw, 4.1962rem);
}

*, html, body {
    box-sizing: border-box;
    margin: 0;
}
    

a, a:visited, a:focus {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    border: unset;
}

header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width: 98%;
}

.content-wrapper {
    width: 75ch;
}


.text-wrapper {
    width: 75ch;
    margin-block-end: 2rem;
}

h1, h2, h3, h4, h5, p {
    font-family: var(--font-stack);
    font-weight: 300;
}

h1 {
    margin-block-start: 1rem;
    font-size: var(--step-5);
    text-transform: uppercase;
    border-top: 7px solid;
    border-image: linear-gradient(to left, transparent 65%, var(--accent-1) 35%) 100% 1;
}

h2 {
    font-size: var(--step-3);
    font-style: italic;
    font-weight: 600;
}

p {
    font-size: var(--step-0);
    letter-spacing: 0.03em;
    line-height: 1.3;
}


main h2, main p {
    margin-top: 1.5rem;
}

@media screen and (max-width: 800px) {
    
    header{
        align-items: flex-start;
    } 
    
    main {
        align-items: flex-start;
    }
    
    .content-wrapper {
        width: 95vw;
    }
    
    h1 {
        font-size: var(--step-3);
        border-top-width: 5px;
    }
    .text-wrapper {
        width: 98%;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background: var(--light);
        color: #0b0707;
    }
    
    a {
        color: var(--accent-1);
        border-bottom: 1px solid #0b0707;
    }
    
    h1 {
        border-image: linear-gradient(to left, transparent 65%, var(--accent-1) 35%) 100% 1;
    }
    
    h1, h2, h3, h4, h5, p {
        color: #0b0707;
    }
    
}

@media (prefers-color-scheme: dark) {
    body {
        background: var(--dark);
        color: var(--light);
    }
    
    h1 {

        border-image: linear-gradient(to left, transparent 65%, var(--accent-2) 35%) 100% 1
    }
    
    a {
        color: var(--accent-2);
        border-bottom: 1px solid var(--accent-2);
    }
    
    h1, h2, h3, h4, h5, p {
        color: var(--light);
    }
    
}