:root {
    --kleur1: #0b0808;
    --kleur2: #f6f0dd;
}
.has-background-black{
    background-color: #40443F!important;
    
}
.taon{
    font-family: "Caveat", cursive;
}
.taonColor{
    color: #adbaaa;
}
#mainBanner {
    height: 100vh;
}

#navbarOpenButton {
    background-color: white;
}

.no-pointer {
    pointer-events: none;
}
.is-btncolor{
    background-color: var(--kleur1);
    color: var(--kleur2);
}
h2,
h3,
h4 {
    font-family: "Caveat", cursive;

}
.standardfont{
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
h2 {
    font-size: 3rem;
    font-weight: 400;
}

h3 {
    font-size: 2.25rem;
    font-weight: 400;
}

#standardHeaderNavbar {
    background-image: url("../images/Logo.jpg");

}

.largeLogo img {
    width: auto;
    height: 6vh;
    max-height: 10vh;
}

hr {
    background-color: grey;
}

#snackbar {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: var(--kleur1);
    color: var(--kleur2);
    padding: 15px;
    border-radius: 5px;
    z-index: 1;
}

#bannerLeftImg {
    width: 20vw;
    height: 100%;


}

.cookiemodalbackground{
    background-color: var(--kleur2);
    color: var(--kleur1);
}
.cookiemodalbackground{
    width: 22rem;
    height: auto;
    overflow: hidden;
    border:1px solid grey ;

    position: fixed;
  bottom: 50px;
  left: 20px;
  z-index: 1000;
  pointer-events: auto;
}
.cookiemodalbackground .modal-content {
    width: 22rem;
    height: auto;
}

/* Basisstijl voor de knop */
#detailBtn {

    color: #40443F;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border: 2px solid #40443F;
    transition: color 0.8s, border-color 0.3s;
}
#detailBtn:hover{
    background-color: #40443F;
    border-color: #fff;
    color: #fff;
}
/* Pseudo-element voor de onderstreep animatie */
#detailBtn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: #40443F;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.8s ease-out;
}

#bannerLogo{
    opacity: 70%;
    transition: transform 0.6s ease, opacity 0.6s ease;
}
#bannerLogo:hover {
    transform: scale(1.1);
    opacity: 1;
}

/* Animatie bij hover */
#detailBtn:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
.transparent-background {
    background-color: rgba(255, 255, 255, 0); /* Hier wordt de achtergrondkleur transparant gemaakt */
}

#ballAnimation {
    background: transparent !important;
}
#ballAnimation * {
    background: transparent !important;
}

/* Klassevolle micro-animatie */
.classy-animation {
    opacity: 0;
    transform: scale(0.8);
    animation: classy-animation-keyframes 2s ease forwards;
}

@keyframes classy-animation-keyframes {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes gradient-slide {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}
.floating-shadow {

    
    display: inline-block;
    background: linear-gradient(90deg, black, white, black);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-slide 3s infinite alternate linear;
}


/*MEDIA QUERIES*/

@media only screen and (max-width: 768px) {
    .cookiemodalbackground{
        bottom: 20px;
        width: 22rem;
        max-width: 90vw;
        height: auto;
        overflow: hidden;
        border:1px solid grey ;
    }
    .cookiemodalbackground .modal-content {
        max-width: 80vw;
        width: 22rem;
        height: auto;
    }
}

@media (max-width: 991px) {

    /*hier verandert de nav-item naar toggler*/
    #mainBanner {
        height: auto;
    }

    #squares {
        max-width: 50%;
        max-height: 50%;
        margin-right: 10%;
        margin-top: 1rem;
    }
    #ballAnimation{
        max-width: 50%;
        max-height: 50%;
        margin-right: 10%;
        margin-top: 1rem;
    }
}

@media screen and (max-width: 1023px) {
    .largeLogo img {
        width: 50vw;
        height: auto;
        max-height: 30vh;
    }

    .largeLogo {
        margin-left: auto;
        margin-right: auto;
    }
    .cookiemodalbackground{
      bottom: 80px;
    }

}

@media (min-width: 1023px) {
    #mainBanner {
        height: 100vh;
    }


    #details{
        margin-top: 10vh;
    }

}

@media (min-width: 1400px) {

    #bannerLeftImg {
        width: 30vw;
        height: 100%;
        margin-top: -2rem;
    }

    #navbarContainer {
        margin-left: 5vw;
    }

    #navbarSide {
        margin-left: 10vw;
    }

}