* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

:root {
    --color-primary: #1e2835;
}

body {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 1fr auto;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;

    article {
        width: 100%;
        max-width: 600px;

        h1 {
            padding-bottom: 20px;
        }

        a.button {
            --button-color: white;
            display: inline-block;
            border: 1px solid black;
            padding: 0 20px;
            height: 25px;
            line-height: 23px;
            padding-top: 1px;
            text-decoration: none;
            color: black;
            margin-bottom: 10px;
            background-color: var(--button-color);

            &:not(:last-of-type) {
                margin-right: 3px;
            }

            &.primary {
                --button-color: var(--color-primary);
                color: white;

                &:hover {
                    background-color: hsl(from var(--button-color) h s 30);
                }
            }

            &:hover {
                background-color: hsl(from var(--button-color) h s 90);
                cursor: pointer;
            }
        }
    }
}

footer {
    padding: 10px 20px;

    p {
        text-align: center;
    }
}