@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --color-primary: #FFFFFF;
    --background-color-primary: #000813;
    --background-color-secondary-1: #2B5186;
    --background-color-secondary-2: #193153;
    --background-color-error: #FFC0C0;

    --section-padding: 20px;
    --section-margin: 14px;
    --section-border-radius: 8px;

    --header-footer-padding: 12px;
}

html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--background-color-primary);
    color: var(--color-primary);
    font-family: 'Roboto', 'sans';
}

header {
    padding: var(--header-footer-padding);
    display: flex;
    justify-content: space-between;

    #logo {
        text-decoration: none;
        font-weight: bold;
        font-size: 1.25em;
    }

    ul {
        display: flex;
        height: 100%;
        gap: 20px;
        padding: 0;
        margin: 0;
        list-style: none;

        & a {
            text-decoration: none;
            vertical-align: middle;
        }
    }

    a {
        color: var(--color-primary);
    }
}

main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-evenly;
    max-width: 1000px;
    align-self: center;

    section {
        padding: var(--section-padding);
        margin: var(--section-margin);
        border-radius: var(--section-border-radius);

        h1 {
            margin-bottom: 20px;
        }
    }

    #about {
        background-color: var(--background-color-secondary-1);
    }

    #contact {
        background-color: var(--background-color-secondary-2);
    }
}

footer {
    padding: var(--header-footer-padding);
}

p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

#content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#about {
    img {
        display: block;
    }
}

#contact {
    form {
        display: flex;
        flex-direction: column;
        gap: 10px;

        input, textarea {
            width: 100%;
            font: inherit;
            border: 1px solid black;
            border-radius: 10px;
            padding: 4px;
        }

        input:invalid {
            background-color: var(--background-color-error);
        }

        textarea {
            resize: none;
        }

        button {
            align-self: center;

            font: inherit;
        }
    }
}