@import url("https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
        --background-clr: blue;
        --foreground-clr: rgba(255, 255, 255, 0.96);
        --foreground-dim-clr: rgba(255, 255, 255, 0.67);

        background-color: var(--background-clr);
        color: var(--foreground-clr);
}

h1 {
        font-family: "Azeret Mono", monospace;
        font-size: 36px;
        letter-spacing: -2px;
}

p,
a {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--foreground-clr);
}

@keyframes fadeIn {
        from {
                opacity: 0;
        }
        to {
                opacity: 1;
        }
}

small,
h1,
p,
a {
        opacity: 0;
        animation: fadeIn 780ms ease-in forwards;
}

small {
        font-family: "Azeret Mono", monospace;
        font-size: 12px;
        font-weight: 400;
        color: var(--foreground-dim-clr);
}

hr {
        margin-top: 4vh;
        margin-bottom: 4vh;
        border: 1px solid var(--foreground-clr);
        border-style: dashed;
}

header {
        width: 90ch;
        margin: auto;
        margin-top: 24vh;
        text-align: right;
}

main,
footer {
        text-align: justify;
        width: 83ch;
        margin: auto;
}

@media (max-width: 690px) {
        header {
                width: 73ch;
        }
        main,
        footer {
                width: 63ch;
        }
}

@media (max-width: 560px) {
        header,
        main,
        footer {
                width: 41ch;
        }

        .info {
                text-align: left;
        }
}