/**/


/* Set the page background color to light gray */
body {
    background-color: rgb(255, 255, 255);
    margin-top: 0px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    text-align: center;
    
}

/* Default image styles */
.image-container {
    position: relative;
    overflow: hidden;
  }
  
  .image-container img {
    transition: border-color 0.5s; /* Add a transition for a smooth effect */
    object-fit: cover;
  }
  
  /* Styles for the image on hover */
  .image-container:hover img {
    padding: 5px;
    border: 3px solid #0808e3; /* Change the border color to your accent color (e.g., orange) */
  }

/* Center all headings (h1, h2, h3, etc.) horizontally */
h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: rgb(1,7, 40);
}

/* Default styles for all devices */
.container {
    display: grid;
    background-color: rgb(196, 196, 196);
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(6, auto);
    height: 100vh;
  }
  
  .item {
    padding: 5px;
    text-align: center;
    /* Add any other common styles for items here */
  }

  /* Styles for landscape orientation (e.g., computers) */
  @media screen and (orientation: landscape) {
    .container {
      grid-template-columns: repeat(1, auto);
      grid-template-rows: repeat(6, auto);
      font-size: medium;
      margin-left: 150px;
      margin-right: 150px;
    }
  }
  
  /* Styles for portrait orientation (e.g., mobile devices) */
  @media screen and (orientation: portrait) {
    .container {
      grid-template-columns: repeat(1, auto);
      grid-template-rows: repeat(6, auto);
      font-size: medium;
    }
  }