body {
  font-family: helvetica, sans-serif;
  margin: 0;
   padding-left: 1rem;
  padding-right: 1rem;
  background-color: #131313;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Horizontally center the .projects container */
  align-items: center; /* Vertically center the .projects container */
  min-height: 100vh; /* Ensure the body takes up the full viewport height */
  margin: 0;
  padding-bottom:3rem;
  overflow-x: hidden;
  font-weight: light;
}
a{
  text-decoration: none;
}
nav a{
  text-decoration: none;
  font-size: large;
  padding-right:5px;
}

nav a:hover{
  cursor: pointer;
  opacity: 50%;
}
.info a {
  text-decoration: none;
  color:white;
}

.info a:hover{
  opacity: 80%;
  
}

.description a {
  color: #ffffff;
  font-weight:400;
}

.description a:hover {
opacity: 80%;
}
nav{
  margin:2rem;
  
}


header {
  display:flex;
  justify-content: center;
  align-items: center;
  padding:2rem;
  min-width: 100vw;
  text-align: left;
  /* margin-bottom: 5vh; */
  color:rgb(255, 255, 255);
  height:50vh;

  
}
.text{
padding:2rem;
}
h1{
   /* font-family: helvetica; */
  font-weight: 100; 
}
h1 span {
  font-family: 'Gambetta', serif; /* or any font you want */
  font-weight: 500;              /* bold */
  font-style: italic;            /* optional */
                /* optional color */
}
.projects {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  width: 50%;

}

.projects img {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.14s ease-in-out;
  padding-top: 4rem;
  /* object-fit: cover; */
  
}

.projects img:hover {
  transform: scale(1.05); /* Zoom in slightly */
  transform-origin: center center; /* Optional: sets the zoom origin point (centered) */
}

/* Modal styling */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgb(0, 0, 0);
  padding-bottom: 5rem;

  color: rgb(0, 0, 0);
  z-index: 1000;
  
  
}

#modal::-webkit-scrollbar {
  display: none;
}
/* Centering modal content */
.modal-content {
  
  display: flex;
  flex-direction: column;
  align-items: center;
 
  max-width: 1700vw;
  max-height:100vh;

  background-color: rgba(212, 212, 212, 0.1); /* Optional: translucent background for modal content */
  margin: 0 auto;
  /* padding: 20px; */
  /* border-radius: 10px; */
}
.modal-info-wrapper {
  width: 100%; /* Match the header width */ /* 65% */
  
  max-width: 100%;
  margin: 0 auto;
  color: white;
  padding: 2rem;
}

.modal-header {
  width: 100%;
  height: 10vh; /* You can adjust the height of the background image */
  background-size: contain; /* Ensure the image covers the area */
  background-position: left-center;
  background-repeat: no-repeat;
  background-size: 200% auto;
  border-top-right-radius: 10px;
  margin-bottom: 1rem;
  position: relative;
}

.modal-body{
  margin-top:2rem;
}

/* Modal image styling */
.modal img {
  margin: 0 auto;
  max-width: 100vw;
  /* max-height: 100vh; */
  margin-bottom: 0.5rem;
  border-radius: 5px;

}
.modal video{
  border-radius:5px;
}
.modal video{
  margin-bottom:0.5rem;
}
/* #modal-title{
/* text-align:left   */

/* Modal text alignment */
#modal h1 {
  /* margin: 10px 0; */
  font-size: 2rem;
  text-align: left;
  
}

.modal .description {
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: left;
  max-width:100vw;
}

.modal-info{
  display:flex;
  flex-direction: column;
  max-width:100%;
  /* padding:2rem; */
  text-align: left;
  /* vertical-align: left; */
  width: 100%;
  

}
.project-type {
  color: white;
  font-size: 1rem;
  font-weight: 300;
  margin: 0.5rem 0 1.5rem 0;
  opacity: 0.8; /* Slightly dimmed compared to other text */
}


/* Close button */
.close {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 30px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  mix-blend-mode: difference;
  z-index: 10001;
  border-color: rgb(255, 0, 0);
  text-shadow: 0 0 1px rgba(0,0,0,0.5);
  
}

.close:hover{
  opacity: 0.8;
}
h1 {
  
  color:rgb(255, 255, 255);
  /* margin-top:10rem; */
font-size: 2.4vw !important;
  font-weight: 100;
  text-align: left;
  /* padding:1rem; */
  /* margin: 0 auto; */
  
}

.styled-iframe {
  height:900;
  border: 1px solid white;  /* Adds a white border around the iframe */
  border-radius: 2px;       /* Optional: Adds rounded corners */
  margin-top:5rem;
}

/* Medium screens only (1200px to 769px) */
@media (max-width: 1200px) and (min-width: 769px) {
  h1 {
    font-size: 3vw !important;
  }
  iframe{
    height:900px;
  }
  .modal-info-wrapper {
    width: 75%;
  }

  
}

/* Small screens (768px and below) */
@media (max-width: 768px) {
  iframe{
    height:400px;
  }
  
 h4 {
    font-size: 4vw !important;
  }
  
  
  .projects {
    width: 100vw;
  }

  .projects img {
    padding-top: 1rem;
  }

  .modal img, .modal video {
    max-width: 100%;
    max-height: 100vh;
    margin-bottom: 20px;
    border-radius: 5px;
  }

  .modal .description {
    font-size: 1rem;
    line-height: 1;
    text-align: left;
    width: 85vw;
  }
  .modal-info-wrapper {
    width: 95%;
  }

  .menu {
    display: none;
  }
  
  .diary{
  margin-bottom:1rem;
  margin-top:1rem;
  }
}