@import url("resets.css");

html {
  background: rgba(36, 34, 32, 1);
  color: white;
  font-family: "DM Mono", monospace;
}

/* View Transitions API */
@view-transition {
  navigation: auto;
}

/* Customize the fade transition */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* Slide animation for main content */
::view-transition-old(root) {
  animation-name: fade-out, slide-to-left;
}

::view-transition-new(root) {
  animation-name: fade-in, slide-from-right;
}

/* Keep the title in place during transitions */
::view-transition-old(site-title),
::view-transition-new(site-title) {
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(30px);
  }
}

@scope(.list-of-writings) {
  margin: 2rem 0;

  li {
    padding: 0.15rem 0;
    margin: 0.05rem 0;
  }
}

@scope(.gucci-main) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8rem 0;
  gap: 1rem;
  min-height: 100vh;

  .gucci-title {
    font-weight: 500;
    opacity: 1;
  }
  
  .gucci-content {
    width: 800px;
    margin: 0 auto;
  }

  .gucci-inner-container {
    padding: 3rem 0;
  }
}

.list-block {
  padding: 1rem 0;
}

.list-block-title {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.05rem;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: rgba(120, 240, 190, 0.8);
  text-underline-offset: 0.25rem;
  padding-bottom: 0.375rem;
}

@scope(.doc-links-scope) {
  .one {
    opacity: 0.75;
  }
  .two {
    opacity: 0.3;
    padding: 0 0.25rem;
  }
}

@scope(.foot) {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  .one {
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
  }
  .one:hover {
    opacity: 1;
  }
}

.document-date {
  font-size: 0.825rem;
  opacity: 0.65;
}

@scope(.markdown-scope) {
  h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    margin: 1rem 0;
    font-family: system-ui, sans-serif;
  }
  h1 {
    font-size: 1.825rem;
  }
  p {
    margin: 1rem 0;
    opacity: 0.75;
  }
  ul {
    margin: 1rem 0;
  }

  ul li {
    opacity: 0.75;
  }

  pre {
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: solid 1px rgba(255, 255, 255, 0.1);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.04) !important;
  }
  
  p code {
    padding: 0.1rem 0.15rem;
    border-radius: 0.15rem;
    border: solid 1px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
  }
}

/* For Webkit browsers (Chrome, Safari, Edge) */
/* The entire scrollbar */
::-webkit-scrollbar {
  width: 10px; /* thickness of the vertical scrollbar */
  height: 10px; /* thickness of the horizontal scrollbar */
}

/* The draggable handle */
::-webkit-scrollbar-thumb {
  background: rgba(225,225,225,0.2); /* color of the scrollbar thumb */
  border-radius: 5px; /* rounded corners for the thumb */
}

/* The track (background) of the scrollbar */
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0); /* color of the scrollbar track */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: teal;
}