:root {
    --accent: 136, 58, 234;
    --accent-light: 224, 204, 250;
    --accent-dark: 49, 10, 101;
    --accent-gradient: linear-gradient(
        45deg,
        rgb(var(--accent)),
        rgb(var(--accent-light)) 30%,
        white 60%
    );
}

html {
    font-family: "Instrument Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    background: #13151a;
}

main {
    margin: auto;
    padding: 1rem;
    width: 848px;
    max-width: calc(100% - 2rem);
    color: white;
    font-size: 24px;
    line-height: 1.6;
}
h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin-bottom: 1em;
}

.text-gradient {
    background-image: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 400%;
    background-position: 0%;
}
.instructions {
    margin-bottom: 2rem;
    border: 1px solid rgba(var(--accent-light), 25%);
    background: linear-gradient(
        rgba(var(--accent-dark), 66%),
        rgba(var(--accent-dark), 33%)
    );
    padding: 1.5rem;
    border-radius: 8px;
}