html, body{
    margin: 0; padding: 0;
    width: 100vw;
    font-size: 1vw;
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-color: rgb(244, 244, 244);
}


@font-face {
    font-family: "Shift-Serif-Light";
    src: url(../fonts/Shift-seriflight.woff) format(woff);
    font-weight: 100;
    text-rendering: geometricPrecision;
}
@font-face {
    font-family: "Shift-Serif-Slant";
    src: url(../fonts/Shift-seriflightslant.woff) format(woff);
    font-weight: 100;
    text-rendering: geometricPrecision;
}


:root{
    --title-sinus: 11px;
    --running-text: 11px;
    --sinus-line-height: 17px;
}
article{
    max-width: 96vw;
    padding: 15rem 0 0 0;
}

.home-main-about{
    display: none;
}
.horizontal-spacer-1{
    position: relative;
    margin: 0;
    padding: 0;
    height: 4rem;
    width: 80vw;
}
.header{
    position: fixed;
    top: 5px;
    right: 8px;
    z-index: 9999;
    text-align: right;
}

.header a{
    font-family: "Shift-Serif-Light";
    color: black;
    text-decoration: none;
    font-size: var(--running-text);
}
.close{
    z-index: 999;
    position: fixed;
    top: 1rem; 
    left: 2rem;
}
.close a{
    font-family: "Shift-Serif-Light";
    color: black;
    text-decoration: none;
    font-size: var(--running-text);
}

nav.cycles{
    position: relative;
    padding: 5px 0 5px 0.6rem;
    flex-wrap: wrap;
    width: 60rem;
    opacity: 1;

}
.cycles a{
    position: relative;
    padding: 0 2px 0 2px;
    margin: 0 0.5rem 0.5rem 0 ;
    z-index: 999999;
    float: left;
    font-family: "Shift-Serif-Light";
    font-size: var(--title-sinus);
    font-weight: 100;
    line-height: var(--sinus-line-height);
    text-decoration: none;
    /* background-color: rgb(213, 213, 213); */
}


.cycles li, ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 60vw;
}

.cycle-info{
    max-width: 85vw;
}
.cycle-gallery{
    margin: 0;
    padding: 0;
    width: 100vw; 

}
.wrapper-gallery{
    margin: 0;
    padding: 0 0 5rem 0;
    overflow-x: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    max-height: auto;
    width: 100vw;
    position: relative;
    transition:0.2s;

}
.wrapper-gallery::-webkit-scrollbar {
    display: none;
}
.gallery-elements{
    margin: 0;
    padding: 0 0 4rem 0;
    width: fit-content;
}

ul.wrapper-gallery{
    margin: 0;
    padding: 0;
    height: fit-content;
    margin-block-start: 00;
    margin-block-end: 0;
    padding-inline-start: 0;
}
img{
    margin: 0;
    padding: 0;
    position: relative;
    width: 100vw;
    float: top;
    animation: blur 1s;
}
@keyframes blur {
    0%{filter: blur(100px);}
    25% {filter: blur(27px);}
    30%{filter: blur(30px);}
    95%{filter: blur(1px);}
    100%{filter: blur(0);}
}
.zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
  cursor: crosshair;
}

.zoom-overlay.visible {
  display: flex;
}

.zoom-overlay img.enlarged {
  max-width: 98vw;
  max-height: 98vh;
  transition: transform 0.3s ease;
}
.zoom-overlay img.enlarged + img{
    opacity: 1;
}
p{
    font-weight: 100;
    width: fit-content;
    font-family: "Shift-Serif-Light";
    font-size: var(--running-text);
    margin: 0.3rem 0 0.4rem 2rem;
    opacity: 1;
}
.gallery-elements p {
    max-width:fit-content;

}
a {
  color: black;
  text-decoration: none;
}
h1{
    margin: 0;
    padding:0;
}

.contact a{
    margin: 0;
    z-index: 999999;
    font-family: "Shift-Serif-Light";
    font-size: var(--title-sinus);
    font-weight: 100;
    text-decoration: none;

}

.underline{
    text-decoration: underline !important;
}

summary{
    margin: 2rem;
    font-family: "Shift-Serif-Light";
    font-size: var(--running-text);
    list-style: none;
    /* background-color: rgb(213, 213, 213); */
    width:fit-content;
}

.animate-blur {
  animation: blur 2s forwards;
}



/* DESKTOP */
@media screen and (min-width: 992px) {


    :root{
        --title-sinus: 12px;
        --running-text: 12px;
        --sinus-line-height: 22px;
    }

    ::-moz-selection { /* Code for Firefox */
        color: white;
        background: black;
      }
      
    ::selection {
        color: white;
        background: black;
      }

    ::-webkit-scrollbar {
        display: none;
    }
    
    .header{
        grid-template-columns: 97vw;
    }

    article{
        padding: 15vh 0 0 0;
    }

    .horizontal-spacer-1{
        height: 2rem;
    }
    .wrapper-gallery {
        display: flex;
        padding: 0;
        overflow-x: scroll;
        overflow-y: hidden; /* Hide vertical scroll */
        white-space: nowrap;
        scroll-behavior: smooth; /* Optional for smoother scrolling */
    }

    .gallery-elements{
        margin: 0;
        padding: 0 0 0.2rem 0;
        width: auto;
    }
    img{
        width: auto;
        max-height: 75vh;
        min-height: 75vh;
    }

    .gallery-elements p {
        max-width: 150vw;
        white-space: wrap;

    }
    p{
        margin: 0rem 0 0.2rem 0.7rem;

    }


    .go-top{
        left: 50%;
        top: 0;
        padding: 1rem;
        z-index: 999999;
        transform:  rotate(90deg) translate(0, -50%);
        font-family: "Shift-Serif-Light";
        font-size: var(--running-text);
        position: fixed;
        cursor: pointer;
    }
    summary{
        margin: 0
    }
    .close{
        top: 0.5rem; 
        left: 0.5rem;
}
    details{
        padding: 0 0 0 0.7rem;
    }
    a:hover{
        font-family: "Shift-Serif-Slant";
        letter-spacing: 0.003rem;
        animation: font-blur 0.4s ;
    }
    summary:hover{
        animation: font-blur 0.4s ;
        font-family: "Shift-Serif-Slant";

    }

    @keyframes font-blur{
        0%  { filter: blur(0px); }
        20% { filter: blur(1px); }
        100%{ filter: blur(0px); }

    }

}