@layer base, library, carousel, carousel-custom;

@import "open-props/style" layer(base);
@import "open-props/normalize" layer(library);

@import "carousel.css" layer(carousel);
@import "custom-carousel-items.css" layer(carousel-custom);

body {
  display: grid;
  gap: 10vh;
  place-content: center;
  overflow-x: hidden;
  max-inline-size: 100vw;

  & > section:first-of-type {
    margin-block-start: 10vh;
  }
  & > section:last-of-type {
    margin-block-end: 10vh;
  }
}

section {
  display: grid;
  gap: 2vh;

  & h2,
  & > header {
    margin-inline: auto;
    text-align: center;
  }
}

.github-corner {
  position: absolute;
  right: 4px;
  width: 80px;
  height: 80px;
  fill: var(--surface-4);
  color: var(--surface-1);
  
  &:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }

  & > svg {
    fill: inherit;
    stroke: inherit;
    position: absolute; 
    top: 0; 
    right: 0;
  }
}

@keyframes octocat-wave{
  0%,100% {
    transform: rotate(0)
  }
  20%,60% {
    transform: rotate(-25deg)
  }
  40%,80% {
    transform: rotate(10deg)
  }
}