@import 'https://unpkg.com/open-props' layer(design.system);
@import 'https://unpkg.com/open-props/normalize.dark.min.css'
  layer(demo.support);

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..900&display=swap');

@layer demo.base {
  :root {
    font-family: 'Inter', sans-serif;
    --sm-font-size: 0.875rem;
    --size: min(470px, 100dvw);
  }
  body {
    display: grid;
    place-content: center;
    background-color: #000000;
    padding-block: var(--size-fluid-3);
  }


.header {
    display: flex;
      justify-content: center;
      gap: var(--size-2);
      padding: 1px;


max-height: 70px;

& img {

max-height: 70px;
}
}

  .myButton {
    box-shadow: 6px 6px 11px -8px #b80009;
    background:linear-gradient(to bottom, #faafdc 5%, #fa55b0 100%);
    background-color:#fa55b0;
    border-radius:14px;
    border:1px solid #fa99e3;
    width: 40%;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    font-weight:bold;
    padding:8px 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #e60041;
    text-align: center;
  }
  .myButton:hover {
    background:linear-gradient(to bottom, #ffffdc 5%, #ffc88f 100%);
    background-color:#faafdc;
  }
  .myButton:active {
    position:relative;
    top:1px;
  }
  .myButtonV {
    box-shadow: 6px 6px 11px -8px #b80009;
    background:linear-gradient(to bottom, #ffbeff 5%, #fa55b0 100%);
    background-color:#cff5b0;
    border-radius:14px;
    border:1px solid #fa99e3;
    width: 100%;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    font-weight:bold;
    padding:8px 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #e60041;
    text-align: center;
  }
  .myButtonV:hover {
    background:linear-gradient(to bottom, #ffffdc 5%, #ffc88b 100%);
    background-color:#cff5b0;
  }
  .myButtonV:active {
    position:relative;
    top:1px;
  }
  section {
    display: grid;
    justify-content: center;
    gap: var(--size-10);
    
    & .visual1 {  
      display: flex;
      flex-direction: column;
      width: 88%;
    place-self: center;
    background-color: #364354;
      border-radius: 1em;
      gap: var(--size-3);

    
    
    row-gap: 0px;

    & header {
      display: flex;
      align-items: center;
      gap: var(--size-2);
      padding: 1em;
      > a {
        inline-size: 5.5rem;
        aspect-ratio: var(--ratio-square);
        border-radius: var(--radius-round);

      }
      & img {
        inline-size: 5.5rem;
        aspect-ratio: var(--ratio-square);
        border-radius: var(--radius-round);
      }

      & p {
        font-size: var(--sm-font-size);
        font-weight: var(--font-weight-6);
      }

      & i {
        color: var(--blue-5);
      }

      > div {
        display: flex;
        align-items: center;
        gap: var(--size-1);
      }

      @media (width < 468px) {
        padding-inline: var(--size-3);
      }
    }

    .card {
      display: flex;
      flex-direction: column;
      
      gap: var(--size-3);
      position: relative;
      padding: 1em;
      
      & button {
        background: transparent;
      }

      .visual {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--size);
        inline-size: var(--size);
        block-size: var(--size);
        overflow-x: auto;
        background-color: #242424;
        border-radius: 1em;
        max-width: 100%;
      
        /* Hide scrollbar */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        &::-webkit-scrollbar {
          display: none;
        }

        & img {
        
    
          writing-mode: horizontal-tb; 
          border-radius: var(--radius-1);
          border: var(--border-size-1) solid var(--stone-11);
       
        }
      }
      

      .controls {
        position: absolute;
        z-index: 1;

        inset-inline: var(--size-2);

        inset-block-start: 50%;
        display: flex;
        justify-content: space-between;
      }

      & button {
        inline-size: var(--size-8);
        border-radius: var(--radius-round);
        aspect-ratio: var(--ratio-square);
        font-size: 1.75rem;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-shadow: var(--shadow-1);
        color: var(--stone-1);
        transition: color 0.2s ease;

        &:hover {
          color: var(--stone-2);
        }
      }
    }

    .pagination {
      position: absolute;
      z-index: 1;
      inset-inline: 0;
      inset-block-end: var(--size-5);

      display: flex;

      justify-content: center;
      gap: var(--size-1);

      & button {
        display: inline-flex;
        place-content: center;
        inline-size: 0.5ex;
        flex-shrink: 0;
        aspect-ratio: var(--ratio-square);
        border-radius: var(--radius-round);
        background-color: hsl(0 0% 100%/ 60%);
      }
    }

    .social {
      display: grid;
      gap: var(--size-1);
      padding: 1em;
      & button {
        background-color: unset;
        font-size: var(--font-size-3);
        padding: 0;
      }

      .inter {
        display: flex;
        align-items: center;
        justify-content: space-around;
         gap: var(--size-2);
        

        > div {
          display: flex;
          gap: var(--size-3);
        }
      }

      & p {
        font-size: var(--sm-font-size);
        font-weight: var(--font-weight-6);
      }
      @media (width < 468px) {
        padding-inline: var(--size-3);
      }
    }
    }
  }
}

@layer demo.scroll-driven-animation {
  .visual {
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scroll-timeline: --carousel inline;

    > * {
      scroll-snap-align: center;
    }

    & img {
      view-timeline-axis: inline;
      perspective: var(--size);
    }
  }

  .pagination > button {
    /* every dot use the scale animation */
    animation: scale linear both;
  }

  .next {
    animation: auto next ease;
    animation-timeline: --carousel;
  }

  .previous {
    animation: auto prev ease;
    animation-timeline: --carousel;
  }
}

@keyframes scale {
  0%,
  100% {
    scale: 0.75;
  }
  50% {
    scale: 1;
    background-color: white;
  }
}

@keyframes prev {
  from {
    visibility: hidden;
  }
}

@keyframes next {
  to {
    visibility: hidden;
  }
}