* img {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

html {
  background: linear-gradient(to bottom right, #2b4517, #2a7a29);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.mainContent {
  justify-self: center;

  .cardBackgroundImage {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 107%;
    width: 55%;
    z-index: -1;
  }

  .notePadContent {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 3.5rem;

    .top {
      display: flex;

      .topLeft {
        position: relative;
        left: 1.5rem;

        span {
          font-size: 35px;
          color: var(--names-clr);
        }

        .star {
          height: 2.7rem;
        }

        .aboutMe {
          display: flex;
          flex-direction: column;

          span {
            --_backgroundClr: attr(data-clr type(<color>));
            color: var(--_backgroundClr);
            font-size: 25px;
          }
        }

        .otherImages {
          margin-top: 1rem;

          .otherImage {
            width: 5rem;
          }

          .girl {
            width: 7rem;
          }
        }

        .grid {
          display: grid;
          grid-template-columns: 1fr 1fr;

          .gridElement {
            width: 10rem;
            margin: 0.1rem;
          }
        }

        .buttons {
          position: relative;
          left: 3.2rem;
          top: 1rem;
          display: flex;
          gap: 0.5rem;

          .button {
            text-decoration: none;
            color: hsl(90 3% 27%);
            padding: 0.5rem;
            background-color: hsl(39 17% 84%);
            outline: 3px solid hsl(0 0% 51%);
            border-radius: 1rem;
          }
        }
      }

      .topRight {
        display: flex;
        flex-direction: column;

        span {
          font-size: 35px;
          margin-right: 3rem;
        }

        .pfp {
          width: 45%;
          position: absolute;
          top: 3.9rem;
          right: 2.5rem;
        }

        .somehowMoreImages {
          display: flex;
          gap: 0.5rem;
          flex-direction: column;
          position: relative;
          top: 48%;
          left: 4rem;

          img {
            height: 1.7rem;
            width: 8rem;
          }

          .bottomThree {
            height: 1.5rem;
          }

          .lastOne {
            height: 8rem;
            width: 4.2rem;
            margin-left: 3rem;
          }
        }
      }
    }
  }
}