*, *::before, *::after
{
    box-sizing: border-box;
}

:root
{
    --border-radius: 3px;

    --color-brand: #0056ce;
    --color-brand-light: hsl(from var(--color-brand) h s 50);
    --color-brand-lightest: hsl(from var(--color-brand) h s 95);
}

html
{
    font-size: 100%;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--color-brand-lightest);
}

body
{
    margin: 0;
}

.main
{
    padding: 1rem;
    display: block;
    max-width: 30rem;
    margin: 5rem auto;
    text-align: center;
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-brand);
    box-shadow: 0 0 3rem rgba(0 0 0 / 12.5%);
}

h1
{
    margin-top: 0;
}