/* 
VÄRIT:
#05A3F0 (tummin)
#67CCFD 
#94DCFF
#C7EDFF
#FFFFFF (valkoinen)

#013787
#3FBEFB
#0062F3
#3987F9
#C9EDFE
*/

html,
body {
    height: 100%;
    background-color: #013787 !important;
}

header,
footer {
    background-color: #67CCFD !important;
}

header>h1 {
    margin-bottom: 0px !important;
}

footer>div>nav>ol {
    background-color: #67CCFD !important;
}

footer>div>nav>ol>li>a {
    text-decoration: none !important;
    color: #013787 !important;
}

footer>div>nav>ol>li>a:hover {
    color: white !important;
    background-color: black !important;
}

p {
    font-size: 18px !important;
}

/* OMAT LUOKAT */

.sivulinkit {
    background-color: #0278B1 !important;
}

.sivulinkit>.sticky-md-top {
    top: 64px !important;
}

.sivulinkit>.sticky-md-top>nav>ul>li>a {
    font-size: 18px !important;
    color: white !important;
}

.sivulinkit>.sticky-md-top>nav>ul>li>a:hover {
    background-color: black !important;
}

.pääsisältö {
    background-color: #94DCFF;
}

.kappale {
    text-align: justify;
}

.kuva {
    max-height: 400px;
}

.kuva2 {
    max-height: 300px;
}

.captionblack {
    color: black !important;
    text-align: center;
}

.laatikko {
    background-color: white;
}

/* CUSTOM FONTS */

.caveat {
    /* The House of Da Vinci */
    font-family: 'Caveat', cursive;
    font-size: 45px;
}

.amatic {
    /* Little Nightmares */
    font-family: 'Amatic SC', cursive;
    font-size: 45px;
}

.archivo {
    /* Alien: Isolation */
    font-family: "Archivo Black", sans-serif;
    font-size: 45px;
}

.audiowide {
    /* Terminator: Resistance */
    font-family: 'Audiowide', cursive;
    font-size: 45px;
}

.bebas {
    /* Resident Evil */
    font-family: 'Bebas Neue', sans-serif;
    font-size: 55px;
}

.bellefair {
    /* Spirit of the North */
    font-family: "Bellefair", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 45px;
}


.cinzel-400 {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.cinzel-500 {
    /* The Talos Principle */
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.creepster {
    /* Layers of Fear */
    font-family: 'Creepster', cursive;
    font-size: 45px;
}

.kalam {
    /* Indiana Jones and the Fate of Atlantis */
    font-family: "Kalam", cursive;
    font-size: 45px;
}

.jolly {
    /* Amnesia games */
    font-family: 'Jolly Lodger', system-ui;
    font-size: 55px;
}

.mate {
    /* The Elder Scrolls V: Skyrim */
    font-family: "Mate", serif;
    font-size: 45px;
}

.racingfont {
    /* F-1 Spirit */
    font-family: 'Racing Sans One', cursive;
    font-size: 45px;
}

.rubik {
    /* Observer */
    font-family: 'Rubik Glitch', cursive;
    font-size: 45px;
}

.rubik2 {
    /* The Goonies */
    font-family: "Rubik Burned", system-ui;
    font-size: 55px;
}

.rubik3 {
    /* Minecraft */
    font-family: 'Rubik Dirt', cursive;
    font-size: 45px;
}

.pt-serif-regular {
    /* Hollow Knight: Silksong */
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 45px;
}

.pt-serif-bold {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: normal;
}

.pt-serif-regular-italic {
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: italic;
}

.pt-serif-bold-italic {
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: italic;
}

.tektur {
    /* Ghost 1.0 */
    font-family: 'Tektur', cursive;
    font-size: 45px;
}

.trade-winds-regular {
    /* Summer of '58 */
    font-family: "Trade Winds", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 45px;
}


.walter {
    /* DARQ */
    font-family: "Walter Turncoat", cursive;
    font-size: 45px;
}


/* Kaiken varalta, jos teet dropdown-listan
.lista > li > a:hover {
    background-color: #c0c0c0;
}
*/

@media (max-width: 767.98px) {
    .logo {
        max-height: 250px;
    }
}