/* General Styles */
body {
  font-family: 'Playfair', monospace;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Header Styles */
.header-content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.right-logo-container {
  width: 20vw;
  height: 20vw;
  position: relative; /* added to position the ul below it */
  margin-top: 0px;
  margin-right: 10px;
}

.right-logo-container img {
  max-width: 100%; /* Allow the image to scale down */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove any extra spacing around the image */
}

.left-logo-container {
  width: 20vw;
  height: 4vw;
  position: relative; /* added to position the ul below it */
  margin-top: 0px;
  margin-left: 10px;
}

.left-logo-container img {
  max-width: 100%; /* Allow the image to scale down */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove any extra spacing around the image */
}

.left-logo-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;   /* position the ul absolutely with reference to right-logo-container div */
  top: 110%;            /* position it below the right-logo-container */
  right: 0;
  width: 100%;          /* ensures the ul spans the full width of the .right-logo-container */
}

.left-logo-container ul li {
  margin-bottom: -2px;
  text-align: left; /* Aligns the text to the right */
}

.left-logo-container ul li a {
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}


      /* Media query for mobile devices */
      @media only screen and (max-width: 767px) {
        .right-logo-container {
          width: 10vw;
          height: 10vw;
        }
      }

      /* Media query for tablet devices (e.g., iPad) */
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .right-logo-container {
          width: 6vw;
          height: 6vw;
        }
      }

      /* Media query for desktop devices */
      @media only screen and (min-width: 1025px) {
        .right-logo-container {
          width: 4vw;
          height: 4vw;
        }
      }

/* Main Content Styles */
main {
  display: grid;
  justify-content: center;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  gap: 20px;
  padding-top: 50px;
  width: 100%;
  max-width: 800px;
}

.memes-container {
  margin-bottom: 100px; /* Add margin between rows of memes */
  position: relative;
}

      /* Responsive Grid */
      @media only screen and (max-width: 767px) {
        .memes-container {
          display: grid;
          grid-template-columns: repeat;
          grid-template-rows: auto auto auto auto auto auto auto;
          gap: 20px;
          align-items: center;
          margin-left: 20%;
          margin-right: 20%;
        }
        .title {
          clear: both;
          text-align: center;
          overflow: hidden;
          word-break: break-all;
        }
      }

      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .memes-container {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: auto auto auto auto;
          gap: 20px;
          align-items: center;
          margin-left: 10%;
          margin-right: 10%;
        }
        .title {
          clear: both;
          text-align: center;
          overflow: hidden;
          word-break: break-all;
        }
      }

      @media only screen and (min-width: 1025px) {
        .memes-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: auto auto auto;
          gap: 20px;
          align-items: center;
        }
        .title {
          clear: both;
          text-align: center;
        }
      }

.meme {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}

.meme-img-container {
  position: relative;
  margin-bottom: -30px; /* Add this to separate the feature image with the title */
}

.meme-title {
  font-size: 16px; /* Change font size to make it smaller */
  font-weight: bold;
  position: relative;
  text-align: left;
  bottom: -20px;
  margin-top: 50; /* Adjust margin top to bring title closer to the feature image */
  margin-bottom: -0;
}

.feature-image {
  display: block;
  width: 100%;
  position: relative;
  z-index: 0; 
}

.frame {
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: url("../resources/frame.png");
  background-position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  box-sizing: border-box;
}

.meme:hover .frame {
  opacity: 1;
}

.lamp-icon {
  width: 200px;
  height: 70px;
  background-image: url("../resources/lamp.png");
  background-size: cover;
  position: absolute;
  top: -20px; /* Adjust top positioning to center the icon above the artwork */
  left: 50%; /* Add this to center the lamp icon */
  transform: translateX(-50%); /* Add this to center the lamp icon */
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}

.meme:hover .lamp-icon {
	opacity: 1;
}

/* page Styles */

.page-container {
  text-align: justify;
  width: 80%;  /* adjust this value for your preference */
  margin: 0 auto;  /* centers the paragraph within the section */
  hyphens: auto;
  -webkit-hyphens: auto;
  word-spacing: -0.05em;
  font-size: 110%;
  line-height: 26px;
}

p {
  margin-bottom: 50px; /* between paragraphs */
}

.page-title {
  text-align: left;  /* Left alignment */
}

.page-container section img {
  width: 100%;  /* the image will scale to fit the width of its containing section */
  height: auto;  /* ensures that the image maintains the correct aspect ratio */
  margin: 10px auto;  /* centers the image within the section */
  display: block; /* for proper centering of the image */
}

.page-container section figure {
  width: 100%;
  margin: 20px auto;
  display: block;
  box-sizing: border-box;  /* includes padding and border in the element's total width and height */
}

.page-container section figure img {
  width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;  /* includes padding and border in the element's total width and height */
}

.image-caption {
  color: #808080;
  width: 100%;
  text-align: center;
  margin: 10px 0; 
  font-size: 12px;
  box-sizing: border-box;  /* includes padding and border in the element's total width and height */
}

.center {
  text-align: center;
}

/* Footer Styles */
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 30px;
  word-spacing: 30px;
}

/* Added styles for "Read more" text */
.summary {
  cursor: pointer;
}

.details:focus .summary {
  display: none;
}

.details:focus .body {
  display: block;
}

.body {
  display: none;
}