:root {
        --yellow-color: #ffdf00;
        --black-color: #0a1014;
        --grey-color: #dedfe0;
        --back-color: #001d39;
        --border-color: #f3f3f3;
        --blue-color: #f0f9ff;
        --btn-color: #3E52FF;
        --btn-text-color: #ffffff;
        --btn-color-hover: #2e41e7;
        --btn-color-active: #2e41e7;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Base font size 10px (0.625rem) */
    font-size: 0.625rem;
}

@media (max-width: 375px) {
    html {
        /* Small screen base font size 8px (0.5rem) */
        font-size: 0.5rem;
    }
}

body {
    background-color: #FFFAF4;
    color: #fff;
    /* letter-spacing: 1.05px; */
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    /*
    Set BODY-font to 2x HTML-font.
    This way we still keep the rem at 8px or 10px while still having a bigger base font.
    For screen up to 375px = 8px x 2rem = 16px.
    For screen over = 10px x 2rem = 20px.
    */
    font-size: 2rem;
    font-size: 18px;
    position: relative;
}

/*
For Mamma Mia, add their wall structure background by having an empty before-element covering the
entire page with background image and reduce opacity to allow the page background color to tint it.
Page contents need to be in a container with position relative to go above this.
*/
body::before {
    content: '';
    background-image: url('./images/wall-structure.jpg');
    background-repeat: repeat;
    background-size: contain;
    background-position: top left;
    height: 100%;
    width: 100%;
    display: block;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.25;
    }

a, a:visited {
    color: var(--blue-color);
    text-decoration: underline;
}

a:hover {
    color: var(--grey-color);
}

a:active {
    color: #fff;
}

h6 {
    font-size: 1.1rem;
}

/*
p, label, h2, dl, dt, .formsection div {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3), -1px 1px 3px rgba(0,0,0,0.3);
}
*/

@media (max-width: 600px) {
    h2 {
        font-size: 2.7rem;
    }
}

img {
    max-width: 100%;
    height: auto;
}

/*
canvas,
.welcome,
.container,
h1,
h3,
p,
.countdown,
.countdown div,
.countdown span,
.modal {
    background: transparent;
    padding: 0;
    margin: 0;
}
*/

.modal-dialog div,
.modal h5,
.modal span {
    background: white;
}

.modal-body, .modal-body p {
    color: #000;
    text-shadow: none;
}

.modal-body a, .modal-body a:hover, .modal-body a:active {
    color: #00f;
}

/* The entire content is in a .container div */
.container {
    max-width: 800px;
    background-color: var(--back-color);
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* The header inside the .container */
.header {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: --back-color;
}

/*
Fade the header into the background colour of the text container.
Adjust height to decide how high the fade is.
Height is reduced for small screens.
*/
.header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: --back-color;
    background: linear-gradient(0deg, #001d39 30%, rgba(255,255,255,0) 100%);
    /* background: linear-gradient(0deg, #ffffff 30%, rgba(255,255,255,0) 100%); */
    height: 20rem;
}
@media (max-width: 900px) {
    .header::after {
        height: 10rem;
    }
}

/*
The background image in the header.
An empty element with a background image that sets and takes up the space of the entire header.
Remember to change the aspect-ratio to match the image dimensions.
This will be scaled with a transform to animate on page load.
*/

.header>.header-background {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-image: url("images/mammahead.jpg");
    background-repeat: no-repeat;
    background-color: #001d39;
    background-size: cover;
    background-position: 50% 40%;
    animation: header-background-animation 2s ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0.2;
    transform: scale(1);
}

@keyframes header-background-animation {
    0% {
        opacity: 0.2;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* The NeH logo on top of the header */
.logo-image {
    position: absolute;
    left: 13%;
    top: 0%;
    transform: translate(-50%, 0%);
    width: 10%;
}
@media (max-width: 600px) {
    .logo-image {
        width: 10%;
    }
}

/* Text above the main logo. Removed */
/*
.mm-welcome {
    position: absolute;
    text-align: center;
    left: 0;
    top: 10%;
    width: 100%;
    font-size: 3rem;
    animation: mm-welcome-animation 2s ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0;
    text-shadow: #000 1px 1px 5px, #000 -1px 1px 5px;
}
@media (max-width: 900px) {
    .mm-welcome {
        font-size: 1.8rem;
    }
}
@keyframes mm-welcome-animation {
    0% {
        opacity: 0;
        transform: scale(0.75);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
*/

/*
A logo image placed absolute on top of the header background. Animated independently.
Centerd with left 50% + translateX(-50%) so the translate need to be in the animation.
*/
.mm-logo-image {
    position: absolute;
    left: 50%;
    top: 14%;
    width: 70%;
    animation: mm-logo-image-animation 2s ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0.2;
    transform:
        translateX(-50%) translateY(0)
        translate3d(0, 0, 0)
        scale(1.20);
}

/* A nice wobble animation while scaling and fading */
@keyframes mm-logo-image-animation {
    from {
        opacity: 0.2;
        transform:
            translateX(-50%) translateY(0)
            translate3d(0, 0, 0)
            scale(1.20);
    }

    15% {
        transform:
            translateX(-50%) translateY(0)
            translate3d(-5%, 0, 0)
            rotate3d(0, 0, 1, -1deg)
            scale(1.15);
    }

    30% {
        transform:
            translateX(-50%) translateY(0)
            translate3d(4%, 0, 0)
            rotate3d(0, 0, 1, 1deg)
            scale(1.10);
    }

    45% {
        transform:
            translateX(-50%) translateY(0)
            translate3d(-3%, 0, 0)
            rotate3d(0, 0, 1, -3deg)
            scale(1.05);
    }

    60% {
        transform:
            translateX(-50%) translateY(0)
            translate3d(2%, 0, 0)
            rotate3d(0, 0, 1, 0.5deg)
            scale(1.00);
    }

    75% {
        transform:
            translateX(-50%) translateY(0)
            translate3d(-1%, 0, 0)
            rotate3d(0, 0, 1, -0.5deg)
            scale(1.00);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%) translateY(0)
            translate3d(0, 0, 0)
            scale(1.00);
    }
}

/*
A headline text sitting on the fadeout of the header image.
Adjusted in size for different screen widths.
*/
.header-text {
    z-index: 1;
    position: absolute;
    /*
    width: 100%;
    left: 0%;
    right: 0%;
    text-align: center;
    */
    bottom: 5%;
    /* font-family: "bodoni-urw", serif; */
    font-family: futura-pt-bold, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 7rem;
    /* letter-spacing: 2px; */
    line-height: 1;
    color: #FDFFFE;
    text-shadow: #000 1px 1px 5px, #000 -1px 1px 5px;
    opacity: 0.95;
    /* text-transform: uppercase; */
    left: 50%;
/*
    transform: translateX(-50%) scale(0.6, 1);
*/
    transform: translateX(-50%);
    white-space: pre;
    overflow: hidden;
}
@media (max-width: 600px) {
    .header-text {
        font-size: 4.5rem;
    }
}
@media (max-width: 400px) {
    .header-text {
        font-size: 4rem;
    }
}
@media (max-width: 330px) {
    .header-text {
        font-size: 3rem;
    }
}


/*
The container for the actual page text inside the .container, after header.
Reduce margins for small screens.
*/
.text-container {
    width: 100%;
    padding: 1rem 5rem 5rem;
}
@media (max-width: 640px) {
    .text-container {
        padding: 1rem 15px 15px;
    }
}

/*
Images in the text block.
Add a border, center the image on the page and make sure it
takes up space.

When .visible is added by js the image animates in to the page.

Add .pbright to make the image float to the right of the text.
*/
.photo-box-wrap {
    display: grid;
}
.photo-box {
    justify-self: center;
    overflow: hidden;
    text-align: center;
    border: 0.5rem solid #ffffee;
    margin: 2.5rem 0.5rem;
    opacity: 0;
    transform: scale(0.8) rotate(-8deg);
}
.photo-box.pbright {
    float: right;
    transform: translateX(10rem) rotate(8deg);
}
.photo-box.visible {
    animation: mm-photo-box-animation 2s ease-out forwards;
}
.photo-box.pbright.visible {
    animation: mm-photo-box-r-animation 2s ease-out forwards;
}
.photo-box a {
    display: block;
}
.photo-box img {
    width: 50vw;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@keyframes mm-photo-box-animation {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(3deg);
    }
}

@keyframes mm-photo-box-r-animation {
    0% {
        opacity: 0;
        transform: translateX(10rem) rotate(8deg);
    }
    100% {
        opacity: 1;
        transform: translateX(2rem) rotate(3deg);
    }
}

.video-image {
    width: 100%;
}

@media (width > 792px) {
    .video-image {
        max-width: 350px;
    }
}

/* Definition list with separate lines */
dl.dl_list > dt {
    margin: 0 2em 0 0;
    font-weight: bold;
}
dl.dl_list > dd {
    margin: 0 3em 1.5em 1em;
}
@media (max-width: 768px) {
    dl.dl_list > dd {
        margin: 0 0.5rem 1.5em 1em;
    }
}

/* Definition list as columns with topic on same line */
dl.dl_column {
    display: grid;
    grid-gap: 4px 16px;
    grid-template-columns: max-content;
}
dl.dl_column > dt {
    font-weight: bold;
}
dl.dl_column > dd {
    grid-column-start: 2;
}

/* FORM */

hr {
    border-top: 1px solid rgba(255, 255, 255, 0.6);
}

/*
.custom-radio .custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--yellow-color);
    background-color: var(--yellow-color);
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--yellow-color);
    background-color: var(--yellow-color);
}
*/

.pointer {
    cursor: pointer;
}

.error {
    margin: 2rem;
    padding: 1rem;
    border: 5px solid #ff001e;
    color: #ffffff;
    text-align: center;
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.5), -1px 1px 3px rgba(0,0,0,0.5); */
}

.success {
    margin: 2rem;
    padding: 1rem;
    border: 1px solid #21ee3f;
    color: #21ee3f;
    text-align: center;
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.5), -1px 1px 3px rgba(0,0,0,0.5); */
}

span.required {
    opacity: 0.5;
}

.form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label {
    color: #f00;
    /* background-color: #fff; */
    text-shadow: none;
    /* text-shadow: 2px 2px 8px rgba(255,255,255,1), -2px 2px 8px rgba(255,255,255,1); */
}

.form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label {
    color: #21ee3f;
    /* text-shadow: 2px 2px 8px rgba(255,255,255,1), -2px 2px 8px rgba(255,255,255,1); */
}

.invalid-feedback.invalid-feedback.invalid-feedback {
    color: #f00;
    /* background-color: #fff; */
    text-shadow: none;
    /* text-shadow: 2px 2px 8px rgba(255,255,255,1), -2px 2px 8px rgba(255,255,255,1); */
    padding: 3px;
}

.form-control {
    font-size: 2rem;
    height: calc(3.25rem + 2px);
    padding: .375rem .75rem;
}

.form-group {
    margin-bottom: 1rem;
}

.btn {
    border-radius: 0px;
    padding: 10px 0px;
}

.btn-primary {
    background-color: var(--btn-color);
    color: var(--btn-text-color);
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 1rem;
}

.btn-primary.btn-primary:hover {
    background-color: var(--btn-color-hover);
    color: var(--btn-text-color);
}
.btn-primary.btn-primary.btn-primary.btn-primary:active {
    background-color: var(--btn-color-hover);
    color: var(--btn-text-color);
}

.btn-primary.disabled, .btn-primary:disabled {
    background-color: #adadad;
    color: #ffffff;
    color: #292562;
}

.btn-secondary {
    background-color: var(--yellow-color);
    color: #fff;
    color: #292562;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn-secondary:hover {
    background-color: var(--yellow-color);
    color: #fff;
    color: #292562;
}

a.btn.loading::after, button.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid rgba(0, 0, 0, 0);
    border-top-color: #f9f7ec;
    border-radius: 50%;
    animation:button-loading-spinner 1s ease infinite
}

a.btn.loading, a.btn.loading:hover, a.btn.loading:active, button.btn.loading, button.btn.loading:hover, button.btn.loading:active {
    /* color:rgba(255, 255, 255, 0) */
    color: #292562;
}

@keyframes button-loading-spinner {
    from {
        transform:rotate(0turn)
    }

    to {
        transform:rotate(1turn)
    }
}

input.changed {
    background-color: #ffa;
}