/* src/assets/css/style.css */
@font-face {
  font-family: "English Towne";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("English Towne"), url(../fonts/EnglishTowne.woff) format("woff");
}
:root {
  --font-tiny: "Tiny5", monospace;
  --font-body: "Montserrat", sans-serif;
  --dark: oklch(0.1736 0.087 327.5);
  --light: oklch(97% 0.02 325.5);
  --pink: oklch(0.6912 0.33 327.5);
  --grey: oklch(92.98% 0.00256 342.937 / 0.736);
  --background: var(--dark);
  --foreground: var(--light);
  --link-color: var(--light);
  --padding-inline: minmax(10cqw, auto);
  --border:
    conic-gradient(
      at 14px 14px,
      var(--foreground) 75%,
      var(--pink) 0) 14;
}
*,
:after,
:before {
  box-sizing: border-box;
}
@media (prefers-color-scheme: light) {
  :root {
    --background: var(--light);
    --foreground: var(--dark);
    --link-color: var(--pink);
  }
}
@view-transition {
  navigation: auto;
}
::view-transition-group(root) {
  animation-duration: 1.5s;
}
html {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  scroll-behavior: smooth;
  overflow: hidden auto;
  scrollbar-color: var(--pink);
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-tiny);
  font-weight: 400;
}
h1 {
  font-size: 4rem;
}
h2 {
  font-size: 3rem;
}
h3 {
  font-size: 2rem;
  line-height: 1;
}
h4 {
  font-size: 1.2rem;
  line-height: 1;
}
p {
  font-weight: 400;
  font-family: var(--font-body);
  line-height: 1.2;
}
.centered svg {
  width: 24px;
  height: 24px;
  align-self: center;
}
@keyframes parallax-move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(30dvb);
  }
}
#slice1,
#slice2,
#slice3,
#slice4 {
  position: fixed;
  opacity: .18;
  fill: var(--pink);
  animation: parallax-move cubic-bezier(0.67, 0.21, 1, 1);
  animation-timeline: scroll();
  animation-range: 70% 100%;
}
#slice2 {
  top: 7dvb;
  left: 3dvi;
  width: 71px;
  height: 77px;
  animation-range: 10% 100%;
}
#slice3 {
  top: 35dvb;
  left: 85dvi;
  width: 29px;
  height: 29px;
  animation-range: 9% 100%;
}
#slice4 {
  top: 90dvb;
  left: 30dvi;
  width: 35px;
  height: 46px;
}
@layer base {
  body {
    background-color: var(--background);
    background-image:
      conic-gradient(
        at 3px 3px,
        transparent 75%,
        color-mix(in srgb, var(--pink) 20%, transparent) 0);
    background-size: 25px 25px;
    color: var(--foreground);
    display: grid;
    align-items: center;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-columns: minmax(3dvi, 1fr) minmax(0, 1000px) minmax(3dvi, 1fr);
    grid-template-areas: "header header header" "portfolio portfolio portfolio" "clouds clouds clouds" ". main ." ". footer .";
    margin: 0;
    padding: 0;
    > header {
      grid-area: header;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: 2dvb;
      padding-inline: 2dvb;
      background-color: var(--background);
      border-block-end: 4px solid var(--grey);
      span,
      a {
        font-family: var(--font-tiny);
        font-size: 1.5rem;
        font-weight: 400;
        text-decoration: none;
      }
      div:first-child {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      svg {
        width: 2rem;
        height: 2rem;
        fill: linear-gradient(var(--background), var(--pink));
      }
      a {
        color: var(--link-color);
        text-underline-offset: 2px;
        &:hover {
          text-decoration: underline;
        }
      }
      @media screen and (min-width: 768px) {
        margin-block-start: 2dvb;
      }
    }
  }
  @media screen and (min-width: 768px) {
    body {
      grid-template-areas: ". header ." "portfolio portfolio portfolio" "clouds clouds clouds" ". main ." ". footer .";
    }
  }
  main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20dvb;
    max-inline-size: 1000px;
  }
  section.portfolio {
    grid-area: portfolio;
  }
  section.welcome {
    grid-area: clouds;
  }
  footer {
    grid-area: footer;
    text-align: center;
    padding-block: 2dvb;
    padding-inline: 2dvb;
    margin-block-start: 12dvb;
    background-color: var(--background);
    border-block-start: 4px solid var(--grey);
    font-size: 1rem;
    font-family: var(--font-tiny);
  }
}
input:invalid {
  border-color: red;
}
input:valid {
  border-color: green;
}
@layer portfolio {
  .portfolio {
    .gallery {
      inline-size: 100%;
      display: grid;
      gap: 2cqi;
      grid-auto-flow: column;
      grid-auto-columns: auto;
      overflow: scroll hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: thin;
      scrollbar-color: var(--link-color) transparent;
      padding-block: 10dvb;
      justify-items: center;
      > div {
        scroll-snap-align: center;
        background: white;
        box-shadow: 2px 1px 4px #00000094;
        inline-size: min-content;
        animation: portfolio-scroll linear both;
        animation-timeline: view(inline);
        img {
          padding: 17px;
          inline-size: auto;
          block-size: 200px;
        }
        h4 {
          margin-block: 0 17px;
          padding-inline: 17px;
          color: var(--dark);
        }
      }
    }
    &.page {
      .gallery {
        padding-block: 3dvb;
        > div {
          img {
            block-size: 300px;
          }
        }
      }
    }
  }
  @keyframes portfolio-scroll {
    0% {
      transform: rotate(15deg) translateY(10%);
      opacity: 0;
      animation-timing-function: ease-out;
    }
    20% {
      opacity: 1;
    }
    50% {
      transform: rotate(0deg) translateY(0);
      opacity: 1;
      animation-timing-function: ease-in;
    }
    80% {
      opacity: 1;
    }
    100% {
      transform: rotate(-15deg) translateY(10%);
      opacity: 0;
    }
  }
}
@layer clouds {
  .welcome {
    --default-range: entry 50% contain 35%;
    position: relative;
    inline-size: 100%;
    overflow-x: clip;
    view-timeline: --welcome block;
    container-type: inline-size;
    h2,
    p {
      place-self: center;
      padding-inline: clamp(0px, -1e+08% + 6e+08px, 5cqw);
    }
    p {
      max-inline-size: 50ch;
    }
  }
  .clouds {
    position: absolute;
    pointer-events: none;
    inset: 0;
    max-inline-size: 100dvi;
    overflow-x: clip;
    opacity: 0.7;
    img {
      position: absolute;
      left: var(--start-x, 50%);
      top: var(--start-y, 50%);
      translate: calc(-50% + var(--adjust-x, 0px)) -50%;
      scale: var(--scale, 1);
      transform-origin: center;
      will-change: translate, scale;
    }
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @media (prefers-reduced-motion: no-preference) {
        img {
          animation: move-cloud linear both;
          animation-duration: auto;
          animation-timeline: --welcome;
          animation-range: var(--animation-range, var(--default-range));
        }
      }
      @media (prefers-reduced-motion: reduce) {
        z-index: -1;
        opacity: 0.5;
        img {
          --adjust-x: calc(var(--target-x, 0px) / 2.5);
        }
      }
    }
    @supports not ((animation-timeline: view()) and (animation-range: entry)) {
      z-index: -1;
      opacity: 0.5;
      img {
        --adjust-x: calc(var(--target-x, 0px) / 2.5);
      }
    }
  }
  @keyframes move-cloud {
    to {
      translate: calc(-50% + var(--target-x, 0px)) -50%;
      scale: var(--target-scale, 1);
    }
  }
}
@layer services {
  .services {
    inline-size: 100%;
    h2 {
      place-self: center;
    }
  }
  .services-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 8cqb;
  }
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .service-item {
    border: 14px solid black;
    border-image: var(--border);
    position: relative;
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
    background-color: var(--foreground);
    color: var(--background);
    padding: 1.2rem 1.4rem;
    &.page {
      padding: .3rem .7rem;
      background-color: var(--background);
      color: var(--foreground);
      border: 2px solid var(--pink);
    }
    @starting-style {
      opacity: 0;
      transform: translateY(50px);
    }
    h3 {
      margin-block-start: 0;
      a {
        color: var(--background);
        text-decoration: none;
        &:after {
          content: "";
          display: block;
          position: absolute;
          inset-block: 0;
          inset-inline: 0;
        }
      }
    }
    &:has(a:hover) {
      background-color: var(--pink);
    }
    > div.row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2ch;
      span {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2ch;
        svg {
          transform: scale(1.2);
        }
      }
      .price {
        font-family: var(--font-tiny);
        font-size: clamp(2rem, 4vw, 3.5rem);
      }
    }
  }
}
@layer content {
  .content {
    padding-block: 6dvb;
    container-type: inline-size;
    h2,
    p {
      place-self: center;
      padding-inline: clamp(0px, -1e+08% + 6e+08px, 5cqw);
    }
  }
}
@layer contact {
  .contact {
    text-align: center;
    a {
      color: var(--link-color);
    }
  }
  .instalink {
    text-decoration: none;
    color: var(--link-color);
    font-family: var(--font-tiny);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    &:hover {
      text-decoration: underline;
    }
  }
}
/*# sourceMappingURL=style.css.map */