// Copyright Ayush Singh 2021,2022. All Rights Reserved.
// Project: folio
// Author contact: https://www.linkedin.com/in/alphaayush/
// This file is licensed under the MIT License.
// License text available at https://opensource.org/licenses/MIT

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

@font-face {
  font-family: "Google Sans";
  src: local("Google Sans Medium"), local("GoogleSans-Medium"),
    url("/fonts/GoogleSans-Medium.woff2") format("woff2"),
    url("/fonts/GoogleSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans";
  src: local("Google Sans Bold"), local("GoogleSans-Bold"),
    url("/fonts/GoogleSans-Bold.woff2") format("woff2"),
    url("/fonts/GoogleSans-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  @apply bg-gray-900 text-white overflow-x-hidden;
  cursor: none;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;

  @media (min-width: 768px) {
    font-size: 14px;
  }

  @media (min-width: 1024px) {
    font-size: 15px;
  }

  @media (min-width: 1536px) {
    font-size: 18px;
  }
  @media (min-width: 1800px) {
    font-size: 20px;
  }
  @media (min-width: 2000px) {
    font-size: 22px;
  }
}

:root {
  color-scheme: dark;
}

::-moz-selection {
  color: white;
  background: black;
}

::selection {
  color: white;
  background: black;
}

.section-container {
  @apply 2xl:container xl:px-20 md:px-12 px-4 mx-auto;
}

a {
  cursor: none !important;
}

.typed-cursor {
  font-size: 2rem;
}

.outer-menu {
  &.menu-visible {
    .hamburger {
      > div {
        transform: rotate(135deg);
        &:before {
          top: 0;
          transform: rotate(90deg);
        }
        &:after {
          top: 0;
          transform: rotate(90deg);
          opacity: 0;
        }
      }
    }
    .menu {
      pointer-events: auto;
      visibility: visible !important;
      backdrop-filter: blur(0.625rem);
      -webkit-backdrop-filter: blur(0.625rem);
      > div {
        transform: scale(1);
        transition-duration: 0.75s;
        > div {
          opacity: 1;
          transition: opacity 0.4s ease 0.4s;
        }
      }
    }
    &:hover {
      .hamburger {
        > div {
          transform: rotate(225deg);
        }
      }
    }
  }
  .hamburger {
    z-index: 1;
    backface-visibility: hidden;

    > div {
      height: 0.125rem;
      transition: all 0.4s ease;
      -webkit-box-pack: center;
      &:before,
      &:after {
        content: "";
        z-index: 1;
        position: absolute;
        left: 0;
        width: 100%;
        top: -0.5rem;
        height: 0.125rem;
        background: inherit;
        transition: all 0.4s ease;
      }
      &:after {
        top: 0.5rem;
      }
    }
  }
  .menu {
    backface-visibility: hidden;
    outline: 0.0625rem solid transparent;
    > div {
      width: 250vw;
      height: 250vw;
      transform: scale(0);
      will-change: transform;
      border-radius: 50%;
      transition: all 0.4s ease;
      backface-visibility: hidden;
      background: rgba(0, 0, 0, 0.5);
      @supports not (backdrop-filter: blur(1px)) {
        background: rgba(0, 0, 0, 0.8);
      }

      > div {
        max-width: 90vw;
        transition: opacity 0.4s ease;
      }
      ul {
        li {
          a {
            background: linear-gradient(
              90deg,
              #ffffff 0%,
              #ffffff 50%,
              #6dd5ed 51%,
              #2193b0 100%
            );
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            &:hover,
            &:focus {
              background-position: 100% 0;
            }
          }
        }
      }
    }
  }
}

.progress {
  height: 0.1875rem;

  .progress-bar {
    height: 0.2rem;
    transform-origin: left;
    will-change: transform;
    transform: scaleX(0);
    @apply w-full bg-white;
  }
}

.text-gradient {
  background: linear-gradient(90deg, #6dd5ed 0%, #2193b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-strong {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 50%,
    #6dd5ed 51%,
    #2193b0 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project-wrapper::-webkit-scrollbar {
  display: none;
}

.skill {
  padding-right: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

footer {
  background: url("/footer-bg.svg"),
    linear-gradient(
      153.86deg,
      #02494c 0%,
      #016877 15.69%,
      #0d576d 48.9%,
      #004865 95.52%
    );
}

.section-heading {
  @apply md:text-5xl text-4xl font-bold text-gradient w-fit;
}

.section-title-sm {
  @apply uppercase tracking-widest text-gray-200 text-sm;
}
