@import "./checkbox.css";
@import "./scrollbar.css";
@import "./input.css";
@import "./popover.css";

@import "./hover.css";

@import "./colors.css";
@import "./theme-toggle.css";

:root {
  --default-section-margin: 64px;

  @media (width < 768px) {
    --default-section-margin: 40px;
  }
}

* {
  line-height: 1.2 !important;
  font-family: "Rawline", ui-sans-serif, system-ui, sans-serif !important;
  transition: all 0.3s ease;
  scroll-padding-top: calc(64px + (var(--default-section-margin) / 2));
  scroll-behavior: smooth;
}
html {
  background-color: var(--surface-primary);
}

.footer-bg-pattern {
  background: #1c1c1c;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'><polygon points='200,0 100,100 0,100 100,0' fill='%23eeeeee14' stroke='none' stroke-width='1'/></svg>");
  background-size: 400px 200px;
  background-repeat: repeat;
}

.link-hover {
  transition: all 0.3s ease-in;

  &:hover {
    letter-spacing: 0.025em;
  }
}
.link-underline-hover,
.link-underline-hover--black {
  position: relative;
  padding: 0 0 4px 0;
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    background-color: var(--primary);

    transition: transform 0.3s;
  }

  &:hover {
    &:after {
      transform: scaleX(1);
    }
  }
}
.link-underline-hover--black {
  &:after {
    background-color: var(--black);
  }
}
.socials-hover {
  transition: all 0.3s ease-in;
  border-radius: 12px;

  &:hover {
    background-color: var(--primary);
  }
}
.card-hover {
  transition: all 0.3s ease-in;
  position: relative;
  overflow: hidden;

  &:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    border-radius: 999px;
    background-color: var(--primary-light);
    filter: blur(40px);
    transform: translate(80px, 20px);
    transition: all 0.3s ease-in;
    width: 120px;
    height: 120px;
  }
  &:hover:after {
    opacity: 0.3;
    visibility: visible;
    transform: translate(20px, 20px);
  }
}