@font-face {
    font-family: GoogleSans;
    src: url(/Fonts/Google_Sans/GoogleSans-VariableFont_GRAD\,opsz\,wght.ttf);
}

@font-face {
    font-family: Basic;
    src: url(/Fonts/Basic/Basic-Regular.ttf);
}

@font-face {
    font-family: GoogleSans;
    src: url(/Fonts/Google_Sans/GoogleSans-Italic-VariableFont_GRAD\,opsz\,wght.ttf);
    font-style: italic;
}

.skip-to-main-content {
  position: absolute;
  left: -9999px;
  z-index: 999;
  opacity: 0;
  color: white;
  background-color: darkblue;
}

.skip-to-main-content:focus {
  left: 50%;
  margin-top: 20px;
  transform: translateX(-50%);
  opacity: 1;
}

h1, h2, h3, h4, h5, h6, p, a, i, strong, li, span, div {
    font-family: GoogleSans, sans-serif, serif;
}

body {
    margin: 0px;
}

header, footer {
    width: 100%;
    background-color: darkblue;

    nav {
        display: flex;
        flex-direction: row;

        justify-content: space-between;

        padding: 15px 30px;

        a, a:visited {
            color: white;
            font-style: normal;
            font-size: larger;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .home-link {
            font-weight: bold;
        }

        ul {
            justify-content: space-evenly;
            list-style: none;
            align-items: center;
            display: flex;
            flex-direction: row;
            gap: 25px;
            margin: 0px;
            padding: 0px;
        }
    }
}

footer {
    nav {
        ul {
            justify-content: space-evenly;
            width: 100%;
        }
    }
    margin-top: 15px;
}

header {
    margin-bottom: 15px;
}

main {
    min-height: calc(100vh - 138px);

    a, a:visited {
        color: blue;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }
}

@media only screen and (max-width: 442px) {
    header, footer {
        nav {
            flex-direction: column;
            align-items: center;

            gap: 15px;

            ul {
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }
        }
    }

    main {
        min-height: calc(100vh - 270px);
    }

}

@media only print {
    main {
        min-height: 0px;
    }
}