@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";
:root{
    /*colours standards*/
    --primaryColour: #800000;
    --secondaryColour: #982B1C;
    --tertiaryColour: #DAD4B5;
    --quaternaryColour: #F2E8C6;
}

body::-webkit-scrollbar {
    display: none;
}

html {
    scrollbar-width: none;
}

.page{
    background-color: BLACK;
}

.modalHeader{
    color: var(--green);
}

.modalbody{
    color: var(--lightgreen);
}

.modalTekst{
    color: var(--tekstcolour);
}

.header{
    background-color: var(--primaryColour);
    height: 25vh;  /* Set the total height of the header */
    display: flex;
    align-items: center;  /* Vertically centers the content */
    justify-content: center;  /* Horizontally centers the content */
}

.headerImage{
    height: 80%;  /* Image will occupy 80% of the header height */
    margin-top: 0;  /* Remove top margin */
    margin-bottom: 0;  /* Remove bottom margin */
    margin-left: 5%;
    margin-right: 5%;
}

.headerText{
    color: var(--tertiaryColour);
    margin-right: 5%;
    text-overflow: ellipsis;
}

.registerForm{
    color: var(--tertiaryColour);
    display: flex;
    width: 80%;
    height: 95%;
    flex-direction: column;
    text-align: center;
}

.registerFormInputField{
    text-align: center;
    width: 60%;
    align-self: center;
}

.body{
    background-color: var(--quaternaryColour);
    height: 100vh;
}

body::-webkit-scrollbar {
    display: none;
}

html {
    scrollbar-width: none;
}

.boxRow{
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    margin-top: 3rem;
}

.customBox {
    background-color: #dad4b527;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); /* Small shadow on the bottom right */
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for both shadow and position */
    border-radius: 40px;
    margin-bottom: 0;
    width: clamp(30%, 30%, 40%);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    will-change: transform;
}

.customBox:hover {
    box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.4); /* Slightly stronger shadow on hover */
    transform: translateY(-2vh) translateX(-2vh);
}

.formZIndex{
    z-index: 1000;
}

.boxTitle{
    color: var(--secondaryColour);
    display: flex;
    font-size: x-large;
    justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
    text-align: center;
    padding-bottom: 5%;
}

.customModalCard{
    width: 80%;
    height: 80%;
    z-index: 500;
}

.customFormModalFooter{
    background-color: var(--primaryColour);
}

.boxModalGeneration{
    z-index: 100 !important;
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

.customModalHeader{
    color: var(--tertiaryColour);
    background-color: var(--primaryColour);
}

.customModalBody{
    background-color: var(--secondaryColour);

    /* fix bug in bulma door background tegroot te maken */
    z-index: 102;
    margin-top: -1px;
    margin-bottom: -1px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
}

.customModalTitle{
    color: var(--tertiaryColour);
}

.customBoxImage{
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    border-top-left-radius: inherit; /* Matches the card's top-left corner */
    border-top-right-radius: inherit; /* Matches the card's top-right corner */
    display: block;
}

.customModalBackground{
    width: 100% !important;
    z-index: 105;
    top: 0 !important;
    left: 0 !important;
    position: fixed !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
}

.customModalImage{
    width: 35%;
    margin-right: 10%;
}

.customModalText{
    width: 55%;
    color: var(--tertiaryColour);
    font-size: large;
    white-space: pre-wrap;
    max-height: 100%;
    overflow-y: auto;
}

.customModalText::-webkit-scrollbar{
    width:8px;
    margin-left: 10%;
}

.customModalText::-webkit-scrollbar-track {
    border-radius: 10px;
    border-color: var(--primaryColour);
    background-color: var(--tertiaryColour);
}

.customModalText::-webkit-scrollbar-thumb {
    background: var(--primaryColour); /* Scrollbar color */
    border-radius: 10px; /* Rounded corners */
}

.customModalFooter{
    background-color: var(--primaryColour);
}

.customModalButton{
    background-color: var(--tertiaryColour);
    color: var(--primaryColour);
    font-size: large;
}

.footer{
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: var(--primaryColour);
    justify-content: center;
    text-align: center;
    margin-top: 3rem;
}

.footer_data{
    width: 33%;
    color: var(--tertiaryColour);
}

.customFooterInhoud{
    display: flex;
    width: 100%;
    flex-direction: row;
    background-color: var(--primaryColour);
    text-align: center;
}

.footerSubtext{
    padding-top: 5%;
    color: var(--tertiaryColour);
}

.footerLink{
    color: var(--tertiaryColour);
}

@media (min-width: 901px) and (max-width: 1150px){
    .headerText{
        font-size: small;
        text-align: center;
    }

    .boxTitle{
        color: var(--secondaryColour);
        display: flex;
        font-size: large;
        justify-content: center;
        padding-left: 5%;
        padding-right: 5%;
        text-align-last: center;
        padding-bottom: 5%;
    }
}

@media (min-width: 100px) and (max-width: 900px) {
    .boxRow {
        display: flex;
        flex-direction: column;
        margin-top: 0;
    }

    .customBox{
        width: 80%;
        margin-left: 10%;
        margin-top: 3rem;
    }

    .boxTitle{
        color: var(--secondaryColour);
        display: flex;
        font-size: medium;
        justify-content: center;
        padding-left: 5%;
        padding-right: 5%;
        text-align-last: center;
        padding-bottom: 5%;
    }

    .header{
        flex-direction: column;
    }

    .headerText{
        margin-left: 0;
        margin-right: 0;
        font-size: x-small;
        text-align: center;
    }

}