@import '@/assets/fonts/righteous/righteous.css';
@import '@/assets/fonts/work-sans/work-sans.css';
@import '@/scss/base';

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

*::selection {
  background: var(--clr-sebin-red);
}

:root {
  font-size: 16px;
}

body {
  position: relative;
  color: #fff;
  font-family: var(--page-copy-font);
  font-size: 1.25rem;
  line-height: 1.5;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &::before,
  &::after {
    content: '';
    position: fixed;
    inset: 0;
    transition: filter 0.3s linear;
  }

  &::before {
    background-image: url(@/assets/sebin-bust.png);
    background-image: image-set(
      '@/assets/sebin-bust.avif' type('image/avif'),
      '@/assets/sebin-bust.webp' type('image/webp'),
      '@/assets/sebin-bust.png' type('image/png')
    );
    background-size: 80dvh;
    background-position: clamp(max(50% + 10rem, min(50% + 20vw, 50% + 30vw)), 100%, 100%) bottom;
    background-repeat: no-repeat;
    z-index: -1;
  }

  &::after {
    background: url(@/assets/background.svg) center/cover;
    background-color: var(--clr-page-black);
    z-index: -2;
  }

  &.scroll-blur {
    &::before {
      @media (max-width: 62.5em) and (min-height: 22em) {
        filter: blur(0.375rem) brightness(0.75);
      }
    }
  }
}

.scroll-container {
  height: 100dvh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  transition: 0.3s;
}

main {
  min-height: 100dvh;
  max-width: clamp(30em, 100vw, 40em);
  filter: drop-shadow(0 0 0.125rem #000);
}

section {
  padding: 0 max(var(--page-padding), env(safe-area-inset-right))
    max(var(--page-padding), env(safe-area-inset-bottom))
    max(var(--page-padding), env(safe-area-inset-left));
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--page-heading-font);
}

h1 {
  font-size: clamp(3.125rem, 5vw, 4.5rem);
}

h2 {
  font-size: clamp(2.625rem, 4.25vw, 3.875rem);
}

h3 {
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
}

p {
  margin: 0.75em 0;
}

a {
  color: inherit;
  text-shadow: 0 0 0 #fff;

  p & {
    transition:
      color 0.3s linear,
      text-shadow 0.3s linear;

    @media (hover: hover) {
      &:hover {
        color: var(--clr-sebin-yellow);
        text-shadow: 0 0 0.5em var(--clr-sebin-yellow);
      }
    }
  }
}

code {
  font-size: 0.875em;
  background-color: var(--clr-page-black);
  border: 0.0625em solid var(--clr-page-black-light);
  border-radius: 0.5em;
  padding: 0.125em 0.25em;
  white-space: nowrap;
}

img {
  max-width: 100%;
  max-height: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: var(--page-transition);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: var(--page-transform);
}
