@font-face {
    font-family: 'simplon';
    src: url(../fonts/SimplonBPMono-Light.woff2);
}

@font-face {
    font-family: 'helvetica';
    src: url(../fonts/HelveticaNeueLight.otf);
}

@font-face {
    font-family: 'babe';
    src: url(../fonts/Serifbabe\ Regular.otf);
}

::selection {
    background-color: #c3c3c3; /* Custom background color */
    color: #ffffff; /* Custom text color */
  }

body, html {
    font-family: 'simplon';
    font-size: 10px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

.slideshow-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.slideshow-container .slide {
    display: none; /* Hide all items by default */
}

.slideshow-container .slide.active {
    display: flex; /* Show the active item */
}

.slideshow-container .clickable-area {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    cursor: pointer;
}

.slideshow-container .left {
    left: 0;
}

.slideshow-container .right {
    right: 0;
}

.slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80vh;
    width: 90vw;
    display: flex;
    flex-wrap: nowrap; /* Allows wrapping if images exceed the container width */
    justify-content: center;
    align-items: center;
}

.slide img, 
.slide video {
    max-height: 100%;
    max-width: 100%; 
    object-fit: contain; /* Maintain aspect ratio */
    margin: 10px;
    width: auto; /* Ensure width adjusts automatically */
    height: auto; /* Ensure height adjusts automatically */
    box-sizing: border-box; /* Include padding and border in the element's width and height */
}

.three {
    max-width: calc(100% / 3.5);
}



#info-button {
    z-index: 100; 
    position: absolute; 
    left: 0; bottom:0; 
    padding: 10px; 
    cursor: pointer;
}



#overlay {
    opacity: 0;
    transition: opacity 0.4s ease;
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255, 255, 255, 0.768); 
    z-index: 5; 
}

#info-text {
    transition: opacity 0.4s ease;
    display: none; 
    position: absolute; 
    left: 0; 
    bottom: 0;
    padding: 10px 10px 60px 10px; 
    z-index: 10;
    max-width: 25vw;
}

#right {
    pointer-events: none; 
    font-size: 15px; 
    position: absolute; 
    right: 0;
    padding: 5px;
}

#left {
    pointer-events: none; 
    font-size: 15px; 
    position: absolute; 
    left: 0;
    padding: 5px;
}

#title {
    position: absolute; 
    left: 20vw; 
    top: 0; 
    padding: 10px;
    pointer-events: none;
    z-index: 10;
}

#close {
    position: absolute; 
    right: 0; 
    top:0;
    padding: 10px; 
    cursor: pointer;
    z-index: 10;
}

#project-number {
    position: absolute; 
    left: 10vw; 
    top: 0; 
    padding: 10px;
    pointer-events: none;
    z-index: 10;
}

#project-and-slide-number {
    position: absolute; 
    left: 10vw; 
    bottom: 0; 
    padding: 10px;
    pointer-events: none;
}

a {
    color: black;
}

@media (max-width: 768px) {

    .slide {
        height: auto;
        width: auto;
        flex-wrap: wrap;
    }

    .three {
        max-width: 100%;
    }

    .slide img {
        margin: 5px;
    }

  }