@charset "utf-8";
@import url('https://fonts.cdnfonts.com/css/rift');
/* CSS Document */ 
:root {
  --wit: rgba(249, 249, 249, 1); /* witgrijs */
  --donkergrijs: rgba(52, 58, 64, 1);
  --kleur1: rgba(0, 178, 194, 1); /* Turkoois blauw */
  --kleur2: rgba(234, 84, 69, 1); /* koraal rood */
  --kleur3: rgba(149, 16, 4, 1); /* Dark Red */
  --tekst-1: rgba(249, 249, 249, 1); /* witgrijs */
  --tekst-2: rgba(177, 100, 105, 1); /* Zacht rozeachtig */
  --tekst-3: rgba(209, 54, 111, 1); /* Framboos roze */
  --tekst-4: rgba(194, 69, 117, 1); /* Donker koraal */
  --font-size-base: 1.2rem; /* Adjust base font size */
  --bs-nav-link-font-size: 1.4rem;
  --default-spacing: 2rem;
}

html {
	height: 100%;
    margin: 0;
   
}
body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    
    font-size: 1.2rem;
    flex-grow: 1;
}

/* Zorg ervoor dat de main en footer correct worden geplaatst */
main {
    flex-grow: 1;
	
}

footer {
    flex-shrink: 0;
}

h1, h2, h3, h4, h5 {
  font-family: 'Rift', sans-serif;
  font-weight: 600;
}

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

a:hover {
  color: var(--kleur2);
  text-decoration: underline;
}

a:visited {
  color: mix(var(--kleur1), black, 20%);
}

a:active {
  color: darken(var(--kleur2), 10%);
}

.t1, .t2, .t3, .t4 {
  font-family: 'Rift', sans-serif;
  font-weight: 600;
}

.t1 {
  color: var(--tekst-1);
  font-size: 120%;
}

.t2 {
  color: var(--tekst-2);
  font-size: 90%;
}

.t3 {
  color: var(--tekst-3);
  font-size: 110%;
}

.t4 {
  color: var(--tekst-4);
  font-size: 105%;
}
.tw {
	color: var(--wit);
  
}
.bg-dark {
  background-color: var(--donkergrijs);
  padding: var(--default-spacing);
}
.std-padding {
  padding: var(--default-spacing);
}
.std-padding-b {
  padding-bottom: var(--default-spacing);
}

.fullbgimage {
    background-image: url(../images/Doek-main.jpg); /* Replace with your image URL */
    background-size: cover; /* Ensures the image covers the entire div */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center; /* Centers the image within the div */
}
@keyframes slideFromTop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideFromLeft {
    0% {
        transform: translateX(-100%); /* Start from the left */
        opacity: 0;
    }
    100% {
        transform: translateX(0); /* End at the original position */
        opacity: 1;
    }
}

@keyframes slideFromRight {
    0% {
        transform: translateX(100%); /* Start from the right */
        opacity: 0;
    }
    100% {
        transform: translateX(0); /* End at the original position */
        opacity: 1;
    }
}

.slide-in {
    animation: slideFromTop 1.5s ease-out;
    opacity: 0;
    animation-fill-mode: forwards;
}

.slide-in-left {
    animation: slideFromLeft 1.5s ease-out;
    opacity: 0;
    animation-fill-mode: forwards;
}

.slide-in-right {
    animation: slideFromRight 1.5s ease-out;
    opacity: 0;
    animation-fill-mode: forwards;
}
.rclockwise {
    transform: rotate(2deg);
}
.rcclockwise {
    transform: rotate(-2deg);
}
.spacerDiv {
    height: 0;
    overflow: hidden; /* Optional: Prevent any content from causing additional height */
}
.credits-image-container img {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
}

.credits-image-container {
  position: relative;
	height:150px;
}

/* ---------Speellijst------------- */
.speellijst-container {
	padding-left: var(--default-spacing);
}

.speellijst-container h2 {
	font-family: 'Rift', sans-serif;
  font-weight: 600;
}

.speellijst-container h3 {
	font-family: 'Rift', sans-serif;
  font-weight: 600;
}

.speeldata-item {}
.speeldata-item p {
	padding:0px;
	margin:0px;
}
.speeldatum {
	font-family: 'Rift', sans-serif;
	font-size:1.2rem;
	color: var(--wit);
}

.speellocatie {
	color: var(--wit);
	font-weight:800;
}

.plaats {
	color: var(--wit);
}

.speelstatus {
	color: var(--kleur3);
	font-size:.9rem;
}

.kaartverkoop-tekst {
	font-size: .8rem;
}

.kaartverkoop-opties {}


.button-reserveer {}


.kaartverkoop-telefoon {}

.kaartverkoop-uitleg {
	font-size: .8rem;
}

.kaartverkoop-waarschuwing {
	font-size: .8rem;
	margin:5px!important;
	padding:3px!important;
}

.button-reserveer {
	background-color: var(--kleur1)!important;
	border-color: var(--kleur1)!important;
	padding-top:1px;
	padding-bottom:1px;
}
.button-reserveer:hover {
	background-color: var(--kleur2)!important;
	border-color: var(--kleur2)!important;
	text-decoration: none;
}
.mailto-link {
    color: #007bff;
}

.mailto-link:hover {
    color: #0056b3;
}

.speellocatie a {
    color: #007bff;
}

.speellocatie a:hover {
    color: #0056b3;
}