::-webkit-scrollbar {
  width: 10px; /* adjust as needed */
}

/* Track */
::-webkit-scrollbar-track {
  background: #333; /* dark background color */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #555; /* dark color for scrollbar handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #777; /* lighter color on hover */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #555 #333; /* dark handle on dark track */
}

/* Firefox - Handle on hover */
*::-moz-scrollbar-thumb:hover {
  background: #777;
}


.oldPlayContent span{
  text-decoration: underline;
}

#btn_soldOut{
  border: 2px solid #1c3843!important;
  background-color: #000e1480!important;
  cursor:default!important;
}


/* Desktop */

@media only screen and (min-width: 769px) {

.mobile {
  visibility: hidden;
  position:absolute;
  z-index: -5;
}

:root {
/* Colors */
--brand-color: #68b1cc;
--black: #000e14;
--white: #fafffd;
color-scheme: dark;
/* Fonts */
--font-title: "Noto Sans Adlam", sans-serif;
--font-text: "Lato", sans-serif;
}

body {
background-color: white;
padding: 0;
margin: 0;
overflow-x: hidden;
font-family: "Noto Sans Adlam", sans-serif;

}

#back-to-top{
display: none;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 5;
}

#landingBox {
min-height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
position: relative;
}

#bgImg{
position:absolute;
width:100%;
height: 100%;
object-fit: cover;
z-index: -10;
background-color: #020106;
}


#mainNav {
width: 100%;
height: 20vh;

background-color: #0d0106dd;

font-size: 30px;
font-weight: 600;
color: white;
white-space: pre-line;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#mainNav img {
margin-top: 20px;
height: 50%;
}

#mainNav ol {
display: flex;
list-style: none;
margin: 25px 0 0;
}

#mainNav ol li {
margin: 0 1vw;
font-size: 15px;
}

#mainNav ol li :hover {
color: #7bc3de;
transition: color 0.25s ease;
}

#mainNav ol li a {
text-decoration: none;
color: inherit;
}

#landingContent {
display: flex;
align-items: center;

height: 80vh;
width: 100%;
}

#landingPoster {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

#landingPoster a{
height:80%;
}

#landingPoster img {
transform: rotate(2deg);
height: 100%;
-webkit-box-shadow: 1px 6px 35px 1px rgba(112, 112, 112, 1);
-moz-box-shadow: 1px 6px 35px 1px rgba(112, 112, 112, 1);
box-shadow: 1px 6px 35px 1px rgba(112, 112, 112, 1);
transition: 0.25s ease;
}

#landingPoster img:hover{
-webkit-box-shadow: 1px 6px 35px 1px rgb(184, 183, 183);
-moz-box-shadow: 1px 6px 35px 1px rgb(184, 183, 183);
box-shadow: 1px 6px 35px 1px rgb(184, 183, 183);
}

#landingText {
font-family: "Noto Sans Adlam", sans-serif;
color: white;

width: 100%;
height: 100%;
margin: 0 10%;

display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}

#landingTextBox {
padding: 4vh 6vh;
border-radius: 5px;
background-color: #001d29c0;

display: flex;
flex-direction: column;
margin-bottom:13vh;
max-width: 750px;
}

#landingText h2{
font-size: 35px;
display: flex;
margin-top: 13vh;
}

#landingText h2 p{
color: #68b1cc;
margin: 0 0 0 5px;
}

#landingText span{
text-align: justify;   
}



#volgOns {
margin: 0 0 10px;
color: #ffffff;
}

#landingSocialsBox{
margin-bottom:50px;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: radial-gradient(circle, rgba(0, 29, 41, 0.979), rgba(255, 0, 0, 0));
}

#landingSocials a{
text-decoration: none;
}


@keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(10px); /* Adjust bounce height */
}
}

#posterBox{
height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color:#000e14;
position:relative;
padding: 100px;
box-sizing: border-box;

background-image:url("../img/logo.svg");
background-size: 70%;
background-position: center;
background-repeat: no-repeat;
}

#posterOverlay{
width:100%;
height:100%;
background-color:#000e1484;
position: absolute;
z-index: 0;
}

#posterBox p{
    text-align: center;
    font-size: 18px;
}

#posterBox .blueText{
  color:#68b1cc;
}

#desktopPoster{
  height: 100%;
  margin: 50px 0;
  border-radius: 15px;
}

#posterBox a{
height: 75%;
width: fit-content;
z-index: 5;
}

#posterBox .posterInfo img{
  height: 75px;
    margin: auto;
    margin-top: auto;
     display: block;
    margin-top: 50px;
}

/* #posterBox img{
height: 100%;
transition: 0.5s ease;
-webkit-box-shadow: 1px 10px 46px 4px rgba(92,92,92,1);
-moz-box-shadow: 1px 10px 46px 4px rgba(92,92,92,1);
box-shadow: 1px 10px 46px 4px rgba(92,92,92,1);
} */

#posterBox button{
  display: inline-block;
    padding:10px 20px;
    background-color: #000e14;
    color: #fafffd;
    border:2px solid #68b1cc;
    border-radius:5px;
    text-align: center;
    text-decoration:none;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#posterBox button:hover {
  border-color:
#a2d729;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#posterBox .posterButtons{
margin-top: 50px;
z-index: 5;
}


#dateWrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.377);
  color: white;
  position: relative;
  padding: 100px;
  border-radius: 5px;
  backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
}

.green{
  color:#a2d729;
}

.dateTitle{
  padding: 0!important;
  margin-bottom: 25px;
}

#dateWrapper h2{
  margin:25px 0;
  max-width: 600px;
  text-align: center;
}

.dateTitle span:last-of-type{
    margin-bottom: 25px;
}

#dateSocials{
  margin:50px 0 0;
}

#dateWrapper a{
  text-decoration: none;
}

.dateSvg{
  margin-right: 25px;
}

#agendaBox {
width: 100%;
background-color: #000e14;
color: #fafffd;
}

#agendaTitle {
display: flex;
justify-content: center;
align-items: center;
padding: 50px 0 50px;
}

#agendaTitle svg {
width: 40px;
height: 40px;
margin-right: 15px;
}

#agendaTitle h2 {
text-align: center;
font-size: 40px;
margin: 0;
}

#agendaList {
}

#agendaList ol {
list-style: none;
margin: 25px 0 0;
padding: 0;
text-align: center;
}

#agendaList ol li {
margin: 0;
display: flex;
justify-content: space-evenly;
width: 100vw;
padding: 20px 0;
border-bottom: 1px solid #68b1cc;
}

#agendaList ol li:first-of-type {
display: flex;
justify-content: space-evenly;
background-color: #68b1cc;
font-weight: bold;
padding: 0;
margin: 25px 0;
}

#agendaList ol li p {
width: 15%;
}

#agendaList ol li h3 {
width: 15%;
font-size: 15px;

display: flex;
justify-content: center;
align-items: center;
line-break: auto;
flex-direction: column;
}

#agendaList ol li h3 a {
width: 100%;
color: #7bc3de;
}

#agendaList ol li h3 p {
width: 100%;
margin: 0;
}

#agendaList ol li a {
width: 15%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

#agendaList ol li button {
}

#agendaList ol li a:hover {
color: #a2d729;
transition: color 0.25s linear;
}

#agendaList ol li a {
text-decoration: none;
color: inherit;
}

#agendaList button {
display: inline-block;
padding: 10px 20px;
background-color: #000e14;
color: #fafffd; /* Text color */
border: 2px solid #68b1cc; /* Border color */
border-radius: 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease,
border-color 0.3s ease;
}

#agendaList button:hover {
border-color: #a2d729; /* Adjusted hover border color */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#opLocatieBoven {
height: 250px;
background-image: url(../assets/wave_top.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
}

#opLocatieBox {
  overflow: hidden;
  min-height: 50vh;
  position: relative;
  background-color: #68b1cc;
  display: flex;
  align-items: center;
  justify-content: center;
}

#opLocatieBox img {
  border-radius: 5px;
  margin-right: 50px;
}

#locatieTitle {
display: flex;
justify-content: center;
align-items: center;
}

#locatieTitle svg {
width: 40px;
height: 40px;
margin-right: 15px;
}

#locatieTitle h2 {
color: #fafffd;
text-align: center;
font-size: 40px;
margin: 0;
}

#opLocatieText {
display: flex;
flex-direction: column;
align-items: center;
}

#opLocatieText p {
color: #fafffd;
text-align: justify;
}

#opLocatieText button {
display: inline-block;
padding: 10px 20px;
background-color: #68b1cc;
color: #fafffd;
border: 2px solid #005476;
border-radius: 5px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease,
border-color 0.3s ease, box-shadow 0.3s ease;
}

#opLocatieText button:hover {
background-color: #005476;
border-color: #fafffd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#opLocatieOnder {
height: 250px;
background-image: url(../assets/wave_bottom.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
}

#actorBox {
min-height: 100vh;
background-color: #000e14;
color: #fafffd;
}

#actorTitle {
display: flex;
justify-content: center;
align-items: center;
padding: 100px 0 50px;
}

#actorTitle svg {
width: 40px;
height: 40px;
margin-right: 15px;
}

#actorTitle h2 {
text-align: center;
font-size: 40px;
margin: 0;
}

#actorCards {
min-height: 75vh;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
max-width: 1400px;
margin: auto;
}

.actorCard {
border: 2px solid #68b1cc;
width: 250px;
height: 400px;
margin: 25px;
position: relative;
overflow: hidden;
border-radius: 15px;

transition: 0.2s ease-in-out;

-webkit-box-shadow: 1px 6px 11px 1px rgba(18, 18, 18, 1);
-moz-box-shadow: 1px 6px 11px 1px rgba(18, 18, 18, 1);
box-shadow: 1px 6px 11px 1px rgba(18, 18, 18, 1);
}

.actorCard:hover {
border: 2px solid #000e14;

-webkit-box-shadow: 1px 6px 11px 1px rgb(34, 34, 34);
-moz-box-shadow: 1px 6px 11px 1px rgb(34, 34, 34);
box-shadow: 1px 6px 11px 1px rgb(34, 34, 34);
}

.actorCard:hover img {
scale: 1.1;
}

.actorCard:hover div {
background-color: #fafffd;
color: #000e14;
}

.actorCard:hover p {
color: #000e14;
}

.actorCard img {
width: 100%;
height:100%;
object-fit:cover;
transition: 0.2s ease-in;
}

.actorCard div {
position: absolute;
bottom: 0;
padding: 0 25px;
width: 100%;
background-color: #000e14;
color: #fafffd;
transition: 0.2s ease-in;
}

.actorCard p {
transition: 0.2s ease-in;
color: #68b1cc;
}

#playBox {
min-height: 100vh;
background-color: #000e14;
color: #fafffd;
}

#playTitle {
display: flex;
justify-content: center;
align-items: center;
padding: 25px 0 50px;
}

#playTitle svg {
width: 40px;
height: 40px;
margin-right: 15px;
}

#playTitle h2 {
text-align: center;
font-size: 40px;
margin: 0;
}

#playCards {
min-height: 75vh;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
max-width: 1400px;
    margin: auto;
}

/* RESET */

.flow > * + * {
margin-top: var(--flow-space, 1em);
}

/* CARD COMPONENT */

.card {
display: grid;
place-items: center;
width: 250px;
height: 400px;
margin: 25px;
overflow: hidden;
border-radius: 15px;
box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
position: relative;
}

.card > * {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

.card__background {
object-fit: cover;
max-width: 100%;
height: 100%;
}

.card__content {
--flow-space: 0.9375rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-self: flex-end;
height: 55%;
width: 100%;
padding: 12% 1.25rem 1.875rem;
background: linear-gradient(
180deg,
hsla(0, 0%, 0%, 0) 0%,
hsla(0, 0%, 0%, 0.3) 10%,
hsl(0, 0%, 0%) 100%
);
}

.card__content--container {
--flow-space: 1.25rem;
padding: 0 20px;
}

.card__title {
position: relative;
width: fit-content;
width: -moz-fit-content; /* Prefijo necesario para Firefox  */
}

.card__title::after {
content: "";
position: absolute;
height: 0.3125rem;
width: calc(100% + 1.25rem);
bottom: calc((1.25rem - 0.5rem) * -1);
left: -1.25rem;
background-color: var(--brand-color);
}

.card__button {
padding: 10px 15px;
margin: 5px;
width: fit-content;
width: -moz-fit-content; /* Prefijo necesario para Firefox  */
font-variant: small-caps;
font-weight: bold;
border-radius: 5px;
border: 2px solid #68b1cc;
background-color: #000e14;
font-family: var(--font-title);
font-size: 15px;
color: #fafffd;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease,
border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.card__button:hover {
border-color: #a2d729; /* Adjusted hover border color */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.card__button:focus {
outline: 2px solid black;
outline-offset: -5px;
}

@media (any-hover: hover) and (any-pointer: fine) {
.card__content {
transform: translateY(50%);
transition: transform 500ms ease-out;
transition-delay: 500ms;
}

.card__title::after {
opacity: 0;
transform: scaleX(0);
transition: opacity 1000ms ease-in, transform 500ms ease-out;
transition-delay: 500ms;
transform-origin: right;
}

.card__background {
transition: transform 500ms ease-in;
}

.card__content--container > :not(.card__title),
.card__button {
opacity: 0;
transition: transform 500ms ease-out, opacity 500ms ease-out;
}

.card:hover,
.card:focus-within {
transform: scale(1.05);
transition: transform 500ms ease-in;
}

.card:hover .card__content,
.card:focus-within .card__content {
transform: translateY(0);
transition: transform 500ms ease-in;
}

.card:focus-within .card__content {
transition-duration: 0ms;
}

.card:hover .card__background,
.card:focus-within .card__background {
transform: scale(1.3);
opacity: 0.75;
transition: 0.5s ease-in;
}

.card:hover .card__content--container > :not(.card__title),
.card:hover .card__button,
.card:focus-within .card__content--container > :not(.card__title),
.card:focus-within .card__button {
opacity: 1;
transition: opacity 500ms ease-in;
transition-delay: 1000ms;
}

.card:hover .card__title::after,
.card:focus-within .card__title::after {
opacity: 1;
transform: scaleX(1);
transform-origin: left;
transition: opacity 500ms ease-in, transform 500ms ease-in;
transition-delay: 500ms;
}
}

.card__buttons {
display: flex;
justify-content: center;
align-items: center;
}

.card__buttons button {
font-size: 15px;
}

.oldPlayList {
padding: 0 100px ;
}

.oldPlayText {
text-align: center;
padding: 50px 0;
}

.oldPlayText h2 {
margin: 0;
}

.oldPlayContent {
text-align: center;
}

.oldPlayContent a {
color: #68b1cc;
transition: 0.5s ease;
}

.oldPlayContent a:hover {
color: #a2d729;
}

#contactBox {
background-color: #000e14;
color: #fafffd;
padding: 50px 0 100px;
}

#contactTitle {
display: flex;
justify-content: center;
align-items: center;
padding: 25px 0 50px;
}

#contactTitle svg {
width: 40px;
height: 40px;
margin-right: 15px;
}

#contactTitle h2 {
text-align: center;
font-size: 40px;
margin: 0;
}

#contactContent {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap:wrap;
}

#contactContent h3 {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
}

#contactContent h3 svg {
width: 20px;
height: 20px;
margin-right: 10px;
}

#emailBox {
display: flex;
margin-bottom: 75px;
font-size: 15px;
}

#emailBox a {
color: #68b1cc;
transition: 0.2s ease;
}

#emailBox a:hover {
color: #a2d729;
}

#emailBox div {
display: flex;
flex-direction: column;
}

#emailBox div:nth-of-type(2) {
margin-left: 25px;
}

#socialsBox {
display: flex;
justify-content: center;
}

#socialsBox svg {
margin: 0 10px;
}

footer {
font-family: "Noto Sans Adlam", sans-serif;
background-color: #000e14;
color: #fafffd;

display: flex;
flex-direction: column;
align-items: center;
}

footer img {
margin: 50px 0 25px;
height: 100px;
}

#footerSocials {
display: flex;
margin: 0 0 25px 0;
}

#footerSocials svg {
margin: 10px;
}

#footerCredits {
display: flex;
flex-direction: column;
justify-content: bottom;
align-items: center;
}

#footerCredits p:first-child {
margin: 0;
}

}