/* ========================================================================== */
/* Fonts */

@font-face
{
    font-family: Montserrat-Regular;
    src: url("/content/fonts/Montserrat/Montserrat-Regular.ttf");
}

/* ========================================================================== */
/* Variables */

:root
{
    --text:        #F5F5F5;
    --background:  #1C70B8;
    --text-shadow: .05em .05em .1em rgba(0, 0, 0, .3);
}

/* ========================================================================== */
/* General */

*
{
    box-sizing: border-box;
}

a
{
    text-decoration: underline;
    color: gold;
    cursor: pointer;
}

body
{
    font-family: Montserrat-Regular;
    font-size: 17px;
    letter-spacing: .01em;
    color: var(--text);
    background-color: var(--background);
}

div.main, div.error
{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: fit-content;
    margin-top: 15vh;
    margin-left: auto;
    margin-right: auto;
    padding: 35px;
    text-align: left;
}

div.error
{
    text-align: center;
}

h1
{
    font-size: 57px;
    margin: 0;
    text-shadow: var(--text-shadow);
}

h2
{
    font-size: 21px;
    margin: 0;
}

img.logo
{
    width: 125px;
    height: auto;
}

/* ========================================================================== */
/* Media Rules */

@media screen and (max-width: 750px)
{
    div.main, div.error {gap: 11px;}
    div.main h1 {font-size: 32px;}
    img.logo {width: 70px;}
}