body {
  overflow-x: hidden;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 400;
}

header { /* Header Start */
    display: flex;
    gap: 5%;

    h1 {
        font-family: "IBM Plex Sans Condensed", sans-serif;
        font-weight: 400;
        font-size: 40px;
        letter-spacing: 110%;
        color: #878787;
        margin-left: 3%;
    }

    p {
        font-family: "IBM Plex Sans Condensed", sans-serif;
        font-weight: 400;
        font-size: 32px;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 10px;
        cursor: pointer;
        position: absolute;
        right: 30px;
        top: 45px;
        z-index: 101;

        span {
            display: block;
            width: 64px;
            height: 4px;
            background: #111;
            border-radius: 2px;
            transition: transform 0.5s ease, opacity 0.3s ease;
        }    
    }
    /* Hamburger Animation */
    .hamburger.open span:nth-child(1) { transform: translateY(14px) rotate(45deg); background-color: #fff;}
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-14px) rotate(-45deg); background-color: #fff;}

    .nav {
        background-color: black;
        height: 100vh;
        width: 40vh;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        z-index: 100;
        transform: translateX(100%);
        transition: transform 0.5s ease-out;

        p {
            color: #fff;
            a {
                font-family: "IBM Plex Sans Condensed", sans-serif;
                font-weight: 400;
                letter-spacing: 0.1px;
                color: #fff;
                padding-left: 10%;
                text-decoration: none;
            }
        }

        form {
          button {
            background: none;
            color: #fff;
            font-family: "IBM Plex Sans Condensed", sans-serif;
            font-weight: 400;
            letter-spacing: 0.1px;
            color: #fff;
            padding-left: 10%;
            text-decoration: none;
            border: none;
            font-size: 32px;
            cursor: pointer;
          }
        }
    }

    .nav.open {
        color: #fff;
        transform: translateX(0);
    }

    @media (max-width: 1374px) {
        p {
            display: none;
        }

        .nav.open p {
            display: block;
        }
    }
    @media (max-width: 950px) {
        .hamburger {
            right: 10px;
            top: 25px;
        }

        h1 {
            font-size: 32px;
            letter-spacing: 75%;
        }
    }
} /* Header End */

/* Main Start */
main {
    .main-box {
        background-color: black;
        color: white;
        margin-left: 15%;
        margin-right: 15%;
        margin-top: 5%;
        box-shadow: 0px 4px 70.1px rgba(0, 0, 0, 0.86);

        p {
            font-size: 32px;
            letter-spacing: 10%;
            font-family: "IBM Plex Sans Condensed", sans-serif;
            font-weight: 400;
            padding-left: 20%;
            padding-right: 20%;
            padding-top: 15%;
            padding-bottom: 15%;
        }
    }

    #p2 { 
        display: none;
    }
    #log-link {
      font-family: "IBM Plex Sans Condensed", sans-serif;
      font-weight: 400;
      font-size: 32px;
      letter-spacing: 16%;
      color: #000;
      position: absolute;
      top: 100px;
      right: 20px;
      z-index: 200; /* higher than nav (100) */
    }
    #contact-link {
      font-family: "IBM Plex Sans Condensed", sans-serif;
      font-weight: 400;
      font-size: 32px;
      letter-spacing: 16%;
      color: #000;
      text-align: center;
    }

    .user-form {
      background-color: black;
      color: white;
      margin-left: 40%;
      margin-top: 10%;
      margin-right: 40%;
      padding: 1%;
      padding-bottom: 10%;
      box-shadow: 0px 4px 70.1px rgba(0, 0, 0, 0.86);

      h2 {
        font-family: "IBM Plex Sans Condensed", sans-serif;
        font-weight: 400;
        letter-spacing: 16%;
        font-size: 40px;
        text-align: center;
      }
      label {
        font-family: "IBM Plex Sans Condensed", sans-serif;
        font-weight: 400;
        margin-left: 5%;
        font-size: 24px;
        letter-spacing: 16%;
      }
      input {
        width: 300px;
        height: 25px;
      }
      #i-0 {
        margin-left: 8%;
      }
      .submit {
        width: 250px;
        height: 75px;
        border-radius: 36px;
        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: "IBM Plex Sans Condensed", sans-serif;
        font-weight: 400;
        letter-spacing: 16%;
        font-size: 24px;
        margin-top: 3%;
        margin-left: 25%;
      }

      @media (max-width: 2000px) {
        margin-top: 5%;
        margin-left: 37%;
        margin-right: 37%;
        .submit {
          margin-left: 23%;
        }
        label {
          margin-left: 1%;
        }
        #i-0 {
          margin-left: 4%
        }
      }
      @media (max-width: 1700px) {
        margin-left: 35%;
        margin-right: 35%;
      }
      @media (max-width: 1300px) {
        margin-left: 25%;
        margin-right: 25%;
      }
      @media (max-width: 800px) {
        margin-left: 0%;
        margin-right: 0%;
      }
      @media (max-width: 500px) {
        .submit {
          margin-left: 5%;
        }
        input {
          width: 250px;
        }
      }
    }
      .login-link {
        font-family: "IBM Plex Sans Condensed", sans-serif;
        font-weight: 400;
        letter-spacing: 16%;
        font-size: 40px;
        width: fit-content;
        margin: 0 auto;
        text-align: center;

        a {
          color: #000;
        }
      }

    .portfolio {
      display: flex;
      justify-content: center;
      margin-top: 10%;
      gap: 20px;
      flex-wrap: wrap;
      transition: transform 0.3s ease;
      p {
        font-size: 150px;
      }
      .card {
        max-width: 450px;
        width: 100%;
        height: 450px;
        border-radius: 36px;
        background-image:url(https://placehold.co/450x450.png);
        text-align: center;
        p {
          margin-top: 60%;
          font-family: "IBM Plex Sans Condensed", sans-serif;
          font-weight: 400;
          letter-spacing: 16%;
          font-size: 40px;
          background-color: rgba(0, 0, 0, 0.50);
          padding-bottom: 14%;
          padding-top: 14%;
          border-radius: 0 0  36px 36px;
          color: #fff;
          text-decoration: underline;
        }

        &:hover {
          transform: scale(1.3);
        }
      }
    }

    .contact-form {
      background-color: #000;
      color: #fff;
      font-family: "IBM Plex Sans Condensed", sans-serif;
      font-weight: 400;
      letter-spacing: 16%;
      font-size: 24px;
      box-shadow: 0px 4px 70.1px rgba(0, 0, 0, 0.86);
      margin-left: 38%;
      margin-top: 10%;
      margin-right: 38%;
      padding: 10px;
      padding-bottom: 3%;
      .form-grid {
        display: grid;
        grid-template-columns: 125px 3fr;
        gap: 10px;
        align-items: center;
        grid-template-areas:
        "subject input"
        "message textarea";
        label[for="subject"] {grid-area: subject;}
        #subject {
          grid-area: input;
          width: 375px;
          height: 40px;
          box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
        }
        label[for="message"] {
          grid-area: message;
          margin-bottom: 240%;
        }
        textarea {
          grid-area: textarea; 
          resize: none;
          width: 375px;
          height: 325px;
          box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
        }
      }
      h2 {
        font-weight: 400;
        font-family: 40px;
        padding-left: 20px;
      }
      .submit {
        width: 250px;
        height: 75px;
        border-radius: 36px;
        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-family: "IBM Plex Sans Condensed", sans-serif;
        font-weight: 400;
        letter-spacing: 16%;
        font-size: 24px;
        margin-top: 3%;
        margin-left: 30%;
      }
    }
    @media (max-width: 2000px) {
      label[for="message"]{margin: 0;}
      .contact-form {
        display: flex;
        flex-wrap: wrap;
        margin-top: 3%;
        margin-left: 35%;
        margin-right: 35%;
      }
    }
    @media (max-width: 1600px) {
      .contact-form {
        margin-left: 15%;
        margin-right: 15%;
      }
      .submit {
        margin-left: 0;
      }
    }
    @media (max-width: 768px) {
      .contact-form {
        margin-left: 0;
        margin-right: 0;
        .form-grid {
          display: flex;
          flex-wrap: wrap;
          label[for="message"]{margin:0;}
          textarea {width: 300px; height: 300px;}
          #subject {width: 300px; height: 35px;}
        }
        .submit {margin-left: 0;}
      }
    }
    @media (max-width: 400px) {
      .contact-form {
        .form-grid {
            textarea {width: 200px; height: 300px;}
            #subject {width: 200px; height: 35px;}
        }
      }
    }

    @media (max-width: 1000px) {
        .main-box {
            margin-top: 15%;
            margin-left: 3%;
            margin-right: 3%;

            p {
                padding-left: 5%;
                padding-right: 5%;
                padding-top: 5%;
                padding-bottom: 5%;
            }
        }
    }
} /* Main End */

#success {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 400;
  letter-spacing: 16%;
  text-align: center;
  .link {
    a {color: #000;}
    font-size: 24px;
    font-weight: 800;
  }
} /* Success End */

.socials {
  display: flex;
  justify-content: center;
  gap: 10px;
  svg {
    height: 50px;
    width: 50px;
    fill: #000;
  }
}

.blur /* Blur Class */ {
    filter: blur(5px);
    opacity: 75%;
}

/* Animista Classes */

.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.swing-in-bottom-fwd {
	-webkit-animation: swing-in-bottom-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-bottom-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

.swing-in-top-bck {
	-webkit-animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-3-26 17:20:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation swing-in-top-bck
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-top-bck {
  0% {
    -webkit-transform: rotateX(70deg);
            transform: rotateX(70deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-bck {
  0% {
    -webkit-transform: rotateX(70deg);
            transform: rotateX(70deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation swing-in-bottom-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-bottom-fwd {
  0% {
    -webkit-transform: rotateX(100deg);
            transform: rotateX(100deg);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    opacity: 1;
  }
}
@keyframes swing-in-bottom-fwd {
  0% {
    -webkit-transform: rotateX(100deg);
            transform: rotateX(100deg);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
    opacity: 1;
  }
}