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

:root {
    --white: #FFFFFF;
    --black: #000;
    --chetwode-blue: #6666BD;
    --blue-gem: #4545A8;
    --cerulean-blue: #2828A0;
    --midnight-blue: #1A1A7E;
    --sapphire: #0D0D63;
    --salomie: #FFDC75;
    --cream-can: #F0C749;
    --gold-tips: #E5B21B;
    --dark-goldenrod: #B48A0C;
    --olive: #8D6A00;
    --lavender-blue: #CFE2FF;
    --columbia-blue: #9DC5FF;
    --maya-blue: #72AAFD;
    --lemon-chiffon: #FFF4CA;
    --cream-brulee: #FFE993;
    --dandelion: #FFE064;
    --bisque: #FFDFCA;
    --romantic: #FFBE93;
    --atomic-tangerine: #FFA164;
}

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--lavender-blue);
    font-size: medium;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    margin: 0;
    min-height: 100%;
}

header {
    background-image: linear-gradient(to bottom, var(--maya-blue), var(--lavender-blue));
    color: var(--white);
    padding: 20px 50px 75px;
    text-align: center;
}

footer {
    text-align: center;
    padding: 75px 50px 20px;
}

main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 20px 100px;
}