@charset "utf-8";
/* CSS Document */

html {
  font-family: Arial, sans-serif;
}

/* Ensure proper rendering of images */
img {
  max-width: 100%; /* Ensures the image does not overflow the container */
  height: auto;    /* Maintains aspect ratio of the image */
  object-fit: contain; /* Makes sure the image is fully visible within the container without being cropped */
  display: block;  /* Prevents extra space at the bottom of images in inline contexts */
}

/* Reset margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

/* Default font class */
.mp-font {
  font-family: Arial, sans-serif;
}

/* Default Design */
.mp-div {
  /* Center elements */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Default styling */
  margin: 20px auto;
  padding: 30px;
  font-size: 30px;
  width: 300px;
  height: 300px;
  background-color: darkseagreen;
  color: black;
}

/* For Desktop View */
@media screen and (min-width: 1024px) {
  .mp-div {
    background-color: #FFFFFF;
    color: #fff;
  }
}

/* For Tablet View */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .mp-div {
    width: 400px;
    height: 400px;
    background-color: #FFFFFF;
    color: black;
  }
}

/* For Mobile Portrait View */
@media screen and (max-width: 480px) and (orientation: portrait) {
  .mp-div {
    width: 200px;
    height: 200px;
    background-color: #FFFFFF;
    color: #fff;
  }
}

/* For Mobile Landscape View */
@media screen and (max-width: 640px) and (orientation: landscape) {
  .mp-div {
    width: 400px;
    height: 200px;
    background-color: #FFFFFF;
    color: black;
  }
}

/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-width: 640px) {
  .mp-div {
    width: 400px;
    height: 200px;
    background-color: #FFFFFF;
    color: black;
  }
}

/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
  .mp-div {
    width: 400px;
    height: 400px;
    background-color: #FFFFFF;
    color: black;
  }
}

/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
  .mp-div {
    width: 400px;
    height: 400px;
    background-color: #FFFFFF;
    color: black;
  }
}

/* For iPhone 6 and 6 Plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px) and 
       (-webkit-min-device-pixel-ratio: 3) {
  .mp-div {
    width: 400px;
    height: 400px;
    background-color: #FFFFFF;
    color: black;
  }
}