/* Meir's Classic CSS Reset */

*, *:before, *:after { 
    box-sizing: border-box; /* Prevent padding from enlarging elements */
}

* {
    margin: 0; /* Remove extra margin from everything (body, headings, etc...) */
}

img {
    max-width: 100%; /* Don't let images be more than their container's width */
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word; /*Break long words in headings & paragraphs*/
}

ul { /* Don't style unordered lists (good for nav menus!) */
    padding: 0;
    list-style: none;
}

a { /* No blue links! */
    color: inherit;
    text-decoration: none;
}

/* end Meir reset */

body{
    /* font-family: 'Courier New', Courier, monospace; */
    /* font-family: "OPSEver", sans-serif; */
    font-family: 'Helvetica', sans-serif;
    /* font-weight: 100;  */

}

h1{
    /* font-family: "OPSEver", sans-serif; */
    font-family: 'Helvetica', sans-serif;
    font-size: 1.2em;
    /* font-weight: 100;  */
    text-align: center;
    padding: 15px;
}

h2{
    /* font-family: "OPSEver", sans-serif; */
    font-family: 'Helvetica', sans-serif;
    font-size: 1.5em;
    /* font-weight: 100;  */
    padding-top: 15px;
    padding-bottom: 15px;
}
/* 
p{
}  */


.content{
    height: 100dvh;
}


.body.video-hover-active{
    background-color: black;
}

.video-blackout {
    position: fixed;
    inset: 0;
    background: black;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 50; /* below the video, above everything else */
}

.video-blackout.active {
    opacity: 0.90;
}

.vertical{
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
@media only screen and (max-width: 700px) {
    .vertical{
        /* background-color: blue; */
        /* height: 90%; */
        /* background-color: red; */
    }
}



.horizontal{
    display: flex;
    flex-grow: 1;
}


/* Publications Styling */
/* Publications Styling */
/* Publications Styling */
/* Publications Styling */
/* Publications Styling */
/* Publications Styling */
/* Publications Styling */
.content-pubs{ 
    background-color: white;
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
    /* width: 100%; */
}
.content-pubs-hover{
    width: 0px; 
    height: 100%;
    transition: all 0.3s ease;
    background-image: repeating-linear-gradient(
        45deg, /* Angle of the diagonal lines */
        gray 0px, /* Color of the first line segment */
        gray 2px, /* Width of the first line segment */
        transparent 2px, /* Start of the transparent gap */
        transparent 8px /* Width of the transparent gap */
    );
}
.content-pubs-hover:hover{
    width: 50px; 
}
@media (hover: none) and (pointer: coarse) {
    .content-pubs-hover:hover{
        width: 0px; 
    }
}

.content-pubs-hover.hover-active {
    width: 50px;
}
.pubs-button{
    cursor: pointer;  
    user-select: none; 
}

.content-pubs-content{
    display: flex;
    flex-direction: row-reverse;
    height: 100%;
    width: 0px;
    background-color: white;
    transition: all 0.5s ease;
}
.content-pubs-content.page-active{
    width: 100vw;
}
.content-pubs-menu{
    display: none;
    justify-content: center; 
    align-items: center;  
    background-color: white;
    padding: 15px;
    border-right: 2px solid black;
    border-left: 2px solid black;
    /* overflow: hidden; */
}
.content-pubs-menu.page-active{
    display: flex;
    height: 100vh;
    overflow-y: auto;
    /* white-space: nowrap;
    overflow: hidden; */

    
}

.content-pubs-menu ul{
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: 20px;
    writing-mode: vertical-rl;
    background-color: white;
    overflow: hidden;
}
.pub-link{
    display: flex;
    flex-wrap: wrap;
}
.pub-link-text{
    padding-top: 5px;
    max-width: 20px;
    max-height: 0px;
    overflow: hidden;
    /* display: flex; */
    /* height:500px; */
    transition: max-height 1.5s ease;
}
.pub-link:hover .pub-link-text{
    max-height: 500px;
    opacity: 1;
}
.pub-link-text.active{
    max-height: 500px;
    opacity: 1;
} 

.pub-circle{
    fill: white;
    transition: fill 0.3s ease;
}
.pub-link:hover .pub-circle{
    fill: black;
}
.pub-circle.active {
    fill: black;
}

.content-pubs-content-pub{
    background-color: black;
    /* display: flex;
    flex-direction: column; */
    /* justify-content: space-between; */
    height: 0px;
    width: 100%;
    transition: all 0.3s ease;
    overflow-y: auto; 


    /* Hide scrollbar for Chrome, Safari, and Opera */
    &::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge, and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.content-pubs-content-pub.page-active{
    height: 100vh;
}


.pub-title{
    color: white;
    text-align: center;
    /* max-width: 55ch; */
    padding-left: 50px;
    padding-right: 50px;
}
@media only screen and (max-width: 700px) {
    .pub-title{
        padding: 15px 20px 0px 20px;
    }
}
.pub-text{
    color: white;
    /* max-width: 55ch; */
    padding-top: 15px;
    padding-left: 50px;
    padding-right: 50px;
}
@media only screen and (max-width: 700px) {
    .pub-text{
        padding: 15px 20px 0px 20px;
    }
}
.pub-text p{
    
    /* font-size: 1.5em; */
    
    max-width: 55ch;
}
.pub-images{
    display: flex;
    gap: 20px;
    padding-top: 15px;
    padding-bottom: 20px;
    padding-left: 100px;
    padding-right: 100px;
    max-width: 1500px;
}
@media only screen and (max-width: 700px) {
    .pub-images{
        flex-direction: column;
        padding: 15px 20px 0px 20px;
    }
}



/* Projects Styling */
/* Projects Styling */
/* Projects Styling */
/* Projects Styling */
/* Projects Styling */
/* Projects Styling */
/* Projects Styling */
.content-projects{
    background-color: white;
    display: flex;
    overflow: hidden;
}
.content-projects-hover{
    width: 0px; 
    height: 100%;
    transition: all 0.3s ease;
    background-image: repeating-linear-gradient(
        45deg, /* Angle of the diagonal lines */
        gray 0px, /* Color of the first line segment */
        gray 2px, /* Width of the first line segment */
        transparent 2px, /* Start of the transparent gap */
        transparent 8px /* Width of the transparent gap */
    );
}
.content-projects-hover:hover{
    width: 50px; 
}
@media (hover: none) and (pointer: coarse) {
    .content-projects-hover:hover{
        width: 0px; 
    }
}
.content-projects-hover.hover-active  {
    width: 50px;
}
.projects-button{
    cursor: pointer;  
    user-select: none; 
}

.content-projects-content{
    display: flex;
    height: 100%;
    width: 0px;
    background-color: white;
    transition: all 0.5s ease;
}
.content-projects-content.page-active{
    width: 100vw;
}
.content-projects-menu{
    display: none;
    justify-content: center; /* Centers horizontally */
    align-items: center;   /* Centers vertically */
    background-color: white;
    padding: 15px;
    border-right: 2px solid black;
    border-left: 2px solid black;

    justify-content: space-between;
    height: 0px;
    width: 55px;
    transition: all 0.3s ease;
    overflow-y: auto; 


    /* Hide scrollbar for Chrome, Safari, and Opera */
    &::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge, and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

}
.content-projects-menu.page-active{
    display: flex;
    height: 100vh;
    overflow-y: auto;
    /* white-space: nowrap;
    overflow: hidden; */

    
}
.content-projects-menu ul{
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: 20px;
    writing-mode: vertical-rl;
    background-color: white;
    /* overflow: hidden; */
}
.project-link{
    display: flex;
    flex-wrap: wrap;
}
.project-link-text{
    padding-top: 5px;

    max-width: 20px;
    max-height: 0px;
    overflow: hidden;
    /* display: flex; */
    /* height:500px; */
    transition: max-height 1.5s ease;
}
.project-link:hover p,
.project-link:focus p{
    max-height: 500px;
    opacity: 1;
} 
.project-link-text.active{
    max-height: 500px;
    opacity: 1;
} 
/* .project-link:hover p{
    display: inline;
}
.project-link:focus p {
    display: inline;
} */
.project-circle{
    fill: white;
    transition: fill 0.3s ease;
}
.project-circle.active{
    fill: black;
}
.project-link:hover .project-circle{
    fill: black;
}
.project-link:focus .project-circle {
    fill: black;
}

.content-projects-content-project{
    /* display: flex;
    flex-direction: column; */
    justify-content: space-between;
    height: 0px;
    width: 100%;
    transition: all 0.3s ease;
    overflow-y: auto; 


    /* Hide scrollbar for Chrome, Safari, and Opera */
    &::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge, and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.content-projects-content-project.page-active{
    height: 100vh;
}


.project-title{
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
    max-width: 1500px;
    font-size: 1rem;
}
.project-title h2{
    font-size: 1.2rem;
    /* max-width: 55ch; */
}
.project-title p{
    max-width: 55ch;
}
.project-description{
    padding-top: 15px;
    padding-left: 50px;
    padding-right: 50px;
}
@media only screen and (max-width: 900px) {
    .project-description{
        padding: 15px 20px 0px 20px;
    }
}
.project-description p{
    max-width: 55ch;
    font-size: 1.3rem;
    line-height: 1.2;
}
@media only screen and (max-width: 900px) {
    .project-description p{
        font-size: 1rem;
    }
}
.expand-toggle{
    display: flex;
    justify-content: center;
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    max-width: 1500px;
}
.expand-toggle p{
    padding-left: 5px;
}
.project-desc-circle{
    fill: white;
    transition: all 0.3s ease;
    text-align: center;
}
.project-desc-circle:hover{
    fill: black;
    /* stroke-width: 5px; */
}
.project-desc-circle.active{
    fill: black;
}
.project-desc-circle.active:hover{
    fill: white;
}

.project-expandeddescription{
    font-size: 1rem;
    padding-top: 15px;
    padding-left: 50px;
    padding-right: 50px;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 1s ease-in;
}
/* .project-expandeddescription p{
    padding-bottom: 0px;
} */
@media only screen and (max-width: 900px) {
    .project-expandeddescription{
        padding: 15px 20px 0px 20px;
    }
}
.project-expandeddescription p{
    max-width: 55ch;
    padding-bottom: 0px;   
}
.project-expandeddescription p+p {
    text-indent: 50px;
  }
.project-expandeddescription.page-active {
    max-height: 1500px; 
    padding-bottom: 15px;   
}
.expand-toggle {
    cursor: pointer;
}


.project-images {
    padding: 15px 50px 20px 20px;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* space between images */
}
@media only screen and (max-width: 900px) {
    .project-images{
        gap: 5px;
        padding: 15px 20px 20px 20px;
    }
}
@media only screen and (max-width: 700px) {
    .project-images{
        gap: 5px;
        padding: 15px 0px 20px 0px;
    }
}

.project-image {
    display: flex;
    flex-direction: row; /* image + caption side by side */
    gap: 10px;
    width: 100%;
    /* justify-content: flex-end; */
    justify-content: flex-start;
    align-items: flex-start;
}
@media only screen and (max-width: 900px) {
    .project-image{
        flex-direction: column; 
        gap: 5px;
    }
}


.project-image img {
    max-height: 90vh;
    /* max-width: 100%; */
    /* width: 100%;  */
    /* width: 50%; */
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    align-self: flex-start;
    /* display: block; */
    /* padding: 15%; */
    /* flex: 1; stretch image to fill remaining space */
    /* height: auto; */
    /* object-fit: cover; maintain aspect ratio and cover container */
}

.project-image-text {
    padding-left: 5px;
    writing-mode: vertical-rl;
    align-self: stretch; /* fill height of image */
}
@media only screen and (max-width: 900px) {
    .project-image-text {
        writing-mode: horizontal-tb;
        padding-left: 1px;
    }
}
@media only screen and (max-width: 700px) {
    .project-image-text {
        writing-mode: horizontal-tb;
        padding-left: 5px;
    }
}


.project-videos {
    padding: 15px 50px 0px 20px;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* padding-right: 130px; */
}
@media only screen and (max-width: 900px) {
    .project-videos{
        gap: 5px;
        padding: 15px 20px 0px 20px;
    }
}
@media only screen and (max-width: 700px) {
    .project-videos{
        gap: 5px;
        padding: 15px 0px 0px 0px;
    }
}

.project-video {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    z-index: 60;
}
@media only screen and (max-width: 900px) {
    .project-video{
        flex-direction: column; 
        gap: 5px;
    }
}

.project-video iframe {
    height: auto;           
    max-height: 90vh;
    width: 100%;             /* preserve aspect ratio */
    aspect-ratio: 16 / 9;
    flex-shrink: 0;          /* prevent it from being squished */
}

.project-video-text {
    padding-left: 5px;
    writing-mode: vertical-rl;
    align-self: flex-start;
}
@media only screen and (max-width: 900px) {
    .project-video-text {
        writing-mode: horizontal-tb;
        padding-left: 1px;
    }
}
@media only screen and (max-width: 700px) {
    .project-video-text {
        writing-mode: horizontal-tb;
        padding-left: 5px;
    }
}


.content-projects-content-endbuffer{
    height: 50px;
    background-image: repeating-linear-gradient(
        45deg, /* Angle of the diagonal lines */
        gray 0px, /* Color of the first line segment */
        gray 2px, /* Width of the first line segment */
        transparent 2px, /* Start of the transparent gap */
        transparent 8px /* Width of the transparent gap */
    ); 
}

/* Menu Styling */
/*                   Menu Styling                     */
/*                   Menu Styling                     */
/*                   Menu Styling                     */
/*                   Menu Styling                     */
/*                   Menu Styling                     */
/*                   Menu Styling                     */
.content-menu{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* margin-left: -40px; */
    /* background-color: red !important; */
}
@media (max-width: 700px), (max-device-width: 700px) {
    .content-menu.page-inactive{
        display:none;
        /* width:0px;
        transition: all 0.5s ease; */
    }
}

/* Two diagonals */
.content-menu-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 1rem; */
    position: relative;
    /* padding: 0.5em 0.5em; */
    min-width: 280px
}
.content-menu-title h1{
    font-size: 1.2rem;
}
@media only screen and (max-width: 700px) {
    .content-menu-title{
        /* background-color: blue; */
        /* min-width: 95px; */

    }
}

/* Left and right diagonal boxes */
.content-menu-title::before,
.content-menu-title::after {
    content: "";
    display: block;
    aspect-ratio: 1 / 1;
    /* height: 1em; scales with text size */
    height: 100%;
    /* min-height: 500px;  */
    background: linear-gradient(
        to bottom left,                 /* direction controls diagonal angle */
        transparent calc(50% - 0.75px), /* 0.75px = half of 1.5px thickness */
        black calc(50% - 0.75px),
        black calc(50% + 0.75px),
        transparent calc(50% + 0.75px)
    );
}
/* Right box: mirror it horizontally */
.content-menu-title::after {
    transform: scaleX(-1);
}
/* Mirror the right one */
.content-menu-title::after {
    transform: scaleX(-1);
}
 


.content-menu-middle{
   display: flex;
   flex-grow: 1; 
}
/* @media only screen and (max-width: 700px) {
    .content-menu-middle{
        flex-direction: column-reverse;
        border-bottom: 1.5px solid black;
        margin-left: 70px;
        margin-right: 70px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
} */
.content-menu-middle-pubs{
    writing-mode: vertical-rl;
}
.content-menu-middle-pubs h1{
    font-size: 1.2rem;
}
.content-menu-middle-projects h1{
    font-size: 1.2rem;
}
.content-menu-about h1{
    font-size: 1.2rem;
}
.pub-title h2{
    font-size: 1.2rem;
}

/* @media only screen and (max-width: 700px) {
    .content-menu-middle-pubs{
        writing-mode:horizontal-tb;
        border-top: 1.5px solid black;
    }
} */
.content-menu-middle-projects{
    writing-mode: vertical-rl;
}
/* @media only screen and (max-width: 700px) {
    .content-menu-middle-projects{
        writing-mode:horizontal-tb;
        border-top: 1.5px solid black;
        border-bottom: 1.5px solid black;
    }
} */

.content-menu-middle-wall {
    position: relative;
    flex-grow: 1;
    /* border: black solid 1.5px; */
    display: flex;
    justify-content: center;
    align-items: center;
}  
.content-menu-middle-wall::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
    /* top */
    linear-gradient(to right, transparent 15px, black calc(15px), black calc(100% - 15px), transparent calc(100% - 15px)) top,
    /* bottom */
    linear-gradient(to right, transparent 15px, black calc(15px), black calc(100% - 15px), transparent calc(100% - 15px)) bottom,
    /* left */
    linear-gradient(to bottom, transparent 15px, black calc(15px), black calc(100% - 15px), transparent calc(100% - 15px)) left,
    /* right */
    linear-gradient(to bottom, transparent 15px, black calc(15px), black calc(100% - 15px), transparent calc(100% - 15px)) right;
    background-repeat: no-repeat;
    background-size: 100% 1.5px, 100% 1.5px, 1.5px 100%, 1.5px 100%;
    background-position: top center, bottom center, left center, right center;
}

/* @media only screen and (max-width: 700px) {
    .content-menu-middle-wall::before{
        background: none;
    }
} */
.content-menu-middle-wall-eyehole {
    /* position: relative;
    width: 60px;
    height: 60px; */
}

/* Keep the circle centered */
.pinhole-circle-container {
    /* position: relative; */
    z-index: 3;
    cursor: pointer;
}
.pinhole-circle circle {
    transition: all 0.2s ease;
}
.pinhole-circle-container:hover circle {
    fill: black;
    stroke: white;
}
  


.pinhole-overlay {
    position: fixed;
    background: black;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* allows hovering over circle still */
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    /* transform: translate(-50%, -50%); */
    /* transition-delay: 1s; */
    transition: all 0.4s ease;
    z-index: 2;
    gap: 100px;
    padding: 20px;
}

.pinhole-overlay.visible {
    opacity: 1;
    /* width: 100%;
    /* height: 100%; */ 
  }

  /* NEW: wrapper that animates height */
    .pinhole-media-wrapper {
        height: 0;
        /* width: 0; */
        overflow: hidden;
        transition: all 1s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1.5px solid white;
        /* border-radius: 50%; */
    }
    
    .pinhole-media-wrapper.visible {
        height: 75vh; /* animate to max viewing height */
        width: auto;

    }
    .pinhole-media {
        max-height: 75vh;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        filter: none;
    }
    .pinhole-media.grayscale {
        filter: grayscale(100%) contrast(150%);
    }
    
    
  
  .pinhole-image,
  .pinhole-video {
    display: none;
    /* height:0px; */
    transition: all 0.5s ease;
    /* overflow:hidden; */
    /* border-radius: 50%; */
  }
  .pinhole-image.visible,
  .pinhole-video.visible {
    display: none;
    height: auto;
  }
  
  .pinhole-info {
    /* width:50%; */
    /* padding: 50px; */
    overflow: hidden;
    /* min-width: 5ch; */
    text-align: left;
    font-size: 14px;
    color: black;
    white-space: nowrap;

}

.pinhole-title {
      overflow: hidden;
      /* font-weight: bold;
      margin-bottom: 0.2em; */
    }
    
    .pinhole-meta {
      overflow: hidden;
    /* font-style: italic;
    opacity: 0.8; */
  }


  
/* Two diagonals */
.pinhole-diagonals-left {
    width: 0px;
    height: 0px;
    opacity: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 90%;
    position: relative;
    /* padding: 0.5em 0.5em; */
    transition: all 1s ease;
    /* transition-delay: 1s; */
}
.pinhole-diagonals-left.visible {
    width: 30px;
    height: 100%;
    opacity: 1;
    /* padding-right: 50px; */

}
/* Left and right diagonal boxes */
.pinhole-diagonals-left::before,
.pinhole-diagonals-left::after {
    content: "";
    display: block;
    height: 100%;
    aspect-ratio: 1 / 1;
    /* height: 1em; scales with text size */
    /* width: 50px; */
    /* min-height: 500px;  */
    background: linear-gradient(
        to bottom right,                 /* direction controls diagonal angle */
        transparent calc(50% - 0.75px), /* 0.75px = half of 1.5px thickness */
        white calc(50% - 0.75px),
        white calc(50% + 0.75px),
        transparent calc(50% + 0.75px)
    );
}
/* Right box: mirror it horizontally */
.pinhole-diagonals-left::before {
    transform: scaleX(-1);
}
/* Mirror the right one */
.pinhole-diagonals-left::before {
    transform: scaleX(-1);
}
/* Two diagonals */
.pinhole-diagonals-right {
    width: 0px;
    height:0px;
    opacity: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 90%;
    position: relative;
    /* padding: 0.5em 0.5em; */
    transition: all 1s ease;
}
.pinhole-diagonals-right.visible {
    width: 30px;
    height: 100%;
    opacity: 1;
    /* padding-left: 50px; */

}
/* Left and right diagonal boxes */
.pinhole-diagonals-right::before,
.pinhole-diagonals-right::after {
    content: "";
    display: block;
    height: 100%;
    aspect-ratio: 1 / 1;
    /* height: 1em; scales with text size */
    /* width: 50px; */
    /* min-height: 500px;  */
    background: linear-gradient(
        to bottom right,                 /* direction controls diagonal angle */
        transparent calc(50% - 0.75px), /* 0.75px = half of 1.5px thickness */
        white calc(50% - 0.75px),
        white calc(50% + 0.75px),
        transparent calc(50% + 0.75px)
    );
}
/* Right box: mirror it horizontally */
.pinhole-diagonals-right::after {
    transform: scaleX(-1);
}
/* Mirror the right one */
.pinhole-diagonals-right::after {
    transform: scaleX(-1);
}
 

  


/* Two diagonals */
.content-menu-about {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 1rem; */
    position: relative;
    /* padding: 0.5em 0.5em; */
}
/* Left and right diagonal boxes */
.content-menu-about::before,
.content-menu-about::after {
    content: "";
    display: block;
    height: 100%;
    aspect-ratio: 1 / 1;
    /* height: 1em; scales with text size */
    /* width: 50px; */
    /* min-height: 500px;  */
    background: linear-gradient(
        to bottom right,                 /* direction controls diagonal angle */
        transparent calc(50% - 0.75px), /* 0.75px = half of 1.5px thickness */
        black calc(50% - 0.75px),
        black calc(50% + 0.75px),
        transparent calc(50% + 0.75px)
    );
}
/* Right box: mirror it horizontally */
.content-menu-about::after {
    transform: scaleX(-1);
}
/* Mirror the right one */
.content-menu-about::after {
    transform: scaleX(-1);
}



/* About Styling */
.content-about{
    background-image: repeating-linear-gradient(
        45deg, /* Angle of the diagonal lines */
        gray 0px, /* Color of the first line segment */
        gray 2px, /* Width of the first line segment */
        transparent 2px, /* Start of the transparent gap */
        transparent 8px /* Width of the transparent gap */
    );
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* flex-grow: 1; */
}
.content-about-hover{
    height: 0px; 
    width: 100%;
    transition: all 0.3s ease;
}
.content-about-hover:hover{
    height: 50px; 
}
@media (hover: none) and (pointer: coarse) {
    .content-about-hover:hover{
        height: 0px; 
    }
}
.content-about-hover.hover-active  {
    height: 50px;
}
.content-about-content{
    width: 100%;
    height: 0px;
    background-color: white;
    transition: all 0.5s ease;
}
.content-about-content.page-active{
    height: 100vh;
}
.about-button{
    cursor: pointer;  
    user-select: none; 
}

.content-about-content-about{
    display: flex;
    border-top: black solid 2px;
    transition: all 0.3s ease;
    opacity: 0;
    
}
.content-about-content-about > div{
    padding-top: 0px;
}

.about-info{
    max-width: 55ch;
    font-size: 1.2rem;
    padding: 15px;
}
.about-info h2{
    font-size: 1.2rem;
}
.about-info p{
    font-size: 1rem;
}
.about-cv{
    /* background-color: red; */
    height: 67vh;
    overflow-y: auto; 
    
    
    /* Hide scrollbar for Chrome, Safari, and Opera */
    &::-webkit-scrollbar {
        display: none;
    }
    
    /* Hide scrollbar for IE, Edge, and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
@media  only screen and (max-width: 700px)  {
    .about-cv{
        /* background-color: red; */
        height: 93vh;
        overflow-y: auto; 
        
        
        /* Hide scrollbar for Chrome, Safari, and Opera */
        &::-webkit-scrollbar {
            display: none;
        }
        
        /* Hide scrollbar for IE, Edge, and Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
}
.about-cv h2{
padding: 15px;

font-size: 1.2rem;
}
.about-cv-section h3{
    font-size: 1.2rem;
    /* padding: 175px; */
    /* line-height: 1.5; */
}
.about-cv-section{
    padding: 15px;
    padding-bottom: 15px;
    padding-top: 0px;

}

.about-cv-section h3{
    padding-top: 0px;
    padding-bottom: 5px;
}
.about-cv-section ul{

}



@font-face {
    font-family: "Helvetica";
    src: url("../fonts/HelveticaLTStd-Roman.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: "Helvetica";
    src: url("../fonts/HelveticaLTStd-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: "OPSEver";
    src: url("../fonts/OPSConstantChange-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: "LexendLocal";
    src: url("../fonts/Lexend-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: "LexendLocal";
    src: url("../fonts/Lexend-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: "LexendLocal";
    src: url("../fonts/Lexend-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }


@font-face {
    font-family: "Lineal";
    src: url("../fonts/Lineal-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: "Lineal";
    src: url("../fonts/Lineal-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: "Lineal";
    src: url("../fonts/Lineal-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

/* // <weight>: Use a value from 100 to 900 */
/* // <uniquifier>: Use a unique and descriptive class name */