@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Titan+One&display=swap'); 
  * {
    font-family: 'Courier New', Courier, monospace;
    cursor: default; }

    body {
      background-color: #282A36;
      color: #F8F8F2; }

      a:hover {
        text-decoration: none; }

        hr {
          background-color: #A9B7C6;
          margin: 3rem 0; }

          .nav-bar {
            border-bottom: 2px solid #A9B7C6;
            background-color: #44475A; }

            .nav-button {
              user-select: none;
              border-radius: 25rem;
              cursor: pointer;
              background-color: #FFB86C;
              color: #44475A;
              position: relative; }
              .nav-button a {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                border-radius: inherit;
                cursor: pointer; }
                .nav-button:hover {
                  background-color: #8BE9FD; }
                  @media (max-width: 400px) {
                    .nav-button {
                      padding-right: 2rem !important;
                      padding-left: 2rem !important;   }
}

  .hero-image {
    z-index: 0;
    position: absolute;
    top: 60%;
    right: 0; }
    @media (min-width: 991px) {
      .hero-image {
        left: 75%;
        top: 60%;   }
}

  .logo-font {
    user-select: none;
    font-size: 2rem;
    font-family: 'Rubik Mono One', monospace;
    color: #50FA7B; }

    .section-title {
      font-size: 3rem;
      font-weight: bold;
      text-align: center;
      color: #F8F8F2; }
      @media (max-width: 420px) {
        .section-title {
          font-size: 2.5rem;   }
}

  .short-desc {
    font-size: 3rem;
    font-weight: bold;
    max-width: 680px; }

    .projects {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

      .project-frame {
        margin: 1rem;
        padding: 0;
        border: 2px solid #A9B7C6;
        border-radius: 2rem;
        aspect-ratio: 1 / 1;
        position: relative;
        user-select: none;
        cursor: pointer; }
        .project-frame img {
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: inherit; }
          .project-frame div {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background-color: rgba(139, 233, 253, 0.8);
            opacity: 0;
            transition: 0.5s;
            cursor: pointer; }
            .project-frame p {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              opacity: 0;
              transition: 0.5s;
              font-size: 1.5rem;
              font-weight: bold;
              color: #44475A;
              text-align: center; }
              .project-frame a {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: inherit;
                cursor: pointer; }
                .project-frame:hover p {
                  opacity: 1; }
                  .project-frame:hover div {
                    opacity: 1; }

  .contribution {
    border: 1px solid #F8F8F2;
    padding: 2rem;
    border-radius: 2rem;
    margin: 1.5rem 0; }
    .contribution h1 {
      font-size: 2rem;
      font-weight: bold; }
      .contribution a {
        color: #F8F8F2;
        text-decoration: underline; }
        .contribution a:hover {
          text-decoration: underline;
          cursor: pointer; }
    .contribution p {
      margin-top: 1rem;
      margin-bottom: 0; }

  .skillset-note {
    border-radius: 2rem;
    background-color: #FFB86C;
    color: #44475A;
    padding: 2rem;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600; }

    .skillset-note-title {
      font-size: 2.5rem;
      font-weight: bold; }
      @media (max-width: 991px) {
        .skillset-note-title {
          text-align: center;   }
}

  .skillset-speciality-wrapper {
    display: flex;
    position: relative; }
    .skillset-speciality-wrapper .skillset-speciality {
      transition: 0.1s;
      display: flex;
      align-items: center;
      height: 100px; }
      .skillset-speciality-wrapper .skillset-speciality object {
        width: 70px;
        margin-right: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
        text-align: center; }
        @media (max-width: 420px) {
          .skillset-speciality-wrapper .skillset-speciality div {
            font-size: 1.5rem;   }
}
    .skillset-speciality-wrapper:hover .skillset-speciality {
      transform: translateX(2rem); }

  .footer {
    border-top: 2px solid #A9B7C6;
    background-color: #44475A;
    margin-top: auto; }

    .social-link {
      display: flex;
      align-items: center;
      margin: 0.5rem 0.5rem; }
      .social-link img {
        width: 32px;
        height: auto;
        margin-right: 1rem; }
        .social-link a {
          color: #F8F8F2;
          cursor: pointer; }
          .social-link a:hover {
            text-decoration: underline; }
      .social-link p {
        margin: 0;
        color: #F8F8F2; }