html {
    scroll-behavior: smooth;
}

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

body {
    padding: 0;
    margin: 0;
    overflow: scroll;
    font-family: 'QuadrantMono';
    font-weight: 500;
    font-size: 0.7em;
    line-height: 1.2em;
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
    color: black;

}

@font-face {
    font-family: 'CaslonMedium';
    src: url(LibreCaslonCondensed-Medium.otf);
    font-weight: 100 900;
}

@font-face {
    font-family: 'CaslonMediumItalic';
    src: url(LibreCaslonCondensed-MediumItalic.otf);
    font-weight: 100 900;
}

@font-face {
    font-family: 'CaslonRegular';
    src: url(LibreCaslonCondensed-Regular.otf);
    font-weight: 100 900;
}

@font-face {
    font-family: 'CaslonItalic';
    src: url(LibreCaslonCondensed-Italic.otf);
    font-weight: 100 900;
}

@font-face {
    font-family: 'Greta';
    src: url(GretaTextPro-RegularPlus.otf);
    font-weight: 100 900;
}

@font-face {
    font-family: 'Century';
    src: url(CENSCBK.TTF);
    font-weight: 100 900;
}

@font-face {
    font-family: 'CenturyMono';
    src: url(CenturySchoolbookMonospaceRegular.otf);
    font-weight: 100 900;
}

@font-face {
    font-family: 'Quadrant';
    src: url(QuadrantText-Regular.otf);
    font-weight: 100 900;
}

@font-face {
    font-family: 'QuadrantMono';
    src: url(QuadrantTextMono-Regular.otf);
    font-weight: 100 900;
}

@font-face {
    font-family: 'QuadrantMonoItalic';
    src: url(QuadrantTextMono-RegularItalic.otf);
    font-weight: 100 900;
}

.header {
    display: flex;
    height:8vH;
    padding-top: 5px;
    position: fixed;
    z-index: 2;
    width: 100%;
    transition: height 0.3s ease-in-out;
    overflow: hidden;
}

.expanded-header {
    max-height: 40vH;
    transition: height 0.3s ease-in-out; /* Add smooth transition effect */
}



.expanded-header .info {
    display: block;
    opacity: 1;
}

.bio {
    padding-left: 10px;
    flex:7;
    position: relative;
    display: inline-block;
}

.contact {
    flex:3;
    position: relative;
    text-align: left;
    align-content: flex-end;
    left:-10px;
    z-index: 3;
}
.space {
    height: 14vH;
    width: 100%;
    transition: height 0.3s ease-in-out;

}
.space2 {
    position: fixed;
    height: 14vH;
    width: 100%;
    background-color: whitesmoke;
    z-index: 1;
    border-bottom: 1px solid black;
    transition: height 0.3s ease-in-out;
}

.expanded-space {
    height: 40vH;
    transition: height 0.3s ease-in-out; /* Add smooth transition effect */
}

.expanded-space2 {
    height: 40vH;
    transition: height 0.3s ease-in-out; /* Add smooth transition effect */
}

.slideshow-filter-container {
    display: flex;
    flex-direction: column;
}

.italic {
    font-family: "QuadrantMonoItalic";
}

#category-menu {
margin-bottom: 1vH;
position: fixed;
top:5vH;
z-index: 2;
height: 12vH;
transition: top 0.3s ease-in-out;
}

.expanded-menu {
    top:31vH !important;
}

a {
    background: none;
    border: none;
    outline: none;
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.infoButton {
    cursor: pointer;

}

#category-menu button {
    align-content: flex-end;
    display: block;
    background: none;
    border: none;
    color: black;
    font-family: 'QuadrantMono';
    cursor: pointer;
    font-size: 1em;
    padding-left: 10px;
    outline: none;
}

#category-menu button:hover {
    text-decoration: underline;
}

.slideshow-description-container {
    display: flex;
border-top: 1px solid black;
padding-top: 10px;
padding-bottom: 10px;
}

.slideshow-container {
    overflow: scroll;
    flex: 7;
    position: relative;
}

.description {
    padding-left: 10px;
    padding-right: 10px;
    flex: 3;
    height: 44.5vW;
    overflow: scroll;
    align-items: center;
    justify-content: center;
}

.slideshow-slide {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.slideshow-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slideshow-slide video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.projectDescription {
}

.projectTitle {
    text-decoration: underline;
    margin: 0;
}


.left-layout {
    flex-direction: row; /* Image on the left, text on the right */
}

.right-layout {
    flex-direction: row-reverse; /* Image on the right, text on the left */
}


.left-arrow-cursor {
    cursor: w-resize;
}

.right-arrow-cursor {
    cursor: e-resize;
}

.info {
    margin-bottom: 1vH;
    padding-left: 10px;
    position: fixed;
    top:5vH;
    width: 60vW;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Existing styles */

/* Media query for screens smaller than 768px (mobile devices) */
/* Existing styles */

/* Media query for screens smaller than 768px (mobile devices) */
@media (max-width: 768px) {
    body {
        font-size: 0.8em; /* Adjust font size for mobile */
    }

    /* Modify slideshow and description layout */
    .slideshow-description-container {
        flex-direction: column; /* Stack slideshow and description vertically */
        border-top: none; /* Remove the top border */
        padding: 0; /* Add padding for spacing */
    }

    .slideshow-container {
        flex: 1; /* Make the slideshow full width */
        height: auto; /* Let the height adjust to content */
    }

    .description {
        flex: 1; /* Make the description full width */
        height: auto; /* Let the height adjust to content */
        overflow: hidden;
        margin-top:2vH; /* Hide overflow if needed */
    }

    .slideshow-slide {
        display: block; /* Display each slide as a block */
    }

    .slideshow-description-container:nth-child(odd) .slideshow-container {
        order: unset;
    }

    .slideshow-description-container:nth-child(odd) .description {
        order: unset;
    }

    #category-menu {
        display: inline-block;
    margin-bottom: 1vH;
    position: fixed;
    top:10vH;
    z-index: 2;
    transition: top 0.3s ease-in-out;
    width: 100%;
    align-items: center;
    text-align: center;
    }

    #category-menu button {
        display: inline;
        align-content: center;
        font-size: 0.9em;
        padding-left:0;
        padding-right: 0;

    }

    .expanded-space {
        height: 50vH;
        transition: height 0.3s ease-in-out; /* Add smooth transition effect */
    }

    .expanded-space2 {
        height: 50vH;
        transition: height 0.3s ease-in-out; /* Add smooth transition effect */
    }

    .expanded-header {
        max-height: 50vH;
        transition: height 0.3s ease-in-out; /* Add smooth transition effect */
    }

    .contact {
        text-align: right;
    }

    .info {
        width: 95vW;
        top:10vH;
        padding-right: 10px;
    }

    .expanded-menu {
        top:46vH !important;
    }
}