*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  font: inherit;
  font-family: 'plus-jarkata-sans';
  box-sizing: border-box !important;
  color: var(--fg-clr); }

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  justify-content: space-between;
  width: 100%;
  align-items: center; }

a, a:visited, a:hover {
  color: unset;
  outline: 0;
  border: 0;
  text-decoration: none; }

a, button {
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 4px;
  outline-color: transparent;
  transition: outline .3s;
  border-radius: 7px; }

a:focus, button:focus {
  outline-color: var(--fg-clr) !important; }

@font-face {
  font-family: 'roboto-condensed';
  src: url("../assets/fonts/Roboto_Condensed/RobotoCondensed-VariableFont_wght.ttf"); }
@font-face {
  font-family: 'indie-flower';
  src: url("../assets/fonts/Indie_Flower/IndieFlower-Regular.ttf"); }
@font-face {
  font-family: 'plus-jarkata-sans';
  src: url("../assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf"); }
:root {
  --max-w: 1000px;
  --header-h: 80px;
  --footer-h: 80px;
  --side-padding: 0rem;
  --bg-clr-dark: #000;
  --fg-clr-dark: #fff;
  --fg-clr-br-dark: rgba(255, 255, 255, 12%);
  --bg-clr-br-dark: #CFCFCF;
  --fg-clr-accent-dark: #3F3F3F;
  --gradient-clr-1-dark: #D734F1;
  --gradient-clr-2-dark: #7D8AFF;
  --gradient-clr-3-dark: #F5268D;
  --gradient-line-dark: linear_gradient(to right, var(--gradinet-clr-1)), var(--gradient-clr-2), var(--gradient-clr-3);
  --bg-clr-light: #000;
  --fg-clr-light: #fff;
  --fg-clr-br-light: rgba(255, 255, 255, 12%);
  --bg-clr-br-light: #CFCFCF;
  --fg-clr-accent-light: #3F3F3F;
  --gradient-clr-1-light: #D734F1;
  --gradient-clr-2-light: #7D8AFF;
  --gradient-clr-3-light: #F5268D;
  --gradient-line-light: linear_gradient(to right, var(--gradinet-clr-1)), var(--gradient-clr-2), var(--gradient-clr-3);
  --bg-clr: #000;
  --fg-clr: #fff;
  --fg-clr-br: rgba(255, 255, 255, 12%);
  --fg-clr-accent: #3F3F3F;
  --bg-clr-br: #CFCFCF;
  --gradient-clr-1: #D734F1;
  --gradient-clr-2: #7D8AFF;
  --gradient-clr-3: #F5268D;
  --gradient-line: linear-gradient(to right, var(--gradient-clr-1), var(--gradient-clr-2), var(--gradient-clr-3)); }

@media only screen and (max-width: 1024px) {
  :root {
    --side-padding: 1rem; } }
header {
  backdrop-filter: blur(10px);
  padding: var(--side-padding);
  z-index: 99;
  max-width: var(--max-w);
  width: 100%;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between; }
  header .logo {
    font-family: 'roboto-condensed';
    font-weight: bold;
    font-size: 1.5rem; }
  header > a {
    font-family: 'roboto-condensed';
    font-weight: bold;
    font-size: 1.5rem; }
  header ul {
    display: flex;
    list-style-type: none;
    gap: 2rem; }
    header ul a {
      border-radius: 7px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600; }
      header ul a div {
        padding: 0.5rem 1rem;
        background-color: var(--bg-clr);
        margin: 4px;
        border-radius: 6px; }
      header ul a.selected {
        background-image: var(--gradient-line); }
        header ul a.selected span {
          background-image: var(--gradient-line);
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent; }

@media only screen and (max-width: 768px) {
  header ul a div {
    padding: 0; }
  header ul a.selected {
    background-image: unset !important; } }
#homepage {
  width: 100%;
  max-width: var(--max-w);
  display: flex;
  justify-content: center;
  align-items: center; }
  #homepage .container {
    display: flex;
    flex-direction: column;
    gap: 1rem; }
    #homepage .container .intro {
      position: relative;
      display: flex;
      justify-content: center; }
    #homepage .container .flex-text {
      display: flex;
      gap: 6px; }
    #homepage .container .marhaba {
      position: absolute;
      bottom: 20px;
      font-weight: bolder;
      color: var(--fg-clr);
      opacity: 0.1;
      font-size: 12rem;
      z-index: -1; }
    #homepage .container .hello {
      color: var(--fg-clr-br); }
      #homepage .container .hello p {
        font-family: 'indie-flower';
        line-height: 16px; }
    #homepage .container h1 {
      font-weight: bolder; }
      #homepage .container h1 .huzain {
        background-image: var(--gradient-line);
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text; }
    #homepage .container .tools {
      text-align: center;
      width: 100%;
      color: var(--fg-clr-br);
      opacity: 0.2;
      cursor: default; }
      #homepage .container .tools .stack {
        margin-top: 1rem;
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        align-items: center; }
        #homepage .container .tools .stack path:hover {
          stroke: white; }
    #homepage .container .cta {
      display: flex;
      align-items: center;
      gap: 2rem; }
      #homepage .container .cta .project_link {
        display: flex;
        gap: 1rem;
        transition: letter-spacing .3s;
        cursor: pointer; }
        #homepage .container .cta .project_link:hover {
          letter-spacing: 3px; }

@media only screen and (max-width: 560px) {
  #homepage .marhaba {
    font-size: 8rem !important; } }
.project-2 {
  width: 100%;
  max-width: 310px;
  height: 310px;
  box-sizing: border-box;
  position: relative; }
  .project-2:hover .t-c {
    padding: 1rem 0 0 1rem; }
  .project-2:hover .b-c {
    padding: 0 1rem 1rem 0; }
  .project-2 .c {
    height: 100%;
    width: 100%;
    position: absolute;
    transition: padding .3s; }
  .project-2 .project-header {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 2px solid var(--fg-clr); }
    .project-2 .project-header .dot {
      border-radius: 10px;
      height: 12px;
      width: 12px;
      display: flex; }
    .project-2 .project-header #x {
      background-color: #E35555; }
    .project-2 .project-header #o {
      background-color: #E3DE55; }
    .project-2 .project-header #d {
      background-color: #69E355; }
  .project-2 .project-content {
    display: flex;
    flex-direction: column;
    flex: 1; }
    .project-2 .project-content .image-container {
      flex-grow: 1;
      flex: 1;
      overflow: hidden;
      position: relative;
      border-bottom: 2px solid var(--fg-clr); }
      .project-2 .project-content .image-container img {
        position: absolute;
        width: 100%;
        max-height: 100%;
        object-fit: cover; }
    .project-2 .project-content .content-container {
      padding: 1rem; }
      .project-2 .project-content .content-container .project-buttons {
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: 1rem; }
        .project-2 .project-content .content-container .project-buttons a {
          cursor: pointer;
          transition: transform .1s ease-in-out; }
          .project-2 .project-content .content-container .project-buttons a:hover {
            transform: scale(1.3); }
          .project-2 .project-content .content-container .project-buttons a span {
            opacity: 0;
            position: absolute; }
        .project-2 .project-content .content-container .project-buttons .project-date {
          margin-left: auto;
          border-radius: 4px;
          padding: 0.4rem 0.5rem;
          font-size: 12px;
          background-color: white;
          color: black;
          font-weight: bold; }
  .project-2 .t-c {
    padding: 0 1rem 1rem 0;
    z-index: 10; }
  .project-2 .b-c {
    padding: 1rem 0 0 1rem;
    z-index: 0; }
  .project-2 .cc {
    border: 2px solid var(--fg-clr);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    height: 100%;
    width: 100%;
    border-radius: 8px; }
  .project-2 .t {
    background-color: var(--bg-clr); }

#projects {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding-top: var(--header-h);
  align-items: center; }
  #projects h1 {
    margin: -2rem 0; }
  #projects section {
    padding: 4rem 0;
    max-width: var(--max-w);
    width: 100%;
    margin: 0 auto; }
    #projects section h2 {
      padding: 1rem 2rem;
      color: var(--bg-clr);
      border-radius: 16px;
      width: fit-content;
      margin: 0 auto;
      margin-bottom: 3rem;
      background-image: linear-gradient(to right, var(--bg-clr-br), white 20% 80%, var(--bg-clr-br)); }
    #projects section .project-list {
      display: flex;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
      width: 100%; }

footer {
  height: var(--footer-h);
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: var(--side-padding);
  max-width: var(--max-w);
  flex-wrap: wrap;
  justify-content: center;
  backdrop-filter: blur(9px); }
  footer a {
    transform: translateY(0px);
    transition: transform .3s ease-in-out;
    cursor: pointer;
    font-weight: 500; }
  footer a:hover {
    transform: translateY(-5px); }

@media screen and (max-width: 1024px) {
  footer {
    font-size: 14px; } }
.btn {
  display: flex;
  border: unset;
  border-radius: 7px;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  background-image: linear-gradient(to right, var(--bg-clr-br), white 20% 80%, var(--bg-clr-br));
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer; }
  .btn span {
    font-family: 'roboto-condensed';
    color: var(--fg-clr-accent); }

.stagger-in-top {
  transform: translate(0, -8px);
  opacity: 0; }

.stagger-rotate {
  transform: rotate(180deg);
  opacity: 0; }

.stagger-rotate-left {
  transform: translate(-180px, 0) rotate(-380deg);
  opacity: 0;
  transition: transform 1s ease-in-out, opacity .3s ease-in-out; }

.stagger-in-bottom {
  transform: translate(0, 8px);
  opacity: 0; }

.stagger-in-left {
  transform: translate(-8px, 0);
  opacity: 0; }

.stagger-in-right {
  transform: translate(8px, 8px);
  opacity: 0; }

.staggered {
  transform: translate(0, 0) rotate(0);
  opacity: 1; }

.stagger-ultra-slow {
  transition: transform 2s ease-in-out, opacity 2s ease-in-out; }

.stagger-slow {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out; }

.stagger-medium {
  transition: transform .8s ease-in-out, opacity .8s ease-in-out; }

.stagger-fast {
  transition: transform .5s ease-in-out, opacity .5s ease-in-out; }

.stagger-ultra-fast {
  transition: transform .3s ease-in-out, opacity .3s ease-in-out; }

.jump-out {
  animation-name: jump-out;
  animation-duration: .3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-direction: normal; }

@keyframes jump-out {
  0% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(-20px); } }
:root {
  font-size: 16px; }

.flex {
  display: flex; }

.justify-betwen {
  justify-content: between; }

.flex-col {
  flex-direction: column; }

.roboto-condensed {
  font-family: 'roboto-condensed' !important; }

.indie-flower {
  font-family: "indie-flower"; }

.plus-jarkata-sans {
  font-family: "plus-jarkata-sans"; }

.semibold {
  font-weight: 600; }

.bold {
  font-weight: bold; }

.bolder {
  font-weight: bolder; }

.underline {
  text-decoration: underline; }

.text-xs {
  font-size: .5rem; }

.text-sm {
  font-size: .75rem; }

.text-md {
  font-size: 1rem; }

.text-lg {
  font-size: 1.25rem; }

.text-xl {
  font-size: 1.50rem; }

.text-2xl {
  font-size: 2rem; }

.text-3xl {
  font-size: 2.5rem; }

.text-4xl {
  font-size: 2.75rem; }

.text-5xl {
  font-size: 3rem; }

.text-6xl {
  font-size: 3.25rem; }

.text-7xl {
  font-size: 3.5rem; }

.text-8xl {
  font-size: 4rem; }

@media only screen and (max-width: 768px) {
  .text-xs {
    font-size: .5rem; }

  .text-sm {
    font-size: .5rem; }

  .text-md {
    font-size: .75rem; }

  .text-lg {
    font-size: 1rem; }

  .text-xl {
    font-size: 1.25rem; }

  .text-2xl {
    font-size: 1.5rem; }

  .text-3xl {
    font-size: 2rem; }

  .text-4xl {
    font-size: 2.5rem; }

  .text-5xl {
    font-size: 2rem; }

  .text-6xl {
    font-size: 3rem; }

  .text-7xl {
    font-size: 3rem; }

  .text-8xl {
    font-size: 3.5rem; } }
@media only screen and (max-width: 560px) {
  .text-2xl {
    font-size: 1.25rem; }

  .text-4xl {
    font-size: 2rem; }

  .text-8xl {
    font-size: 2.25rem; } }

/*# sourceMappingURL=styles.css.map */