html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body { height: 100vh; }

main {
    min-height: 70vh;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

svg {
    display: block;
    margin: auto;
}

.label {
    margin-top: 10px;
}

.crumb {
    text-transform: capitalize;
}


.imgbtn-container {
    position: relative;
}

.imgbtn-container img {
    display: block; /* Ensures the image doesn't have extra space below it */
    width: 100%; /* Ensure the image is full-width */
}

.imgbtn-container div {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important; /* Remove any default margin on the button */
}


.is-small-text {
    font-size: small;
}

.is-strong {
    font-weight: bold;
}

.is-draggable {
    position: fixed !important;
}

.is-drag-handler {
    cursor: move;
}

.is-button {
    cursor: pointer;
}

.is-button:hover {
    opacity: 0.7;
}


.is-top-layer {
    z-index: 9999;
}

.is-fullwidth {
    width: 100%;
}

.is-fullwidth > input,
.is-fullwidth > select,
.is-fullwidth > textarea {
    width: 100%;
}

.is-flex-vcentered {
    height: 100%;
    display: flex;  
    align-items: center;
}

.has-no-br {
    white-space: pre-wrap;
}


.has-margin {
    margin: 10px;
}

.has-margin-left {
    margin-left: 10px;
}

.has-margin-right {
    margin-right: 10px;
} 

.has-margin-top {
    margin-top: 10px;
} 

.has-margin-bottom {
    margin-bottom: 10px;
} 



.has-no-margin {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin: 0px !important;
}

.has-no-padding {
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding: 0px !important;
}


.has-no-top-corner {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.is-code {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    white-space: pre-wrap;
}



.justify {
    text-align: justify;
}

.text-bold {
    font-weight: bold;
}
.text-small {
    font-size: small;
}
.text-upper {
    text-transform: uppercase;
}


.scale-double {
    transform: scale(2);
    -webkit-transform: scale(2);
}

.scale-half {
    transform: scale(.5);
    -webkit-transform: scale(.5);
}

.preload {
    width: 0px;
    height: 0px;
}



.htmx-overlay {
    z-index: 9000;
    position: fixed;
    width: 33vw;
    max-height: 85vh;
}

.navbar-menu {
    text-transform: uppercase;
}


.caption {
    position: absolute;
    left: 0;
    bottom: 20%;
    width: 100%;
    text-align: center;
}

.captiontext {
    width: auto;
    border: var(--primary-color) solid 2px;
    
    border-radius: 10px;
    padding: 18px;
    font-size: 25px;
    letter-spacing: 10px;
    text-transform: uppercase;
}

.caption-s {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;

    padding: 18px;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--primary-color);
}

.loader {
    padding-top: 15vh;
    text-align: center;
    letter-spacing: 5px;
}



/*  --------- CHANGED ON MOBILE --------- */

.fadeOnScroll {
    transition: 1s;
}

.filler_illustration {
    height: 300px;
    max-height: 33vh;
    max-width: 50%;
    margin: 20px;
}

/*  --------- PARALAX IMAGES --------- */

.bgimg_min {
    height: 50vh;
    min-height: 50vh;
    max-height: 50vh;
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 1/1) {
    .bgimg,
    .fadeimg {
        position: relative;
        opacity: 1;
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 66vh;
        min-height: 66vh;
        position: relative;
        z-index: 10;
    }
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 1/1) {
    .bgimg,
    .fadeimg {
        position: relative;
        opacity: 1;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 66vh;
        min-height: 66vh;
        z-index: 10;
    }

}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg,
    .fadeimg {
        position: relative;
        top: 0;
        background-attachment: scroll;
        background-size: cover;
        height: 66vh;
        min-height: 66vh;
        z-index: 10;
    }

    .caption {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;

        padding: 18px;
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .fadeOnScroll {
        transition: 0.1s !important;
    }

    .filler_illustration {
        max-height: 33vh;
        width: 80vw;
    }
}

@media only screen and (max-device-width: 1024px) and (max-aspect-ratio: 1/1) {
    .bgimg,
    .fadeimg {
        position: relative;
        top: 0;
        background-attachment: scroll;
        background-size: cover;
        height: 45vh;
        min-height: 45vh;
        z-index: 10;
    }

    .filler_illustration {
        height: 50vh;
        max-width: 66vw;
    }
}


.fadeimg {
    -webkit-transition: opacity 800ms ease-out;
    -moz-transition: opacity 800ms ease-out;
    -o-transition: opacity 800ms ease-out;
    transition: opacity 800ms ease-out;
    z-index: 11 !important;
}

.hidden {
    visibility: hidden;
}
.rounded {
    border-radius: 10px;
}
.rounded-square {
    border-radius: 15%;
}
.round {
    border-radius: 50%;
}

.left {
    text-align: left !important;
}
.center {
    text-align: center !important;
}
.right {
    text-align: right !important;
}
.fullwidth {
    width: 100% !important;
}
.inline-block {
    display: inline-block;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}


@keyframes float1 {
    0% {
    transform: translatey(0px);
    scale: 1;
    }

    25% {
    transform: translatey(-10px);
    scale: 1.1;
    }
    50% {
    transform: translatey(-10px);
    scale: 1.1;
    }

    75% {
    transform: translatey(0px);
    scale: 1;
    }
    100% {
    transform: translatey(0px);
    scale: 1;
    }
}

@keyframes float2 {
    0% {
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.9);
    }

    25% {
    box-shadow: 0 25px 15px 0px rgba(0,0,0,0.4);
    }
    50% {
    box-shadow: 0 25px 15px 0px rgba(0,0,0,0.4);
    }

    75% {
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.9);
    }
    100% {
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.9);
    }
}


.floating-1 {
    animation: float1 10s infinite;
}

.floating-2 {
    animation: float2 10s infinite;
}






.is-primary-color {
    color: var(--primary-color);
}

.is-secondary-color {
    color: var(--secondary-color);
}

.is-warning-color {
    color: var(--warning-color);
}

.is-danger-color, .is-status-false {
    color: var(--danger-color) !important;
}

.is-success-color, .is-status-true {
    color: var(--success-color) !important;
}

.is-info-color, .is-status-none {
    color: var(--info-color);
}

.has-bg-status-true {
    background-color: var(--success-color);
}
.has-bg-status-false {
    background-color: var(--danger-color);
}
.has-bg-status-none {
    background-color: var(--info-color);
}


.errorlist {
    color: var(--danger-color);
}

.btn-icon {
    color: var(--secondary-color);
}
.btn-icon:hover {
    color: var(---color);
}
.btn-icon-disabled {
    color: var(--lightgrey-color);
}



.has-background {
    background-color: var(--content-background-overlay);
}

.has-hero-background {
    background: var(--hero-background);
}


.caption-s, .captiontext {
    color: #fff;
    background-color: rgba(52, 58, 64, 0.8);
}

.has-no-background {
    background: none;
}



.modal-card {
    color: var(--modal-text-color);
    background: var(--modal-bg-color);
}