:root {
    --nav-background: dodgerblue;
    --nav-button-hover: deepskyblue;
    --error-color: red;
    --success-color: limegreen;
    --button-link-color: white;
}

body {
    font: 100%/1.5 sans-serif;

    margin: 0 auto;
    max-width: 40em;
}

header, footer {
    background-color: var(--nav-background);
}

header ul, footer ul {
    display: flex;

    margin: 0;
    padding: 0;
}

header li, footer li {
    list-style-type: none;
}

header a, footer a {
    display: block;

    color: var(--button-link-color);
    text-decoration: none;

    padding: 0.5em;
}

header li:hover, footer li:hover {
    background-color: var(--nav-button-hover);
}

main {
    padding: 0 0.5em;
}

figure {
    margin: 1em;
}

figure img {
    max-width: 100%;
}

figcaption, .embed  {
    text-align: center;
}

@media (max-width: 500px) {
    footer ul {
        flex-direction: column;
    }
}

#phone-number:invalid {
    outline: 2px solid var(--error-color);
}

#phone-number:invalid ~ .message::after {
    content: "Invalid phone number. Format: \"0\" (without quotes) + 9 numbers.";
    font-size: small;
    color: var(--error-color);
}

#phone-number:valid {
    outline: 2px solid var(--success-color);
}