.container {
  width: 90%;
  max-width: 500px; /* Set a maximum width for the container */
  margin: 0 auto; /* Center the container */
  transform-origin: top left;
}

p {
  font-family: "pix";
  font-size: 4vw;
}

p1 {
  font-family: "mine";
  font-size: 3vw;
}

p2 {
  font-family: "mine";
  font-size: 6vw;
}

.div1 {
  max-width: 65vw;
  max-height: 3vw;
  border: 1px;
  box-sizing: border-box;
}

.div2 {
  rotate: 20deg;
  max-width: 35vw;
  max-height: 30vw;
  box-sizing: border-box;
}

.div3 {
  text-align: right;
}

p3 {
  font-family: "alice";
}
/* fonts */

@font-face {
    font-family: "monaco";
    src: url(fonts/monaco.tff);
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: "infernalda";
    src: url(fonts/infernalda.ttf);
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: "ny";
    src: url(fonts/ny.ttf);
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    src: url(fonts/pixChicago.otf);
    font-family: "pix";
  }

  @font-face {
    font-family: "aw";
    src: url(fonts/Alice_in_Wonderland_3.ttf)
  }

  @font-face {
    font-family: "vcr";
    src: url(fonts/VCR_OSD_MONO_1.001.ttf);
  }

  @font-face {
    font-family: "vhs";
    src: url(fonts/RealVhsFontRegular-WyV0z.ttf);
  }

  @font-face {
    font-family: "alice";
    src: url(fonts/Alice\ in\ Wonderland.ttf);
  }

  @font-face {
    font-family: "mine";
    src: url(fonts/MyHandwriting-Regular[1818].otf);
  }

  @media only screen and (min-width: 600px) {
    .container {
        transform: scale(0.7); /* Adjust the scaling factor as needed for larger screens */
    }

    .backgroundimage {
        position: relative; /* Change to relative for larger screens */
    }
}

@media only screen and (max-width: 599px) {
  .container {
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Prevent horizontal scrolling */
}

.backgroundimage {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#featurednote {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%; /* Adjust the width as needed */
  max-width: none;
  padding: 1vw 5vw;
  box-sizing: border-box;
}
}