/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/

/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/

/* Our default values set as CSS variables */
:root {
  --color-bg: #b7634d;
  --color-text-main: #BF5A50;
  --color-primary: #F2E4C9;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "IBM Plex Serif";
  --font-family-header: "IBM Plex Serif";

}


/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */

.ibm-plex-serif-thin {
  font-family: "IBM Plex Serif", serif;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-serif-extralight {
  font-family: "IBM Plex Serif", serif;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-serif-light {
  font-family: "IBM Plex Serif", serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-serif-regular {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-serif-medium {
  font-family: "IBM Plex Serif", serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-serif-semibold {
  font-family: "IBM Plex Serif", serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-serif-bold {
  font-family: "IBM Plex Serif", serif;
  font-weight: 700;
  font-style: normal;
}

.ibm-plex-serif-thin-italic {
  font-family: "IBM Plex Serif", serif;
  font-weight: 100;
  font-style: italic;
}

.ibm-plex-serif-extralight-italic {
  font-family: "IBM Plex Serif", serif;
  font-weight: 200;
  font-style: italic;
}

.ibm-plex-serif-light-italic {
  font-family: "IBM Plex Serif", serif;
  font-weight: 300;
  font-style: italic;
}

.ibm-plex-serif-regular-italic {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: italic;
}

.ibm-plex-serif-medium-italic {
  font-family: "IBM Plex Serif", serif;
  font-weight: 500;
  font-style: italic;
}

.ibm-plex-serif-semibold-italic {
  font-family: "IBM Plex Serif", serif;
  font-weight: 600;
  font-style: italic;
}

.ibm-plex-serif-bold-italic {
  font-family: "IBM Plex Serif", serif;
  font-weight: 700;
  font-style: italic;
}

/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: IBM Plex Serif;
  background-color: var(--color-bg);
  background-image: url('https://cdn.glitch.global/1186f080-384c-4f9d-a406-399b160fb939/475.jpg?v=1727733824164'); /* Replace with your image path */
  background-size: cover; /* Scales the image to cover the entire background */
  background-position: center; /* Centers the background image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-attachment: fixed; /* Keeps the image fixed in place when scrolling */
}

p {
  font-family: IBM Plex Serif;
  line-height: 1;
  color: #000; /* Your text color */
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;


}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

/* Very light scaling for our illustration */
.title {
  color: #66312c;
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: bold;
  font-size: 100px;
  line-height: 105%;
  margin: 0;

}

/* Very light scaling for our illustration */
.illustration {
  max-width: 100%;
  max-height: var(--image-max-width);
  margin-top: var(--image-margin);
}


/* Subheading */
h2 {
  color: #e39bdd;
}


/* Links that open files in the editor */
.fileopener {
  cursor: pointer;
  font-weight: bold;
  border-bottom: 3px solid var(--color-primary);
  color: var(--color-secondary);
}
.fileopener:hover {
  border-bottom: 3px solid var(--color-secondary);
}


/*Image styling*/
.container {
  display: flex;
  justify-content: center;
  margin: 40px 20px 0 20px;
}

.container .box {
  width: 100%;

}

.container .box .dream {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.container .box .dream .memory {
  flex: 1 1 30%;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.container .box .dream .memory img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: .2s linear;
}

.container .box .dream .memory:hover img {
  transform: scale(1.05);
}


.container .box .dream .popup-image {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .9);
  height: 100%;
  width: 100%;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease; /* Add transition for opacity and transform */
  opacity: 1; /* Default opacity */
  transform: scale(1); /* Default scale */
}

.container .box .dream .popup-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.container .box .dream .popup-image button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0);
  color: white;
  border: none;
  cursor: pointer;
  z-index: 101;
  padding: 10px;
}

.container .box .dream .popup-image .prev {
  left: 10px;
}

.container .box .dream .popup-image .next {
  right: 10px;
}

.container .box .dream .popup-image .close {
  top: 50px;
  right: 10px;
}

.container .box .dream .popup-image .maximize-btn {
  top: 47.8px;
  right: 71px;
}

.container .box .dream .popup-image img{
  max-width:80%;
  max-height: 80%;
}

/* SVG button specific styling */
.container .box .dream .popup-image button svg {
  fill: white; /* Adjust color as needed */
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

.container .box .dream .popup-image .maximize-btn svg {
  width: 33px;
  height: 33px;
  fill: white;
}


/* Hover effect for the SVG within the buttons */
.container .box .dream .popup-image button:hover svg {
  fill: #A65746; /* Changes the SVG icon color to olive green */
  transition: .3s;
}



.container .box .dream .popup-image .fullscreen {
  opacity: 0; /* Fade out when entering fullscreen */
  transform: scale(1.05); /* Slightly enlarge the element */
}

.container .box .dream .popup-image .fullscreen img{
  max-width:90%;
  max-height: 90%;
}

/*=============== NAV ===============*/



li{
  list-style: none  ;
}

/*Hyperlink colour*/
a{
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

.navbar{
  min-height: 70px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  justify-content: space-between;
  
}

.nav-menu{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.nav-link{
  transition: 0.7s ease;
}
/*Hyperlink hover colour*/
.nav-link:hover{
  color: #BF8069;
}

.hamburger{
  display: none;
  cursor: pointer;
  position: absolute;
  margin: 0%;
}

.bar{
  padding: 0;
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #000;

}

.caption {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/*resizing for mobile*/
@media only screen and (max-width: 769px) {

  .title {
    flex-direction: column;
    align-items: center;
    flex: 1 1 100%;
    width: 100%;
    object-fit: contain;
  }

  
  /* Subheading */
  h2 {
    flex-direction: column;
    align-items: center;
    flex: 1 1 100%;
    width: 100%;
    object-fit: contain;
  }

  .container {
    flex-direction: column;
    align-items: center;
    object-fit: contain;
  }
  .container .box .dream {
    width: 100%;
    object-fit: contain;
  }
  .container .box .dream .memory {
    flex: 1 1 100%;
    object-fit: contain;
  }
  .hamburger{
    margin: -2.5%;
    padding: 0;
    display:block;
  }
  .hamburger.active .bar:nth-child(2){
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }
  .nav-menu{
    margin: 3%;
    padding: 0;
    position:fixed ;
    left: 0;
    top: -100%;
    gap: 0;
    flex-direction: column;
    background-color: #F2E4C9; /* Background color for the dropdown */
    width: 94%;
    text-align: center;
    transition: 0.3s;
    opacity: 0%; /* Initially invisible */
    transform: translateY(-35%); /* Initially hidden above the viewport */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions */
    z-index: 1000;
  
  }
  .nav-item{
    margin: 16px 0;
  }
  .nav-menu.active{
    left: 0;
    top: 220px;
    opacity: 99%;
    transform: translateY(0); /* Slide in from the top */
    transition: opacity 1s, 
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 90px; /* Adjust title size for very small screens */
  }

  .nav-link {
    font-size: 16px; /* Adjust font size for navigation links */
  }
}