html, body {
  overflow-x: hidden;
}

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

.video-grid,
.project,

.video-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
}


:root {
  --spacing: 10px;
  --font-size-small: 12px;
  --main-bg: #0d0c0c;
  --accent-color: #45403d;
  --text-color: #f0e7e0;
  --overlay-bg: rgba(0,0,0,0.7);
  --font-primary: "Roboto", sans-serif;
}

*{user-select:none;outline:none;-webkit-tap-highlight-color: transparent;}html{scroll-behavior:smooth;}button,a{cursor:pointer;}body{font-family:"Roboto",sans-serif;font-optical-sizing:auto;font-weight:500;font-style:normal;font-variation-settings:"wdth" 100;margin:0;padding:0;background-color:#0d0c0c;color:#f0e7e0;text-align:center;}header{padding:20px;font-size:22px;}h1{font-family:'Akira Expanded Super Bold',sans-serif;}.logo-home{text-decoration:none;color:#f0e7e0;transition:color 0.3s ease;}.logo-home:hover{color:#45403d;cursor:pointer;}h2{font-family:'Akira Expanded Super Bold',sans-serif;}h3{font-family:"Roboto",sans-serif;font-optical-sizing:auto;font-weight:900;font-style:normal;font-variation-settings:"wdth" 100;}nav ul{list-style:none;padding:0;display:flex;justify-content:center;gap:10px;}nav ul li{display:inline;}nav ul li a{text-decoration:none;color:#f0e7e0;padding:5px 5px;transition:color 0.3s;font-family:"Roboto",sans-serif;font-optical-sizing:auto;font-weight:900;font-style:normal;font-variation-settings:"wdth" 100;}nav ul li a:hover{color:#45403d;}.hero{padding:100px 20px;font-size:22px;}#projects,#about,#contact{padding:60px 20px;}.featured-container{display:flex;justify-content:space-between;flex-wrap:nowrap;width:100%;gap:5px;max-width:1000px;margin:0 auto;}.about-container{display:flex;justify-content:space-between;flex-wrap:nowrap;width:100%;gap:5px;max-width:1000px;margin:0 auto;}.about-container ul{text-align:left;}.about-container ul li{margin-bottom:10px;}.projects-container{display:flex;flex-direction:column;align-items:center;gap:5px;max-width:1000px;margin:0 auto;}.project{position:relative;background:#181717;border-radius:0;text-align:center;width:100%;}.image-container{position:relative;width:100%;}.image-container img{width:100%;display:block;}.image-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateZ(0);transition:opacity 0.3s ease;will-change:opacity;}.image-container:hover .overlay{opacity:1;}.featured-container .project{flex:1;max-width:33.33%;padding:0;margin:0;}.about-container .project{flex:1;max-width:50%;padding:10px;margin:10px;background-color:#0d0c0c;}.projects-container .project{max-width:1000px;padding:0px;}.project img{width:100%;border-radius:0;}.project .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateZ(0);transition:opacity 0.3s ease;will-change:opacity;}.project:hover .overlay{opacity:1;}.project .overlay a{background:#45403d;color:#f0e7e0;padding:10px 20px;text-decoration:none;font-weight:bold;border-radius:0;transition:background-color 0.3s;}.project .overlay a:hover{background:#0d0c0c;}.divider{width:40%;height:1px;background:#3b3b3b;margin-top:20px;margin-bottom:-18px;margin-left:auto;margin-right:auto;}.divider2{width:80%;height:5px;background:#0d0c0c;}#contact a{color:#f0e7e0;text-decoration:none;transition:color 0.3s;}#contact a:hover{color:#45403d;}footer{padding:20px;background:#181717;font-size:14px;}.mobile-break{display:none;}.scroll-to-top{position:fixed;bottom:0;right:0;background:#181717;color:#f0e7e0;padding:6px 6px;font-size: 13px;border-radius:0;cursor:pointer;opacity:0;transform:translateY(20px);transition:opacity 0.3s ease,transform 0.3s ease;font-family:'Akira Expanded Super Bold',sans-serif;will-change:opacity,transform;}.scroll-to-top.visible{opacity:1;transform:translateY(0);display:flex;}.scroll-to-top .arrow{width:30px;height:auto;transition:fill 0.3s ease-in-out,transform 0.3s ease-in-out;fill:white;}.scroll-to-top .arrow.up{transform:rotate(180deg);fill:white;}.download-button{display:inline-block;background-color:#45403d;color:#f0e7e0;text-decoration:none;padding:15px;border-radius:0;font-weight:bold;text-align:center;margin-bottom:40px;transition:background-color 0.3s;}.download-button:hover{background:#181717;}.arrow-container{display:flex;justify-content:center;margin-bottom:10px;padding-bottom:20px;cursor:pointer;position:relative;z-index:10;touch-action:manipulation;}.arrow{width:30px;height:auto;transition:transform 0.3s ease-in-out,fill 0.3s ease-in-out;fill:white;pointer-events:none;}.arrow.up{transform:rotate(180deg);}.arrow-container:hover .arrow{fill:#45403d;}.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:5px;overflow:hidden;opacity:0;max-height:0;-webkit-overflow-scrolling:touch;}.image-grid{display:flex;flex-direction:column;gap:10px;padding:5px;overflow:hidden;opacity:0;max-height:0;-webkit-overflow-scrolling:touch;}.video-grid.expanded{opacity:1;max-height:5000px;}.image-grid.expanded{opacity:1;max-height:12000px;}.video-grid.collapsing,.image-grid.collapsing{animation:collapseGrid 0.3s ease-out forwards;}.video-grid.expanding,.image-grid.expanding{animation:expandGrid 0.3s ease-out forwards;}@keyframes collapseGrid{from{max-height:var(--grid-height);opacity:1;}to{max-height:0;opacity:0;}}@keyframes expandGrid{from{max-height:0;opacity:0;}to{max-height:var(--grid-height);opacity:1;}}.video-item,.image-item{text-align:center;}
.video-item iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  display: block;
  pointer-events: none;
  max-height: 100vh;
}
.image-item img{width:100%;height:auto;max-width:100%;object-fit:contain;pointer-events:none;}.video-caption,.image-caption{margin-top:5px;font-size:12px;color:white;}
.video-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
}

.video-item iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  display: block;
  pointer-events: none;
  max-height: 100vh;
}
.video-caption{margin-top:5px;font-size:12px;color:white;padding:5px;}@media (max-width:768px){.featured-container{flex-direction:column;align-items:center;}.featured-container .project{max-width:1000px;}.projects-container{padding:0 5px;}.projects-container .project{max-width:95%;}.about-container{flex-direction:column;align-items:center;}.about-container .project{max-width:1000px;}.video-grid{display:flex;flex-direction:column;gap:10px;}
.video-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
}

.video-item iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  display: block;
  pointer-events: none;
  max-height: 100vh;
}
.video-caption{margin-top:5px;font-size:12px;color:white;padding:5px 0;}.image-item img{width:100%;height:auto;}.video-grid.expanded{max-height:10000px;}.image-grid.expanded{max-height:12000px;}footer{font-size:12px;}.mobile-break{display:inline;}.arrow-container{justify-content:center;padding:10px 0;width:fit-content;margin:0 auto 10px;}h1{font-size:46px;}h2{font-size:20px;}}@font-face{font-family:'Akira Expanded Super Bold';src:url('fonts/AkiraExpandedSuperBold.woff2') format('woff2'),url('fonts/AkiraExpandedSuperBold.woff') format('woff');font-weight:bold;font-style:normal;}.toggle-header{background:none;border:none;color:white;font-size:20px;font-family:"Roboto",sans-serif;font-weight:900;padding:0;margin:0;text-align:center;transition:color 0.3s ease;cursor:pointer;}.toggle-header:hover{color:#45403d;}.toggle-header:focus{outline:none;color:white;}.toggle-header:focus-visible{outline:none;color:white;}.toggle-header:active{color:#45403d;}