@import "variables.css";

:root {
    --link-color: var(--primary);
    --link-color-hover: var(--primary-hover);
    --bs-link-hover-color: var(--primary-hover);
    --bs-nav-link-color: var(--primary);
    --bs-nav-link-hover-color: var(--primary-hover);
    --bs-nav-link-active-color: var(--primary);
}
.nav-link {
    color: var(--primary);
}

body {
    font-family: 'Neucha';
    background-color: var(--background-color);
    color: var(--text-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a.no-color {
    color: inherit;
    text-decoration: underline;
}

.site-header, .page-footer {
    background-color: var(--nav-background-color);
    color: var(--nav-link-color);
}

.site-header .navbar-nav .nav-link {
    color: var(--nav-link-color);
}

.site-header .navbar-nav .nav-link:hover {
    color: var(--nav-link-hover-color);
}

.navbar-toggler {
    border-color: #ffffff;
}

.nav-item {
    text-transform: uppercase;
    font-size: 1.5rem;
    padding: 8px;
}

h1 {
    text-transform: uppercase;
    letter-spacing: 4px;
    text-align: center;
    font-size: 3rem
}

h2 {
    letter-spacing: 4px;
    text-align: center;
    font-size: 2.5rem;
}

h3 {
    letter-spacing: 4px;
    text-align: center;
    font-size: 2rem
}

h4 {
    text-align: center;
    font-size: 1.75rem
}

h5 {
    text-align: center;
    font-size: 1.5rem
}

h6 {
    text-align: center;
    font-size: 1rem
}

p {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 3rem;
}

.table {
    color: var(--text-color);
}

p.btn-note {
    font-size: .8rem
}

.tosti-title {
    letter-spacing: 20px;
}

.drop-out-header {
    position: absolute;
    margin-top: -20px;
    margin-left: -60px;
}

.drop-out-header-mobile {
    position: absolute;
    margin-top: -20px;
}

.card {
    background-color: var(--card-background);
    color: var(--card-background-contrast);
}

.card-header, .modal-header {
    background-color: var(--card-background-shade);
}

.card-body, .modal-body {
    background-color: var(--card-background);
}

.card-footer, .modal-footer {
    background-color: var(--card-background-shade);
}

.close {
    color: var(--text-color);
}

.btn-ml {
    display: block;
    padding: 10px;
    max-width: 400px;
    margin: 40px auto;
    width: 100%;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-align: center;
    text-decoration: none !important;
}

a:hover {
    text-decoration: none;
}

.btn-on:hover {
    background-color: var(--button-hover-background);
    color: var(--button-hover-contrast);
    border-color: var(--button-hover-border-color);
}

.btn-ml h2 {
    width: 100%;
    text-align: center;
}

.btn-ml p {
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}

.btn-on {
    border: 1px solid var(--button-border-color);
    background-color: var(--button-background);
    color: var(--button-contrast);
    cursor: pointer;
}

.btn-off {
    border: 1px solid var(--button-disabled-background-color);
    background-color: var(--button-disabled-background-color);
    color: var(--button-contrast);
}

.loader {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 2px solid var(--text-color);
    border-bottom-color: var(--background-shade);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 767px) {
    .extra-margin-top-mobile {
        margin-top: 30px;
    }

    @media screen and (max-width: 500px) {
        h1 {
            font-size: 2.5rem;
        }
    }
}

.card a, .card a:hover, .card a:visited, .card a:active {
    color: unset;
}

.modal .form-text {
    color: unset;
}

/* QR button header, menu button header. */
.qr-button button, .hamburger-menu-button {
    padding: 10px 10px 7px 10px;
    background-color: var(--primary-shade);
    border-color: var(--primary-shade);
    color: var(--primary-contrast);
}

.qr-button button:hover, .hamburger-menu-button:hover, .qr-button button:focus, .hamburger-menu-button:focus {
    background-color: var(--primary-shade-hover);
    border-color: var(--primary-shade-hover);
}