@tailwind base;
@tailwind components;
@tailwind utilities;

@view-transition {
  navigation: auto;
}

.animated-background {
  background-size: 400%;

  -webkit-animation: animation 3s ease infinite;
  -moz-animation: animation 3s ease infinite;
  animation: animation 3s ease infinite;
}

@keyframes animation {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

aside a {
  position: relative;
  text-decoration: none;
  color: inherit;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background-size: 400%;
  -webkit-animation: animation 3s ease infinite;
  -moz-animation: animation 3s ease infinite;
  animation: animation 3s ease infinite;
}

aside a::after {
  content: "";
  position: absolute;
  top: 0;
  right: -2px;
  width: 2px;
  height: 0;
  background-color: currentColor;
  transition: height 0.3s ease;
}

aside a:hover::after {
  height: 100%;
}

aside a.active::after {
  height: 100%;
}

main.sections {
  overflow: auto;
  height: 100dvh;
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

main > section {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  scroll-snap-align: center;
}