/* ------------------------ GENERAL CSS ------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color:white;
  }
  
body {
  transition: font-family 0.5s;
}

#portfolio {
  /*display:flex;
  flex-direction: column;
  flex-wrap: nowrap;*/
  /* background-color:yellow; */
  padding: 100px 60px 60px 60px;
  margin-top:40px;
  max-width: 100%;
}
  
a {
  text-decoration:underline;
}

.row {
  display:flex;
  flex-wrap: nowrap;
  max-width: 100%;
  margin:30px;
  /* background-color:lightblue; */
}

.align-left {
  justify-content: flex-start; /* Align to the left */
}

.align-right {
  justify-content: flex-end; /* Align to the right */
}

.work {
  width:50%;
  /*background-color:lightgreen;*/
}
  
img {
  max-width:100%;
  display:block;
  margin:0px;
  padding:0px;
  max-height: 100%;
}

h1,h2,h3,h4,h5,h6,caption {
  display:inline;
  margin:none;
  font-weight:normal;
}

h1 {
  font-size: 45px;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 1.17em;
}

h4 {
  display:block;
  font-size: 1em;
  margin-top:10px;
}

h5 {
  font-size: .83em;
}

h6 {
  font-size: .67em;
}

.websiteupdate {
  /* display:flex; */
  /* flex-wrap: nowrap; */
  max-width: 100%;
  margin-top:60px;
  justify-content: flex-start; /* Align to the left */
  /* margin:30px; */
  /* background-color:lightblue; */
}

/* ------------------------ BACKGROUND IMAGES ------------------------ */
.background {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 5s;
  opacity:0;
}

#background1 {
  z-index: -1;
  opacity: 1;
}

#background2 {
  z-index: -2;
}
  
/* ------------------------ NAVIGATION SPECIFIC CSS ------------------------ */
nav {
  position: fixed;
  top: 0;
  width:100%;
  margin-top:10px;
  /* background-color:lightblue; */
  z-index:1000;
}
nav a {
  text-decoration:none;
}

.currentnav {
  text-decoration:underline;
}

.navleft {
  display:inline-block;
  float:left;
}
  
.navright {
  display:inline-block;
  float:right;
  margin-right:20px;
}

.linkright,.linkleft {
  display:inline-block;
  padding:20px;
  padding-top:20px;
  font-size:40px;
  color:white;
}

#moving-text {
  position: absolute;
  white-space: nowrap;
  animation: moveBackAndForth 15s infinite alternate;
}

@keyframes moveBackAndForth {
  0% {
    left: 0;
  }
  100% {
    left:10%;
  }
}

/*,.sell {
  display:none;
}*/

/* Hide hamburger menu and dropdown by default */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size:40px;
  color:white;
  position: absolute; /* Position it independently */
  right:16px;
  top:10px;
}

.hamburger:hover {
  text-shadow: 0 0 20px #FCFF00;
}

.dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  /* right: 16px; */
  /* background-color:white; */
  top: 80px; /* Adjust based on your nav height */
  z-index: 2000;
  text-align:right;
  margin-bottom:20px;
  width:100%;
}

.dropdown a {
  text-decoration: none;
  color: #fff;
  border-bottom:1px solid white;
  z-index: 2000;
  
}

.dropdown a:hover {
  text-shadow: 0 0 20px #FCFF00;
  z-index: 2000;
}

/* Overlay to dim the rest of the page */
.overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Nearly transparent white */
  z-index: 10; /* Below dropdown but above other content */
}

.overlay.active {
  display: block; /* Show overlay when active */
}

  /* ------------------------ FOOTER CSS ------------------------ */
  
footer {
  position:fixed;
  bottom:0;
  width:100%;
  /*background-color:yellow;*/
}
  
/* ------------------------ HOMEPAGE SPECIFIC CSS START ------------------------ */
button {
  color:black;
  padding-left:10px;
  padding-right:10px;
  font-size:inherit;
  font-family:inherit;
  margin-bottom:5px;
}

.vertwork {
  width:40%;
}

/* ------------------------ GRID PAGES - GENERAL CSS ------------------------ */
#grid {
  display:flex;
  justify-content: start; /* Adjust spacing between boxes */
  flex-wrap: wrap;
  max-width: 100%;
  gap:20px;
}

/* ------------------------ TEACHING PAGE SPECIFIC CSS START ------------------------ */
.teaching {
  flex: 1 1 calc(35% - 20px); /* Ensure even width (20% minus gap) */
  max-width: calc(35% - 20px); /* Ensure boxes don’t stretch */
  box-sizing: border-box; /* Include padding/border in width */
}

a img:hover {
  box-shadow: 0 0 20px #FCFF00;
}

.teachingwidth {
  width:100%;
  /* background-color:red; */
}


/* ------------------------ ARCHIVE PAGE SPECIFIC CSS START ------------------------ */
.archivewidth {
  width:80%;
}

.archivebox {
    flex: 1 1 calc(25% - 20px); /* Ensure even width (20% minus gap) */
    max-width: calc(25% - 20px); /* Ensure boxes don’t stretch */
    box-sizing: border-box; /* Include padding/border in width */
    padding-bottom:20px;
}

.archivebox img {
  height: 150px; /* Set the desired fixed height */
  width: 100%; /* Ensure images take the full width of the box */
  object-fit: cover; /* Crop the image to fit without stretching */
  display: block; /* Removes any extra spacing below the image */
}

/* ------------------------ INFO PAGE SPECIFIC CSS START ------------------------ */

.infoimg {
  width:30%;
  margin-right:50px;
}

.infodescription {
  width:65%;
}

/* ------------------------ HIGHLIGHTS ------------------------ */

.yellowhighlight {
  text-shadow: 0 0 20px #FCFF00;
}

.pinkhighlight {
  text-shadow: 0 0 20px #FF00D1;
}

.greenhighlight {
  text-shadow: 0 0 20px #3DFF00;
}

.bluehighlight {
  text-shadow: 0 0 20px #00E3FF;
}

.orangehighlight {
  text-shadow: 0 0 20px #FFA100;
}

/* ------------------------ INDIVIDUAL WORK PAGES STYLES ------------------------ */

.worktitle {
  margin-top:20px;
  font-size:1.17em;
}

p {
  font-size:1.17em;
}

/* ------------------------ RESPONSIVENESS ------------------------ */

/* --------- NAVIGATION --------- */

@media (max-width: 768px) {
  .navright {
      display: none;
  }

  .hamburger {
      display: block;
  }

  .dropdown.active {
      display: flex;
  }
}

/* --------- HOMEPAGE --------- */

@media screen and (max-width: 1200px) {
  .work {
    width:70%;
  }
  .vertwork {
    width:50%;
  }
  #portfolio {
    padding: 60px 15px 15px 15px;
  }
  
}

@media screen and (max-width: 768px) {
  .work,.vertwork {
    width:100%;
  }
  #portfolio {
    padding: 60px 15px 15px 15px;
  }
  #moving-text {
    animation: none; /* Disable the animation on mobile */
    position: relative; /* Change position to avoid absolute positioning overlap */
    left: 0; /* Ensure it doesn't move outside the viewport */
  }
  .linkright,.linkleft {
    font-size:30px;
  }
  .row {
    margin:0px;
  }
}

/* --------- ARCHIVE PAGE --------- */
@media screen and (max-width: 1200px) {
  .archivewidth {
    width:100%;
  }
  .archivebox {
    flex: 1 1 calc(50% - 20px); /* Two boxes per row */
    max-width: calc(50% - 20px); /* Ensure boxes don’t stretch beyond half width */
  }
  .archivebox img {
    height: 250px;
  }
}
@media screen and (max-width: 768px) {
  .archivewidth {
    width:100%;
  }
  .archivebox {
    flex: 1 1 100%;
    max-width: 100%;
    }
  .archivebox img {
    height: auto;
    width: 100%; /* Ensure images take the full width of the box */
    object-fit: contain; /* Maintain aspect ratio without cropping */
  }
}

/* --------- INFO PAGE --------- */

@media screen and (max-width: 768px) {
  .infoimg {
    display:block;
    width:100%;
    background-color:yellow;
  }
  .infodescription {
    display:block;
    width:100%;
    /* background-color:red; */
  }
}

/* --------- TEACHING PAGE --------- */

@media screen and (max-width: 1200px) {
  .teaching {
    flex: 1 1 calc(50% - 10px); /* Two boxes per row */
    max-width: calc(50% - 10px); /* Ensure boxes don’t stretch beyond half width */
  }
}
@media screen and (max-width: 768px) {
  .teaching {
    flex: 1 1 100%;
    max-width: 100%;
    }
}