/* Combined index.css + project.css with Safari mobile compatibility improvements */

/* General Layout */
html, body, .container {
  height: 100%;
  margin: 0px;
  /* Prevent unwanted zooming on iOS */
  -webkit-text-size-adjust: 100%;
  max-width: 100vw;
}

.container * {
  position: relative;
  box-sizing: border-box;
}

.fsPopup {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 1000;
  display: flex;
  place-items: center;
  justify-content: center;
}

.fsPopup img {
  max-width: 100%;
  height: auto;
  pointer-events: none; /* Prevents interaction with the image */
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "main";
  margin: 0px;
}

.main {
  display: grid;
  grid-template-columns: 4em 1fr 4em;
  grid-template-rows: 4em 1fr 4em;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "emblem-TL logo menu"
    "colorbar-L project colorbar-R"
    "emblem-BL scroller emblem-BR";
  grid-area: main;
  margin: 2em;
    max-width: 100vw;
}

.emblem-BL, .emblem-BR, .emblem-TL, .colorbar-L, .colorbar-R, .logo, .menu, .scroller {
  display: grid;
  place-items: center;
}

.emblem-BL *, .emblem-BR *, .emblem-TL *, .colorbar-L *, .colorbar-R * {
  height: 100%;
  width: 100%;
  max-width: 100vw;
  max-height: 100vh;
}

.logo {
  display: flex;
  justify-content: center;
  grid-area: logo;
}

.logo * {
  height: 75%;
  width: auto;
  padding: 0em;
  max-width: 100vw;
  max-height: 100vh;
}

.emblem-TL { grid-area: emblem-TL; }
.emblem-BL { grid-area: emblem-BL; }
.emblem-BR { grid-area: emblem-BR; }
.colorbar-L { grid-area: colorbar-L; }
.colorbar-R { grid-area: colorbar-R; }
.menu { grid-area: menu; }
.scroller { 
  grid-area: scroller;
  display: flex;
  place-items: center;
  justify-content: center;
}

.colorbar-L *, .colorbar-R * {
  height: 10em;
  width: auto;
  max-width: 100vw;
  max-height: 100vh;
}

.menuguide {
  opacity: 100%;
  position: absolute;
  top: 100%;
  right: 100%;
  height: 100%;
}

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

.nav * {
  padding: 25px;
}

a {
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

/* Index Grid */
.index {
  display: grid;
  grid-template-columns: 1fr 15em 1fr;
  grid-template-rows: 1fr min-content min-content min-content 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . ."
    "header-A . footer-A"
    "cover link graphic"
    "footer-B . header-B"
    ". . .";
  grid-area: project;
  place-items: center;
  height: 100%;
}

.link { grid-area: link; }
.link * { height: auto; width: 75%; max-width: 100%; }
.header-A, .cover, .footer-B { left: 10%; }
.header-B, .graphic, .footer-A { right: 10%; }
.header-A { grid-area: header-A; }
.header-B { grid-area: header-B; }
.header-A * { height: auto; width: 25%; text-align: center; max-width: 100%; }
.cover { grid-area: cover; }
.cover * { height: auto; max-width: 100%; width: 100%; }
.graphic {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "mark_A1 mark_A2 mark_A3 mark_A4"
    "mark_B1 mark_B2 mark_B3 mark_B4"
    "mark_C1 mark_C2 mark_C3 mark_C4"
    "mark_D1 mark_D2 mark_D3 mark_D4";
  grid-area: graphic;
}
.mark_A1, .mark_A2, .mark_A3, .mark_A4,
.mark_B1, .mark_B2, .mark_B3, .mark_B4,
.mark_C1, .mark_C2, .mark_C3, .mark_C4,
.mark_D1, .mark_D2, .mark_D3, .mark_D4 {
  display: grid;
  place-items: center;
  margin: 0.5em;
}
.mark_A1 *, .mark_A2 *, .mark_A3 *, .mark_A4 *,
.mark_B1 *, .mark_B2 *, .mark_B3 *, .mark_B4 *,
.mark_C1 *, .mark_C2 *, .mark_C3 *, .mark_C4 *,
.mark_D1 *, .mark_D2 *, .mark_D3 *, .mark_D4 * {
  height: auto;
  width: 100%;
  max-width: 100%;
}
.mark_A1 { grid-area: mark_A1; }
.mark_A2 { grid-area: mark_A2; }
.mark_A3 { grid-area: mark_A3; }
.mark_A4 { grid-area: mark_A4; }
.mark_B1 { grid-area: mark_B1; }
.mark_B2 { grid-area: mark_B2; }
.mark_B3 { grid-area: mark_B3; }
.mark_B4 { grid-area: mark_B4; }
.mark_C1 { grid-area: mark_C1; }
.mark_C2 { grid-area: mark_C2; }
.mark_C3 { grid-area: mark_C3; }
.mark_C4 { grid-area: mark_C4; }
.mark_D1 { grid-area: mark_D1; }
.mark_D2 { grid-area: mark_D2; }
.mark_D3 { grid-area: mark_D3; }
.mark_D4 { grid-area: mark_D4; }
.footer-A { grid-area: footer-A; }
.footer-B { grid-area: footer-B; }
.footer-A * { height: auto; width: 50%; max-width: 100%; }
.link, .header-A, .header-B, .cover, .graphic, .footer-A, .footer-B {
  display: grid;
  place-items: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.footer-B img {
  padding-top: 2em;
  width: 75%;
  height: auto;
  max-width: 100%;
}

/* Project.css additions */
.project {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "backContainer"
    "elements";
  grid-area: project;
  place-items: center;
  height: 100%;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.backContainer {
  grid-area: backContainer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.divBreak { margin-top: 4em; margin-bottom: 4em; }
.divSpace { height: 2em; }
.backButton { height: 3em; margin: 2em; cursor: pointer; }
.pdf { max-width:1000px; width:100%; aspect-ratio: 4/3; }
.pdfobject-container {
  width: 100%;
  max-width: 1000px;
  height: 200%;
  max-height: 750px;
  border: 1px solid #ccc;
}
.ytvideo { width: 50%; aspect-ratio: 4 / 3; top: 4em; }
.projTitle { margin-top: 3em; width: 100%; max-width: 25em; }
.TOC {
  margin-top: 2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
  align-items: center;
}
.TOC img {
  max-width: 20em;
  width: 100%;
  height: auto;
  margin: 1em;
}
.line-text { text-decoration: underline; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  text-align: left;
  margin: 0;
  color: #000000;
  margin-bottom: 0.25em;
  -webkit-font-smoothing: antialiased;
}
h2 { font-size: 2em; text-decoration: underline; }
h3 { font-size: 1.5em; }
p {
  /* font-family: 'Courier New', Courier, monospace; */
  
  text-align: left;
  font-weight: 300;
  color: #000000;
  font-size: 1.5em;
  margin-left: 1em;
  margin-right: 1em;
}
.snippet { 
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  filter: blur(0.6px);
  max-width: 50em; width: 100%;
  padding: 5em;
}

.icons {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  padding-bottom: 1em;
  width: 10%;
}


/* Button */
button {
  background-color: none;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 1.5em;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  float: none;
  border-radius: 0.5em;
  margin: 0.25em;
  padding: 0.25em;
}

/* Top Button */
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgb(219, 219, 219);
  color: black;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#topBtn:hover { background-color: #555; }

/* Animations */
.color-wipe {
  animation: colorWipe 10s linear infinite;
  font-style: normal;
  color: rgb(0, 0, 0);
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.162);
}
@keyframes colorWipe { 50% { color: #505050 } }
.fade { animation-name: fade; animation-duration: 1.5s; }
@keyframes fade { from {opacity: 0} to {opacity: 1} }
@keyframes gradient {
  0% { background-position: 0% 50%; background-size: 400%; }
  50% { background-position: 100% 50%; background-size: 100%; }
  100% { background-position: 0% 50%; background-size: 400%; }
}

/* Hamburger Menu */
.hamburger {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hamburger-bar1, .hamburger-bar2, .hamburger-bar3 {
  width: 2em;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
.change .hamburger-bar1 { transform: translate(0, 11px) rotate(-45deg); }
.change .hamburger-bar2 { opacity: 0; }
.change .hamburger-bar3 { transform: translate(0, -11px) rotate(45deg); }
.menu {
  background: linear-gradient(
    -45deg,
    #e9d0ff,
    #e6efff,
    #c6f6ff,
    #d5f9ff,
    #c0c0ff,
    #d5f9ff,
    #c6f6ff,
    #e6efff,
    #e9d0ff
  );
  background-size: 400% 400%;
  animation: gradient 9s ease infinite;
}

/* Scroller */
.scroller * {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 15px;
  background-color: #000000;
  border-radius: 0%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover { background-color: #0000ff; }
.next, .prev { text-decoration: underline; }

/* About */
.about {
  margin: 33%;
  margin-bottom: 4em;
  margin-top: 4em;
}

/* Popup Link */
.popup {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-width: 200px;
  height: auto;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
.popup.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
.popup img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
}
.hover-link {
  color: #0000ff;
  text-decoration: underline;
  cursor: pointer;
}
.hover-link:hover { text-decoration: none; }

/* Filters */
.filter-cyan { filter: invert(87%) sepia(66%) saturate(839%) hue-rotate(112deg) brightness(105%) contrast(111%); }
.filter-magenta { filter: invert(19%) sepia(42%) saturate(7496%) hue-rotate(295deg) brightness(115%) contrast(126%); }
.filter-yellow { filter: invert(84%) sepia(74%) saturate(500%) hue-rotate(358deg) brightness(110%) contrast(107%); }
.filter-red { filter: invert(19%) sepia(100%) saturate(7265%) hue-rotate(1deg) brightness(109%) contrast(117%); }
.filter-green { filter: invert(57%) sepia(99%) saturate(2635%) hue-rotate(82deg) brightness(116%) contrast(125%); }
.filter-blue { filter: invert(9%) sepia(92%) saturate(7156%) hue-rotate(247deg) brightness(96%) contrast(145%); }
.filter-black { filter: invert(0%) sepia(100%) saturate(500%) hue-rotate(241deg) brightness(76%) contrast(102%); }
.filter-dawnblue { filter: invert(83%) sepia(11%) saturate(556%) hue-rotate(150deg) brightness(100%) contrast(86%); }
.filter-freightred { filter: invert(36%) sepia(82%) saturate(5616%) hue-rotate(350deg) brightness(95%) contrast(87%); }
.filter-midnightblue { filter: invert(5%) sepia(92%) saturate(4052%) hue-rotate(233deg) brightness(92%) contrast(100%); }
.filter-islandgreen { filter: invert(58%) sepia(28%) saturate(877%) hue-rotate(47deg) brightness(97%) contrast(99%); }
.filter-atlanticblue { filter: invert(55%) sepia(56%) saturate(520%) hue-rotate(170deg) brightness(91%) contrast(90%); }
.filter-brassbrown { filter: invert(16%) sepia(41%) saturate(1001%) hue-rotate(320deg) brightness(96%) contrast(82%); }
.fitler-washtan { filter: invert(88%) sepia(39%) saturate(445%) hue-rotate(319deg) brightness(101%) contrast(91%); }
.filter-washgreen { filter: invert(52%) sepia(29%) saturate(225%) hue-rotate(69deg) brightness(101%) contrast(94%); }
.filter-washblue { filter: invert(38%) sepia(12%) saturate(1796%) hue-rotate(151deg) brightness(96%) contrast(85%); }

/* Media Queries */
@media (max-width: 100em) {
  .main { margin: 1em; }
  .index {grid-template-columns: 1fr 7em 1fr;}
  .cover * { height: auto; width: 100%; max-width: 20em; }
  .graphic { max-width: 20em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1em; }
  .logo * { height: 50%; width: auto; }
  .link * { height: auto; width: 50%; max-width: 100%; }
  .footer-A * { height: auto; width: 33%; max-width: 100%; }
  .footer-B img { width: 75%; height: auto; max-width: 100%; }
  .TOC img { max-width: 15em; width: 100%; height: auto; margin: 1em; }
  .projTitle { margin-top: 1em; width: 100%; max-width: 25em; }
  h2 { font-size: 2em; }
  p { font-size: 1em; }
}

@media only screen and (max-width: 1000px) {
  .main {
    grid-template-columns: 2em 1fr 2em;
    grid-template-rows: 2em 1fr 2em;
    margin: 0.5em;
  }
  .link { display: none; }
  .index {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content 0.5fr min-content min-content min-content min-content min-content min-content;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "."
      "."
      "header-A"
      "footer-A"
      "cover"
      "graphic"
      "footer-B"
      "header-B";
    grid-area: project;
  }
  .header-A, .cover, .footer-B { left: 0%; }
  .header-B, .graphic, .footer-A { right: 0%; }
  .header-A { top: 50%; }
  .footer-B img { width: 100%; height: auto; padding-top: 1em; max-width: 100vw; }
  .cover * { height: auto; width: 100%; max-width: 20em; }
  .graphic { max-width: 20em; max-height: 5em; top: 0%; height: 2em; }
  .graphic * * { height: auto; width: 50%; max-width: 100%; }
  .mark_A2, .mark_A3, .mark_A4, .mark_B1, .mark_B3, .mark_B4, .mark_C1, .mark_C2, .mark_C4, .mark_D1, .mark_D2, .mark_D3 { display: none; }
  .mark_B2 { bottom: 100% }
  .mark_C3 { bottom: 200%; }
  .mark_D4 { bottom: 300%; }
  .colorbar-L *, .colorbar-R * { height: 7em; width: auto; max-width: 100vw; }
  .logo * { height: 75%; width: auto; max-width: 50%; }
  .nav { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .nav * { padding: 25px; }
  .footer-A * { height: auto; width: 50%; max-width: 100%; }
  .menuguide { opacity: 100%; }
.about {
  margin: 0%;
  width: 90%; margin-bottom: 6em; margin-top: 3em;
    
}
  .ytvideo { width: 100%; aspect-ratio: 4 / 3; top: 4em; }
  .pdf { width: 100%; aspect-ratio: 4/6; }
  .projTitle { margin-top: 5em; width: 100%; max-width: 25em; }
  .TOC img { max-width: 10em; width: 100%; height: auto; margin: 1em; }
  .snippet { padding: 1.5em; }
}