:root {
    --light: #fafdff;
    --blue: #329ffe;
    --dark: #183667;
    --blue-overlay: rgb(50 159 254 / 85%);
    --light-gray: #eff6ff;
}

body {
	color: var(--dark);
	font-family: 'Roboto', sans-serif;
	background-color: var(--light);
}

h1, h2, h3 {
    font-family: 'Lemon Milk bold';
    color: var(--blue);
}

.ccm-page {
    display: inline-block;
    width: 100%;
}

label {
    font-weight: bold;
    font-size: 1.2rem;
}

label.is-invalid {
    color: #cb3847;
}

a,
a.btn-link {
	color: var(--blue);
	text-decoration: none;
}

a:hover,
a.btn-link:hover {
	text-decoration: underline;
    color: var(--dark);
}

.btn {
	border-radius: 0px;
	font-size: 1.2rem;
	padding-left: 2rem;
	padding-right: 2rem;
    padding-bottom: 0.4rem;
    padding-top: 0.6rem;
	transition: all 0.3s ease;
}

.btn-primary, .ccm-block-feature-link-text .btn- {
	background-color: var(--tahti-orange);
	border-color: var(--tahti-orange);
	color: var(--light);
}

.bg-img { 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#siteLogo {
    height: 80px;
    width: auto;
	padding: 10px 0px;
}

#siteName {
    padding-left: 15px;
    font-family: Lemon Milk;
    font-weight: 800;
}

nav.navbar a,
a.navbar-brand,
h1, h2, h3,
.h1, .h2, .h3,
.btn {
	font-family: 'Lemon Milk medium', cursive;
}

#frontPagePicks h1,
#frontPagePicks h2,
#frontPagePicks h3,
#frontPagePicks h4,
#frontPagePicks h5 {
	color: var(--light);
}

.small, small {
    font-size: 0.3em;
}

h1 {
	font-size: 3rem;
}

a:not(#frontPagePicks):not(.nav-link):hover {
    text-decoration: none;
    color:var(--blue);
    opacity: 0.7;
}

#mainNav a.navbar-brand:hover {
	color: var(--light);
	opacity: .7;
}

/* Inputs*/

.label-top-margin { /* if we need to line button with inputs with labels */
    margin-top: 32px;
}

input, input.form-control,
textarea, textarea.form-control,
select, select.form-select {
    border-radius: 0;
    background-color: var(--light-gray);
    border-color: var(--light-gray);
    font-weight: 400;
}

input.form-check-input,
.form-check-input[type=checkbox] {
    border-radius: 0;
    border: 0px solid transparent;
    background-color: var(--light-gray);
}

.form-check-input:checked {
    background-color: var(--blue);
    border-color: transparent;
}

button, button.btn, a.btn {
    border: 0px solid transparent;
    border-radius: 0;
    font-family: 'Lemon Milk medium';
}

.btn-primary{
    background-color: var(--dark);
    color: var(--light);
}

nav.navbar {
	padding: 0px;
    background-color: var(--blue);
    z-index: 3;
}

.nav-container {
    width: 80vw;;
}

nav.navbar a {
    font-family: 'Lemon Milk light';
    font-size: 1em;
    padding: 2rem;
    color: var(--light);
}

nav.navbar a.dropdown-item {
    color: var(--light);
    padding: 10px;
}

.nav-item ul.dropdown-menu {
    background-color: var(--blue);
}

nav.navbar a.nav-link:hover {
    color: var(--light);
    text-decoration: none;
}

nav.fade-nav {
    background-color: transparent;
    margin-top: -20px;
}

.fade-nav:has(.navbar-collapse.show) {
    background-color: var(--blue);
}

.nav-item.dropdown a {
    color: var(--light);
}

.nav-item ul.dropdown-menu {
    width: 100%;
    border-radius: 0px;
    margin-top: 0px;
    padding: 0px;
    margin: 0;
    border: none;
}

.nav-item.dropdown:hover a{
    color: var(--light)
}


#toastLand {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
}

section {
	position: relative;
}

section p:last-of-type {
	margin-bottom: 0px;
}

#landingHeader {
    min-height: 80vh;
    margin-top: -145px;
    text-shadow: 0px 4px 7px #22376685;
}

#landingHeader .container {
    margin-top: 25vh;
    color: var(--light);
    font-weight: 100;
    font-size: 1.2em;
}

#landingHeader h1,
#landingHeader h2,
#landingHeader h3 {
    color: var(--light);
}

.frontpage-article-item {
    color: var(--light);
    min-height: 30vh;
    width: 100%;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.frontpage-article-item h3 {
    color: var(--light);
}

.vaara-containter {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

#frontPagePicks:hover {
    text-decoration: none;
}

#frontPagePicks .col-md-4, #frontPagePicks .col-12 {
    padding: 0;
}

.card,
.list-group {
    border-radius: 0px;
}

/* Footer */

footer {
    background-color: var(--dark);
    color: var(--light);
	font-size: 2rem;
	position: relative;
	float: left;
	width: 100%;
    font-family: 'Lemon Milk bold';
}

footer #footerLogoRow {
	margin-top: -8rem;
}

#koodersRef {
    font-size: 1rem;
    font-family: 'Lemon Milk regular';
}

/* Back to Top */
#backToTop {
    position: fixed;
    right: -2px;
    bottom: 20px;
    padding: 5px 15px;
    font-size: 2rem;
    background-color: var(--blue);
    color: var(--light);
    border-radius: 0px;
    border: 2px solid var(--blue);
    transition: all 0.3s ease;
    z-index: 100;
}

#backToTop:hover {
    padding: 5px 30px 5px 15px;
}

#backToTop.hiding {
    right: -90px;
}

/* Mobile and smaller screens */

@media (max-width: 991px) {
    .navbar-toggler {
        border-radius: 0px;
        border: 2px solid var(--dark);
        color: var(--dark);
        font-size: 2rem;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding: .5rem 1rem;
    }

    .navbar-nav .nav-link.active {
        border-bottom: none;
    }

    #loginArea a {
        color: var(--light);
        background-color: var(--tahti-orange);
    }

    footer #footerLogoRow {
        margin-top: -6rem;
    }

    footer p:last-of-type {
        margin-bottom: 0px;
    }

    #pageHero {
        height: auto;
    }

    section#pageHero + section {
        margin-top: 0px;
    }

    .lightbox {
        box-shadow: none;
    }

    .star-row-top-border {
        width: 300px;
    }

    .star-row-top-border img {
        width: 60px;
    }

    #contentHeader {
        margin-top: -485px;
        margin-bottom: 0px;
    }

    footer p {
        font-size: 1.2rem;
    }
}

@media (max-width: 500px){
    #sarakeSisalto h4 {
        font-size: 1.2rem;
        font-weight: 700;
    }
}

/* Users */

.user-card .progress {
    border-radius: 0px;
}

/* Fontit / Fonts */

@font-face {
    font-family: 'Lemon Milk';
    src: url('../fonts/LemonMilkRegular.otf');
    font-weight: 400;
}

@font-face {
    font-family: 'Lemon Milk medium';
    src: url('../fonts/LemonMilkMedium.otf');
	font-weight: 600;
}

@font-face {
	font-family: 'Lemon Milk bold';
	src: url('../fonts/LemonMilkBold.otf');
	font-weight: 800;
}

@font-face {
    font-family: 'Roboto thin';
    src: url('../fonts/Roboto-Thin.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto medium';
    src: url('../fonts/Roboto-Medium.ttf');
    font-weight: 500;
}

.bgImg { 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#siteLogo {
    height: 80px;
    width: auto;
}

#toastLand {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
}

.toast {
    border-radius: 0px;
}

/* Inputs*/

.label-top-margin { /* if we need to line button with inputs with labels */
    margin-top: 32px;
}

.user-card.user-deactivated {
    opacity: 0.5;
}

.user-card .btn-group .btn {
    border-radius: 0px;
}

.user-card .progress {
    border-radius: 0px;
}

.navbar-toggler {
    border: transparent;
    color: var(--light);
}

/* Back to Top */
#backToTop {
    position: fixed;
    right: -2px;
    bottom: 80px;
    padding: 5px 15px;
    font-size: 2rem;
    background-color: var(--dark);
    color: var(--light);
    border-radius: 0px;
    border: 2px solid var(--dark);
    transition: all 0.3s ease;
    z-index: 100;
}

#backToTop:hover {
    padding: 5px 30px 5px 15px;
}

#backToTop.hiding {
    right: -80px;
}

@media (max-width: 991.98px) { 
    h1 {
        font-size: 2rem;
    }

    #siteName {
        display: none;
    }

    #landingHeader{
        min-height: 60vh;
    }
    
    #landingHeader .container {
        text-align: center;
    }

    nav.navbar a {
        padding: 1.2rem;
    }

    .nav-container {
        width: 100vw;
    }
    .navbar-collapse.collapse.show{
        background-color: var(--blue);
    }
}

/* Fontit / Fonts */

/* @font-face {
    font-family: 'SpaceGrotesk';
    src: url('../fonts/SpaceGrotesk-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: 'SpaceGrotesk';
    src: url('../fonts/SpaceGrotesk-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'SpaceGrotesk';
    src: url('../fonts/SpaceGrotesk-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'SpaceGrotesk';
    src: url('../fonts/SpaceGrotesk-SemiBold.ttf');
    font-weight: 600;
}

@font-face {
    font-family: 'SpaceGrotesk';
    src: url('../fonts/SpaceGrotesk-Bold.ttf');
    font-weight: 700;
} */