@font-face {font-family: "Mori";src: url("./assets/fonts/PPMori-Extralight.otf") format("opentype");font-weight: 200;font-style: normal;}@font-face {font-family: "Mori";src: url("./assets/fonts/PPMori-ExtralightItalic.otf") format("opentype");font-weight: 200;font-style: italic;}/* Regular */@font-face {font-family: "Mori";src: url("./assets/fonts/PPMori-Regular.otf") format("opentype");font-weight: 400;font-style: normal;}@font-face {font-family: "Mori";src: url("./assets/fonts/PPMori-RegularItalic.otf") format("opentype");font-weight: 400;font-style: italic;}/* SemiBold */@font-face {font-family: "Mori";src: url("./assets/fonts/PPMori-SemiBold.otf") format("opentype");font-weight: 600;font-style: normal;}@font-face {font-family: "Mori";src: url("./assets/fonts/PPMori-SemiBoldItalic.otf") format("opentype");font-weight: 600;font-style: italic;}
 /* 1) ExtraLight           font-weight: 200; font-style: normal;
 2) ExtraLight Italic       font-weight: 200; font-style: italic;
 3) Regular                 font-weight: 400; font-style: normal;
 4) Regular Italic          font-weight: 400; font-style: italic;
 5) SemiBold                font-weight: 600; font-style: normal;
 6) SemiBold Italic         font-weight: 600; font-style: italic; */

@font-face {font-family: "DejaVu Sans Mono";src: url("./assets/fonts/DejaVuSansMono.ttf") format("truetype");font-weight: 400;font-style: normal;}/* Bold */@font-face {font-family: "DejaVu Sans Mono";src: url("./assets/fonts/DejaVuSansMono-Bold.ttf") format("truetype");font-weight: 700;font-style: normal;}/* Oblique */@font-face {font-family: "DejaVu Sans Mono";src: url("./assets/fonts/DejaVuSansMono-Oblique.ttf") format("truetype");font-weight: 400;font-style: italic;}/* Bold Oblique */@font-face {font-family: "DejaVu Sans Mono";src: url("./assets/fonts/DejaVuSansMono-BoldOblique.ttf") format("truetype");font-weight: 700;font-style: italic;}

@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-Thin.ttf") format("truetype");font-weight:100;font-style:normal;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-ThinItalic.ttf") format("truetype");font-weight:100;font-style:italic;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-ExtraLight.ttf") format("truetype");font-weight:200;font-style:normal;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-ExtraLightItalic.ttf") format("truetype");font-weight:200;font-style:italic;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-Light.ttf") format("truetype");font-weight:300;font-style:normal;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-LightItalic.ttf") format("truetype");font-weight:300;font-style:italic;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-Regular.ttf") format("truetype");font-weight:400;font-style:normal;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-Italic.ttf") format("truetype");font-weight:400;font-style:italic;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-Medium.ttf") format("truetype");font-weight:500;font-style:normal;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-MediumItalic.ttf") format("truetype");font-weight:500;font-style:italic;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-SemiBoldItalic.ttf") format("truetype");font-weight:600;font-style:italic;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-Bold.ttf") format("truetype");font-weight:700;font-style:normal;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-ExtraBoldItalic.ttf") format("truetype");font-weight:800;font-style:italic;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-Black.ttf") format("truetype");font-weight:900;font-style:normal;}@font-face {font-family:"Raleway";src:url("./assets/fonts/Raleway/Raleway-BlackItalic.ttf") format("truetype");font-weight:900;font-style:italic;}
/* 
  1) Thin              font-weight: 100; font-style: normal;
  2) Thin Italic       font-weight: 100; font-style: italic;
  3) ExtraLight        font-weight: 200; font-style: normal;
  4) ExtraLight Italic font-weight: 200; font-style: italic;
  5) Light             font-weight: 300; font-style: normal;
  6) Light Italic      font-weight: 300; font-style: italic;
  7) Regular           font-weight: 400; font-style: normal;
  8) Regular Italic    font-weight: 400; font-style: italic;
  9) Medium            font-weight: 500; font-style: normal;
 10) Medium Italic     font-weight: 500; font-style: italic;
 11) SemiBold          font-weight: 600; font-style: normal;
 12) SemiBold Italic   font-weight: 600; font-style: italic;
 13) Bold              font-weight: 700; font-style: normal;
 14) Bold Italic       font-weight: 700; font-style: italic;
 15) ExtraBold         font-weight: 800; font-style: normal;
 16) ExtraBold Italic  font-weight: 800; font-style: italic;
 17) Black             font-weight: 900; font-style: normal;
 18) Black Italic      font-weight: 900; font-style: italic;
*/


*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


main {
  overflow: hidden;
}

html, body {
  height: 100%;
  margin: 0;

}

body {
  line-height: 1.5;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  font-family: 'mori', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p {
  font-weight: normal;
  line-height: 1.2;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  appearance: none;
}

button {
  cursor: pointer;
}

.box {
  width: 50px;
  height: 50px;
  background-color: #000;
  opacity: 0;
  transform: scale(0.1);
}


@media (prefers-reduced-motion: reduce) {
  * {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
  }
}

/* resets done */

nav {
  position: fixed;
  top: 50%;
  left: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

/* contact nav nav */
#contactNav {
  top: 0;
  padding: .5%;
  padding-left: 1%;
}


#contactNav > div > div > a> span > iconify-icon{
  font-size: 38px;
  margin-right: 4%;
}

#contactNav > div > div > a:nth-child(3)> span > iconify-icon{
  font-size: 45px;
  margin-right: 4%;
}

#contactNav > div > a {
  font-size: 38px;
}

/* hidden - reusable? */

.hidden {
  display: none;
}


.rightNav {
  font-size: 21px;
  color: #8b9192;
}

.navItem {
  text-align: right;
  margin-right: .5vw;
  cursor: pointer;
}

.biggerNavText {
  color: #37373b;
  font-size: 22px;
}

.navLineSvg {
  width: 80px;
  height: 5px; /* controlls clickable size*/
  margin-bottom: 1em;
}

.navLineElem {
  stroke: #333333;
  stroke-width: 2; /* visual thickness of line */
  stroke-linecap: round;
}

/* bigger */

.navLineSvgBigger {
  width: 100px!important;
  height: 5px; /* controlls clickable size*/
  margin-bottom: 1em;
}

.navLineElemBigger {
  stroke: #4e4e4e!important;
  stroke-width: 3!important; /* visual thickness of line */
  stroke-linecap: round;
}

.frontpage {
  width: 100vw;
  height: 100vh;
  display: flex; 
  align-items: center;
  flex-direction: column;
}

.logo {
  margin: 1% 2%;
}

.leftwrapTop {
  width: 50%;
}

.leftwrapTop > h1 {
  font-weight: 200;
  font-style: normal;
  font-size: 64px;
}

.rightwrapTop {
  width: 50%;
}

.rightWrapBottom {
  width: 50%;
  padding-right: 17%;
  padding-top: 1%;
}

.rightWrapBottom > h2 {
  margin-top: 2%;
  font-weight: 200;
}

.leftWrapBottom {
  padding-right: 1%;
  font-size: 17px;
  font-weight: 200;
  font-style: italic;
  color: #616583a3;
  padding-left: 10%;
}

.firstBlock {
  width: 100%;
  height: 50vh;
  display: flex;
  text-align: right;
  justify-content: center;
  align-items: flex-end;
}

.lastBlock {
  height: 50vh;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

/* timeline */

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.wrap {
  width: 900px;
  min-width: 460;
  margin: 48px auto;
  padding: 0 16px;
  margin-top: 18vh;
}

.sec2_headline {
  font-size: 4rem;
  font-family: "Raleway";
  font-weight: 400; 
  font-style: normal;
}
.sec2_subtitle {
  font-size: 1.5rem;
  color: #5b6477;
}

.timeline {
  padding: 2rem;
  background: #fff;
  position: relative;
  height: 50vh;
}

.rail {
  position: relative;
  height: 64px;
  padding: 0 56px;
}

#status {
  font-size: 2rem;
}

.track-container {
  position: absolute;
  left: 56px;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  padding-bottom: 10px;
  overflow: hidden;
}

.track {
  position: relative;
  height: 2px;
  background: #999da5;
  border-radius: 999px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.4s ease;
}

.events {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.event-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.dot {
  --size: 12px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  border: 2px solid #000;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot:hover {
  transform: scale(1.1);
}

.dot.selected {
  background: #000;
  transform: scale(1.2);
}

.label {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #6b7280;
  white-space: nowrap;
  transition: opacity 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border: 1px solid #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  z-index: 10;
  transition: all 0.2s ease;
}

.nav-btn:hover:not(:disabled) {
  background: #000;
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}

.nav-btn.prev { left: 8px; }
.nav-btn.next { right: 8px; }
.nav-btn:disabled { opacity: .4; cursor: default; }

.panels {
  margin-top: 12px;
  position: relative;
  overflow: hidden;
  height: 100%;

}

.panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  padding: 1rem;
  transform: translateX(100%);
  transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  /* border: 2px solid #9b9b9b;
  border-radius: 20px; */

}

.panel.active {
  opacity: 1;
  transform: translateX(0);
}

.panel.sliding-out-left {
  opacity: 0;
  transform: translateX(-100%);
}

.panel.sliding-out-right {
  opacity: 0;
  transform: translateX(100%);
}

.panel h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}

.panel time {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .label {
display: none;
  }
}

/* 3rd section */

.sec3_header {
  font-family: Raleway;
  font-size: 30px;
  max-width: 1475px;
  width: 100%;
  height: 25vh; 
  display: flex; 
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 1rem;
  text-align: right;
}

.sec3_subIntro {
  font-size: 28px;
}

.sec3_itemWrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  max-width: 1475px;
  width: 100%;
  height: fit-content;
  color: #707080;
    position: relative;

}

.sec3_codeblock {
  border-radius: 8px;  
  border: solid 1px #b3b3be;
  width: 475px;
  min-height: 215px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.sec3_codeblock > :last-child {
  margin-top: auto;
}

.sec3_firstrow {
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.sec3_miniheadline {
  color: #222124;
  font-size: 22px;
  margin-bottom: 7px;
}

.sec3_languages {
  display: flex;
  justify-content: flex-end;
}

.sec3_languages > span {
  margin-right: 5px;
}


.invisibleLayer {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffffbb;
  z-index: 999;
}

/* 4th section */

.sec4_head {
  width: 50vw;
  height: 50vh;
  padding-right: 15%;
  padding-top: 10%;
}

.fourth {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

}

h6 {
  font-size: larger;
  font-weight: 500;
  margin-bottom: 7px;
}

.text {
  position: absolute;
  top: 25%;
  right: 0;
  width: 67%;
  padding-right: 13%;
  height: 65%;
  flex-wrap: wrap;
  align-content: space-around;
}

#about {
  position: relative;
  z-index: -1;
}

.frontpage_flair {
  position: absolute;
  width: 50%;
  right: 35%;
  bottom: -6%;
}

.sec4_infotexts {
  margin-bottom: 1rem;
  border-bottom: 2px solid #d7d7d7;
  padding-bottom: 1em;
}

div.text > div > a {
  color: #6c6cbb;
}

/* lightbox */

.lightbox_big {
  height: 70vh;
  width: 70vw;
  background-color: #ffffff;
  z-index: 999;
  position: absolute;
  top: -20vh;
  left: -10vw;
  border-radius: 8px;  
  border: solid 1px #b3b3be;
  filter: drop-shadow(0px 0px 8px grey);
  cursor: auto;
  overflow: hidden;
  padding: 1.8rem;
}

.sec3_chartcontainer {
  display: flex;
  height: 100%;
  align-content: center;
  flex-wrap: wrap;
  position: absolute;
  left: 3%;
}

/* Container */
.sec3_screenies {
  display: grid;                            
  grid-template-columns: repeat(2, 1fr);  
  gap: 10px;
  position: absolute;
  right: 5%;
  top: 25%;
  width: 50%;
}

.modifier {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px!important;
  position: absolute!important;
  right: 5%!important;
  top: 25%!important;
  width: 86%!important;
}

.sec3_imgWrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0e0e10; 
}

.sec3_imgWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sec3_lastrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}

iconify-icon {
  font-size: 21pt;
  /* z-index: 999; */
}

.huge {
    font-size: 27pt;
}
.sub_huge{
  font-size: 20px;
}

.copy-popup {
  position: absolute;
  background: #000;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}


/* media  */

/* Add spacing for the project section */
.sec3_wrap {
  padding-inline: 24px; /* left + right space */
}

/* Tablet */
@media (max-width: 1200px) {
  .sec3_wrap {
    padding-inline: 20px;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .sec3_wrap {
    padding-inline: 16px;
  }
}

/* Tablet: force 2 columns */
@media (max-width: 1200px) {
  .sec3_itemWrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: single column */
@media (max-width: 700px) {
  .sec3_itemWrap {
    grid-template-columns: 1fr;
  }
}

/* Mobile Layout for Main Nav (not the contact nav) */
@media (max-width: 700px) {
  nav:not(#contactNav) {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 48px;
    display: flex;
    z-index: 900;
  }

  /* Hide the vertical left nav lines */
  .leftNav {
    display: none;
  }

  /* Display the nav text horizontally */
  .rightNav {
    display: flex;
    gap: 18px;
    justify-content: flex-end;
    font-size: 18px;
    color: #37373b;
    width: 100%;
  }

  /* Prevent content from going under the fixed navs */
  body {
    padding-top: 96px; /* ~48px contact + ~48px main */
  }
}

/* Smaller phones */
@media (max-width: 420px) {
  nav:not(#contactNav) {
    height: 44px;
    top: 44px;
  }

  .rightNav {
    font-size: 16px;
    gap: 12px;
  }

  body {
    padding-top: 88px;
  }
}

/* Default (desktop) — leave your existing behavior */
.sec3_codeblock.big {
  transform: scale(1.05);
}

/* Tablet */
@media (max-width: 1200px) {
  .sec3_codeblock.big {
    transform: scale(1.02);
  }
}

/* Mobile */
@media (max-width: 700px) {
  .sec3_codeblock.big {
    transform: none;          /* ⛔ No scaling on mobile */
    width: 100% !important;   /* ✅ Fill the container cleanly */
    z-index: 5;
  }
}

@media (max-width: 700px) {

  .wrap {
    width: 100%;
    padding-inline: 16px;
    margin-top: 8vh;
  }

  .timeline {
    padding: 1.2rem;
    height: auto;
  }

  .rail {
    height: 48px;
    padding: 0 36px;
    position: relative;
  }

  /* Keep the track + dots visible & centered */
  .track-container {
    height: 40px;            /* ✅ restore height so dots stay visible */
    overflow: visible;       /* ✅ prevents cutoff */
  }

  .track {
    height: 2px;
    top: 50%;
  }

  .events {
    top: 50%;                /* ✅ keep dots aligned vertically */
    transform: translateY(-50%);
  }

  .dot {
    --size: 10px;
    width: var(--size);
    height: var(--size);
  }

  .event-item .label {
    font-size: 12px;
  }

  /* Panels stack vertically */
  .panels {
    margin-top: 1.2rem;
    height: auto;
    position: relative;
  }

  .panel {
    position: relative;     /* ✅ keeps content flowing below track */
    transform: none !important;
    opacity: 1 !important;
    padding-inline: 0;
  }

  .panel:not(.active) {
    display: none;
  }
}