* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

:root {
    --seafoam: #D0F4E2;
    --purple: #5819AA;
    --space-sm: .6rem;
    --space-md: 1.2rem;
    --space-lg: 2.4rem;
    --space-xlg: 3.6rem;
    --space-xxlg: 4.8rem;
    --thin-font: 400;
}

html {
    width: 100%;
    overflow-x: hidden;
}

code {
    display: inline-block;
    white-space: nowrap;
}

body {
    font: 1.2em/2 base, 'Space Grotesk', sans-serif;
    font-weight: 400;
    color: var(--purple);
    background-color: var(--seafoam);
    padding: 0 1.2rem;
    border-top: 9px solid var(--purple);
}

header {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xlg);
}

header > p {
    line-height: normal;
    max-width: 52ch;
    margin-top: var(--space-md)
}

footer {
    line-height: normal;
    max-width: 84ch;
    margin-bottom: var(--space-lg);
    font-size: .8rem;
}

footer p {
    margin-top: var(--space-sm);
}

.contain {
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

section {
    margin-bottom: var(--space-xxlg);
    position: relative;
    box-shadow: 14px 14px 0px 0px #5819aa;
}

.section-wrap {
    border: 4px solid #5819AA;
    padding: 2.4rem;
}

article {
    display: block;
    margin-top: var(--space-lg);
}

section > article:last-child {
    margin-bottom: 0;
}

ul {
    list-style: none;
    margin-top: var(--space-md);
}

ul li {
    margin-bottom: var(--space-md);
    display: flex;
    line-height: normal;
    align-items: center;
}

label {
    margin-left: 1.2rem;
    max-width: 47ch;
}

/* Type */

h1, h2, h3 {
    font-weight: 600;
    line-height: 1;
}

h1 {
    font-size: 3.6rem;
}

h2 {
    font-size: 2.8rem;
}

h3 {
    font-size: 1.8rem;
    margin-bottom: var(--space-md);
}

header h2 {
    font-weight: var(--thin-font);
}

.section-header {
    background-color: var(--seafoam);
    padding: 0 1.2rem;
    margin-left: -1.2rem;
    position: absolute;
    top: -18px;
}

li a {
    color: rgb(41, 41, 41);
    background: linear-gradient(rgba(119, 0, 231, 0.3), rgba(119, 0, 231, 0.3));
    background-size: 100% 0.5rem;
    background-repeat: no-repeat;
    background-position: left 0 bottom 0;
    transition: all 0.1s linear 0s;
    text-decoration: none;
}

li a:hover {
    background-size: 100% 100%;
}

/* input */

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    display: flex;
    gap: 1rem;
}

input[type="checkbox"] + label::before {
    content: "";
    border: 2px solid var(--purple);
    display: inline-block;
    width: 1.4rem;
    min-width: 1.4rem;
    height: 1.4rem;
    display: grid;
    color: transparent;
    box-shadow: 2px 1px var(--purple);
    line-height: 1.4rem;
    place-items: center;
}

input[type=checkbox]:checked + label:before {
    content: '✔️';
    border-color: var(--purple);
    color: #fff;
}

@media (max-width: 36em) {
    
    section {
        box-shadow: none;
    }

    .section-wrap {
        padding: 1.2rem;
    }

    .section-header {
        margin-left: -.6rem;
    }

    .section-header.long {
        margin-right: .2rem;
        padding-right: 0.5rem;
        max-width: 25rem;
    }

    h2.section-header.long + article {
        margin-top: var(--space-xxlg);
    }
    
}