:root {
    --color-text: 17, 17, 17;
    --color-bg: 255, 255, 255;
    --color-hero-bg: 42, 42, 42;
    --color-hero-text: 255, 255, 255;
    --color-hero-text-accent: 204, 204, 204;
    --space-1: .5rem;
    --space-2: .75rem;
    --space-3: 1rem;
    --space-4: 1.25rem;
    --space-5: 2.5rem;
    --space-6: 5rem;
    --color-link: 51, 102, 255;
    --toggle-color-fill: 0, 0, 255;
    --toggle-color-text: 0, 0, 255;
    --color-svg-icon: 102, 102, 102;
    --color-hero-icon: 22, 22, 22;
    --color-focus-color: 0, 125, 250, 0.6;
    --divider: 204, 204, 204;
}

body.dark {
    --color-text: 238, 238, 238;
    --color-bg: 17, 17, 17;
    --color-link: 0, 153, 255;
    --toggle-color-fill: 0, 102, 255;
    --toggle-color-text: 0, 153, 255;
    --divider: 87, 87, 87;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: rgb(var(--color-bg, 255, 255, 255));
    color: rgb(var(--color-text, 17, 17, 17));
    font-family: var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);
    margin: 0;
}

main {
    flex-grow: 1;
 }

.section {
    padding-inline-start: var(--space-4);
    padding-inline-end: var(--space-4);
}

.section-title {
    font-size: 1.3125rem;
    line-height: 1.190456;
    font-weight: 400;
}

.divider {
    border: 1px solid rgb(var(--divider));
    margin-top: var(--space-5);
    margin-bottom: var(--space-3);
}

.hero {
    position: relative;
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
    display: flex;
    background: rgb(var(--color-hero-bg, 42, 42, 42));
    color: rgb(var(--colour-hero-text, 255, 255, 255));
    overflow: hidden;
}

.hero__content {
    z-index: 2;
}

.hero__title-label {
    font-size: 1.1875rem;
    line-height: 1.31579;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: var(--space-4);
    color: rgb(var(--color-hero-text-accent, 204, 204, 204));
}

.hero__title {
    font-size: 1.75rem;
    line-height: 1.14286;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: var(--space-2);
}

.hero__description {
    font-size: 1.1875rem;
    line-height: 1.42105;
    font-weight: 400;
    margin: 0;
}

.hero__icon {
    display: none;
    z-index: 1;
    fill: var(--color-hero-icon);
}

.toggle-section {
    border: 1px solid rgb(var(--toggle-color-fill));
    border-radius: 4px;
    display: flex;
    padding: 1px;
}

.toggle-button {
    background: transparent;
    border-radius: var(--toggle-border-radius-inner,2px);
    border: 1px solid transparent;
    padding: 0;
    color: rgb(var(--toggle-color-text));
    display: inline-block;
    text-align: center;
    min-width: 42px;
    box-sizing: border-box;
    padding: 0 var(--space-1);
    font-size: .75rem;
    line-height: 1.333333;
    font-family: var(--typography-html-font,"Helvetica Neue","Helvetica","Arial",sans-serif);
}

.toggle-button.selected {
    --color-button-text: 255, 255, 255;
    --toggle-color-text: var(--color-button-text);
    background: rgb(var(--toggle-color-fill));
}

.svg-icon {
    fill: rgb(var(--color-svg-icon));
    width: .875rem;
    height: .875rem;
    margin-right: 1.0625rem;
}

.link {
    display: inline-block;
    margin-top: .9375rem;
}

.link-section {
    padding-top: var(--space-5);
}

footer {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 2.5rem;
}

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

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 4px solid var rgba(--color-focus-color);
}

@media only screen and (min-width: 736px) {
    .section {
        padding-inline-start: var(--space-6);
        padding-inline-end: var(--space-6);
    }

    .hero__title-label {
        font-size: 1.3125rem;
        line-height: 1.190456;
    }
    .hero__title {
        font-size: 2.5rem;
        line-height: 1.1;
    }
    .hero__description {
        font-size: 1.3125rem;
        line-height: 1.190456;
    }

    .hero__icon {
        position: absolute;
        right: 0;
        width: 15.625rem;
        height: calc(100% - var(--space-4));
        box-sizing: border-box;
        display: block;
    }
}