:root {
  color-scheme: light dark;
  --light-bg: #ffffff;
  --light-color1: #000;
  --light-color1l: #00000080;
  --light-color2: #1c1c1c;
  --light-color3: #bdbdbd;
  --light-color3l: #bdbdbd80;
  --light-contrast: #fff;
  --dark-bg: #111;
  --dark-color1: #fff;
  --dark-color1l: #ffffff80;
  --dark-color2: #eaeaea;
  --dark-color3: #353535;
  --dark-color3l: #35353598;
  --dark-contrast: #000;
}
  * {
    margin: 0;
    padding: 0;
  }

  body{
    background-color: light-dark(var(--light-bg),var(--dark-bg));
    display: grid;
    height: 100dvh;
    background-image: url(../asset/cample.avif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    grid-template-rows: [row1-start] 4dvh [row1-end row2-start] auto [row2-end row3-start] 4dvh [row3-end];
    background-position: 50% 50%;
  }

  .DivLogo{
    filter: drop-shadow(0 0 30px light-dark(var(--light-color1),var(--dark-color1)));
    Transition: cubic-bezier(.75, 0, 0, 1) 0.5s;
    height: auto;
    background-image: url(../asset/logo.svg);
    background-repeat: repeat-x;
    animation: slide 12s linear infinite;
    will-change: background-position;
    z-index: -1;
    overflow: hidden;
    background-size: 50dvh;
  }
  

  @keyframes slide {
    0% {
      background-position: 0px 50%;
    }
    100% {
      background-position: 50dvh 50%;
    }
  }

  .DivNav{
    scrollbar-width: none;
    Transition: cubic-bezier(.75, 0, 0, 1) 0.5s;
    display: grid;
    align-content: baseline;
    overflow-y: scroll;
    overflow-x: clip;
    gap: 4%;
    padding: 1dvh 2dvw;
  }
  .nav-btn{
    width: fit-content;
  display: inline-block;
  height: 8dvw;
  }

  .nav-btn svg{
    fill: light-dark(#ffffff15,#00000015);
    stroke: light-dark(#00000075,#ffffff75);
    stroke-width: 0.5;
    text-decoration-line: none;
    transition: cubic-bezier(.75, 0, 0, 1) 0.25s;
    height: 100%;
  }

  .nav-btn svg:hover {
    transition: cubic-bezier(.75, 0, 0, 1) 0.5s;
    transform: translate(-6px, -6px);
    stroke-width: 2;
    fill: light-dark(var(--light-contrast),var(--dark-contrast));
    stroke: light-dark(var(--light-color1),var(--dark-color1));
    filter: drop-shadow(0.7vh 0.7vh light-dark(var(--light-color1),var(--dark-color1))) 
    /*drop-shadow(1vh 1vh light-dark(var(--light-contrast),var(--dark-contrast)))*/;
  }

  @media (max-aspect-ratio: 1/1){
    .nav-btn {
      height: auto;
      width: auto;
    }
    .nav-btn > svg{
      width: 100%;
    }
    .DivNav {
    align-content: end;
    gap: 2%;
    }

    .DivLogo{
      animation: slide 16s linear infinite;
    }
  }

  @media (min-aspect-ratio: 4/1){
  
    .DivNav{
      display: flex;
      align-content: baseline;
      align-items: center;
      justify-content: center;
    }
  }

     /*for friends.html*/