@font-face {
  font-family: Filson;
  src: url(/Filson_Soft_Bold.otf);
}

* {
  box-sizing: border-box;
}
html {
  margin: 0;
  scrollbar-width: none;
  scroll-behavior: smooth;
  
}

body {
  margin: 0;
  font-family: Filson;
  background-color: #000;
  cursor: url('/home/cursor.cur'), auto;
  
}


main {
  height: 110vh;
  overflow: hidden;
  border-bottom: #45bfd3 100px solid;
}

main canvas {
  display: block;   /* removes the small gap under inline canvases */
}


video{
  position: absolute;
  display: block;
  
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    top: 60%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: black;
    width: 60%;
 
}

/* lebunger */

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: black;   /* dark, because your mobile bar is light */
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}


#menubar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 7vw;

  font-family: Filson, sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 1vw + 0.5rem, 1.25rem);

  box-shadow: 0 2px 25px black;
  transition: transform 0.3s;
}

/* hide on scroll: toggle this class from JS */
#menubar.hidden {
  transform: translateY(-100%);
}

#menubar .logo img {
  display: block;
  height: 3rem;      /* size by height, not width: 110% */
  width: auto;
}

#menubar ul {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menubar nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
}

#menubar nav a:hover,
#menubar nav a[aria-current="page"] {
  color: #f05353;   /* your red */
}
 
 @keyframes gradient-89 {
   0% { background-position: 100% 0%; }
   50% { background-position: 0% 0%; }
   100% { background-position: 100% 0%; }
 }


 #current{
  color: #f05353;
  font-weight: 600;
 }

.main{
    width: 100%;
    height: 100%;
    position: fixed;
    display: contents;
    margin: 0;
    background-color: rgb(207, 66, 66);
}



  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }
 



.about{
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
  position: relative;
  font-family: 'Segoe UI';
  column-width: 20%;
  
  padding: 90px;
  row-gap: 9%;
  color: white;
}

a{
  color: white;
  font-style: none;
  text-decoration: none;
  justify-self: self-end;
}



:root {
    --items: 5;
    --gap: 0.75rem;

    --border-xl: 20px;
    --border-m: 8px;
    --border-s: 6px;

    --accent-color: hsl(198, 86%, 53%);
    --fill-primary: hsl(204, 3%, 47%);
    --fill-active: hsl(204, 23%, 20%);
    --fill-disabled: hsl(204, 9%, 85%);
}



img {
    height: 100%;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}



.image-thumbnail-carousel {
    padding: 1rem;
    width: clamp(360px, 90vw, 920px);
    display: flex;
    flex-flow: column;
    gap: 1rem;
    position: relative;
    justify-self: anchor-center;
    top: 10%;
   
}

.image-display {
    border-radius: var(--border-xl);
    overflow: hidden;
    min-height: 50vmin;
    aspect-ratio: 16 / 9;
    box-shadow: 0 0.375em 0.67em #0003, 0 0.5em 1.3em #0002;
}

.screen {
    block-size: 100%;
    display: flex;
    background-image: linear-gradient(12deg, #aaa, #eee);
    position: relative;
    user-select: none;
}

.thumbnail-carousel {
    display: flex;
    gap: var(--gap);
    block-size: 100%;
}

.carousel__btn {
    flex: 1 0 max(2.75rem, 5.834%);
    background: #0000;
    border: 1px solid #0000;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.arrow-icon {
    margin-inline: auto;
    outline: none;
    border: 0;
    scale: 1;
    display: inline grid;
    width: max(80%, 1.5rem);
    height: max(80%, 1.5rem);
    fill: var(--fill-primary);
}

.carousel__btn:hover .arrow-icon {
    fill: var(--fill-active);
}

.carousel__btn:disabled {
    opacity: 0.1;
    pointer-events: none;
}

.carousel__slider {
    user-select: none;
    flex-grow: 999;
    list-style: none;
    display: flex;
    gap: var(--gap);
    padding: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.carousel__slider::-webkit-scrollbar {
    display: none;
}

.carousel__slide {
    cursor: pointer;
    border-radius: var(--border-m);
    overflow: hidden;
    scroll-snap-align: center;
    flex: 1 0 calc((100% / var(--items)) - 10px);
}

.active.carousel__slide {
    outline: 0.125em solid var(--accent-color);
    outline-offset: -0.37em;
}

@media (max-width: 680px) {
    .image-thumbnail-carousel {
        width: 90vw;
    }

    .active.carousel__slide {
        background-color: var(--fill-active);
        outline-offset: 3px;
    }

    .carousel__btn {
        flex-grow: 0;
    }

    .thumbnail-carousel {
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel__slider {
        max-width: fit-content;
        align-items: center;
        gap: 1em;
    }

    .carousel__slide {
        flex: none;
        aspect-ratio: 1;
        block-size: 0.625rem;
        border-radius: 50%;
        background-color: var(--fill-primary);
    }

    .thumbnail {
        opacity: 0;
        display: none;
        aspect-ratio: 16 / 9;
        block-size: 8vw;
        position: absolute;
        border-radius: var(--border-s);
        overflow: hidden;
        z-index: 99;
        will-change: transform, opacity;
        transition: opacity 150ms ease-out;
        transform-origin: bottom;
        translate: -50%;
        bottom: 20%;
    }

    .carousel__slide:not(.active):hover .thumbnail {
        opacity: 1;
        display: block;
        animation: show 250ms ease-out forwards;
        box-shadow: 0 0.375em 0.67em #0003, 0 0.5em 1.3em #0002;
    }

    @keyframes show {
        from {
            opacity: 0;
            transform: scale(0);
        }
        to {
            display: block;
            transform: scale(1);
            opacity: 1;
        }
    }
}

@media screen and (max-width: 600px){
.about {
       grid-template-columns: 1fr;
    display: grid;
    position: relative;
    font-family: 'Segoe UI';
    column-width: 20%;
    padding: 30px;
    row-gap: 1%;
    color: white;
    justify-content: center;
}

#menubar {
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 7vw;

  font-family: Filson, sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 1vw + 0.5rem, 1.25rem);
  background-color: rgba(70, 70, 70, 0.301);
  box-shadow: 0 2px 25px black;
  border: rgb(121, 121, 121) solid 1px;
  border-radius: 20px;
  left: 5%;
  right: 5%;
  top: 2%;
  transition: transform 0.3s;
}

.burger { display: block; color: white;}
.burger span {
  background: white;
}

/* dropdown panel, styled like your rounded bar */
#menubar nav {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  justify-self: end;
  border:  rgb(121, 121, 121) solid 1px;
  background-color: rgba(70, 70, 70, 0.301);
 
  border-radius: 20px;
  box-shadow: 0 2px 25px black;
}

#menubar.open nav { display: block; }

#menubar ul {
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 1.5rem;
}

#menubar nav a {
  display: block;
  padding: 1rem 0;
  font-size: 1.2rem;
}

/* burger turns into an X */
#menubar.open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#menubar.open .burger span:nth-child(2) { opacity: 0; }
#menubar.open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* your mobile bar sits at top: 2%, so -100% wouldn't fully hide it */
#menubar.hidden { transform: translateY(calc(-100% - 5vh)); }



.image-thumbnail-carousel {
    padding: 1rem;
    width: clamp(360px, 90vw, 920px);
    display: flex;
    margin-top: 10%;
    flex-flow: column;
    gap: 1rem;
    position: relative;
    justify-self: anchor-center;
    top: 10%;
}

a {
    color: white;
    font-style: none;
    text-decoration: none;
    justify-self: self-start;
}
}