:root{--font-family: "PP Neue Montreal", serif;--text-color: white;--background-color: rgba(0, 0, 0, .3);--backdrop-filter-blur: blur(5px);--nav-height: 60px;--nav-padding: 0 20px;--nav-text-color: white;--nav-link-gap: 30px;--nav-link-color: white;--nav-link-hover-color: #ffffff;--nav-link-hover-background: #000000;--nav-link-padding: 5px 10px;--nav-link-transition: color .3s;--border-radius: 10px;--small-font-size: .9em;--medium-font-size: 1.1em;--large-font-size: 1.2em;--gap-small: 15px}body{margin:0;font-family:var(--font-family);color:var(--text-color);background-color:#000}a{color:var(--nav-link-color);text-decoration:none;transition:var(--nav-link-transition)}a:hover{color:var(--nav-link-hover-color);text-shadow:-1px 0 red,1px 0 blue}.contact-content,.projects-content{max-width:800px;margin:100px auto;padding:20px;background:var(--background-color);border-radius:var(--border-radius);color:var(--text-color);text-align:center}.contact-content img,.project img,.project video{width:200px;height:auto;margin-bottom:var(--gap-small)}@media (max-width: 768px){.contact-content,.projects-content{margin:80px 10px;max-width:90%}}.gray-section:first-of-type{margin-top:80px}.gray-section{background-color:#232323;padding:20px;border-radius:var(--border-radius);max-width:800px;margin:24px auto;box-shadow:0 2px 40px #00000059;border:.5px solid #ffffff3e;transition:box-shadow .25s,transform .25s}.gray-section:hover{box-shadow:0 6px 60px #00000080;transform:translateY(-2px)}.gray-content{display:flex;align-items:flex-start;gap:20px}.project-image{width:210px;height:auto;border:1px solid rgba(255,255,255,.7);border-radius:10px;box-shadow:0 0 20px #ffffff38;flex-shrink:0}.gray-text{color:#dadada;line-height:1.65;font-size:.95em;min-width:0}.gray-text h2{margin:0 0 4px;font-size:1.15em;font-weight:600;color:#f0f0f0}.gray-text p{margin:0}.project-link{display:inline-block;margin-top:12px;padding:4px 13px;border:1px solid rgba(255,255,255,.3);border-radius:20px;font-size:.87em;color:#dadada;text-decoration:none;transition:background .2s,border-color .2s;text-shadow:none}.project-link:hover{background:#ffffff14;border-color:#fff9;color:#fff;text-shadow:none}.nav{position:fixed;top:0;width:100%;z-index:1000}.title-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.project-date{color:#888;font-size:.82em;background:#ffffff12;padding:2px 9px;border-radius:10px;border:.5px solid rgba(255,255,255,.14);white-space:nowrap;flex-shrink:0;margin-left:10px}@media (max-width: 768px){.title-container{flex-direction:column;align-items:flex-start}.project-date{margin-top:-5px;margin-bottom:10px}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:var(--background-color);padding:var(--nav-padding);box-sizing:border-box;z-index:2;-webkit-backdrop-filter:var(--backdrop-filter-blur);backdrop-filter:var(--backdrop-filter-blur);display:flex;align-items:center;justify-content:space-between}.nav h1{font-size:var(--large-font-size);margin:0;color:var(--nav-text-color)}.nav h1:hover{text-shadow:-1px 0 red,1px 0 blue}.nav-links{display:flex;gap:var(--nav-link-gap);list-style:none;padding:0;margin:0}.nav-links a{color:var(--nav-link-color);text-decoration:none;transition:var(--nav-link-transition);font-size:var(--medium-font-size);padding:var(--nav-link-padding);border-radius:var(--border-radius)}.nav-links a:hover{color:var(--nav-link-hover-color);background:var(--nav-link-hover-background);text-shadow:-1px 0 red,1px 0 blue}.menu-icon{display:none;flex-direction:column;cursor:pointer;padding:10px;background:none;border:none;outline:none}.menu-icon .bar{width:22px;height:2.5px;background-color:#fff;margin:4px 0;transition:.4s}@media (max-width: 768px){.menu-icon{display:flex}.nav-links{display:none;flex-direction:column;gap:var(--gap-small);width:100%;text-align:center;background:var(--background-color);position:absolute;top:var(--nav-height);left:0}.nav-links.active{display:flex}.menu-icon.toggle .bar:nth-child(1){transform:rotate(-45deg) translate(-8px,7px)}.menu-icon.toggle .bar:nth-child(2){opacity:0}.menu-icon.toggle .bar:nth-child(3){transform:rotate(45deg) translate(-8px,-7px)}.gray-section{margin:16px 12px;max-width:calc(100% - 24px);padding:16px}.gray-content{flex-direction:column;gap:14px;text-align:left}.project-image{width:60%;max-height:220px;object-fit:cover;margin:0 auto;display:block}.gray-text{padding:0}.title-container{flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px}.project-date{margin-left:0}}:root{--controls-background: rgba(0, 0, 0, .1);--controls-gap: 40px;--control-label-color: white;--control-label-min-width: 10px;--value-display-color: #fff;--value-display-min-width: 25px;--slider-width: 250px;--slider-thickness: 5px;--slider-track-color: #1d1d1d;--slider-track-border-radius: 4px;--slider-thumb-size: 15px;--slider-thumb-color: white;--slider-thumb-margin-top: calc(-.5 * var(--slider-thumb-size) + .5 * var(--slider-thickness));--slider-thumb-border-radius: 50%;--gap-small: 15px;--mobile-slider-thumb-size: 25px;--mobile-slider-thickness: 8px;--mobile-slider-thumb-margin-top: calc(-.5 * var(--mobile-slider-thumb-size) + .5 * var(--mobile-slider-thickness))}.controls{position:fixed;bottom:0;left:0;right:0;background:var(--controls-background);padding:10px;z-index:2;-webkit-backdrop-filter:var(--backdrop-filter-blur);backdrop-filter:var(--backdrop-filter-blur);display:flex;justify-content:center;gap:var(--controls-gap)}.control-group{display:flex;align-items:center;gap:var(--gap-small)}.control-group label{font-size:var(--small-font-size);min-width:var(--control-label-min-width);color:var(--control-label-color);cursor:pointer}.value-display{font-size:var(--small-font-size);color:var(--value-display-color);min-width:var(--value-display-min-width);text-align:right}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--slider-width);background:transparent;cursor:pointer}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:var(--slider-thickness);background:var(--slider-track-color);border-radius:var(--slider-track-border-radius)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:var(--slider-thumb-margin-top);width:var(--slider-thumb-size);height:var(--slider-thumb-size);background:var(--slider-thumb-color);border-radius:var(--slider-thumb-border-radius);cursor:pointer;box-shadow:-3px 0 red,3px 0 #00f}input[type=range]::-moz-range-track{width:100%;height:var(--slider-thickness);background:var(--slider-track-color);border-radius:var(--slider-track-border-radius)}input[type=range]::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);background:var(--slider-thumb-color);border-radius:var(--slider-thumb-border-radius);cursor:pointer;box-shadow:-3px 0 red,3px 0 #00f}.checkbox-container{display:flex;gap:20px;align-items:center}.custom-checkbox{display:flex;align-items:center;cursor:pointer;font-size:var(--small-font-size);color:var(--control-label-color);margin-left:28px}.custom-checkbox input{display:none}.custom-checkbox .checkmark{width:15px;height:15px;background:var(--slider-thumb-color);border-radius:var(--slider-thumb-border-radius);margin-left:10px;position:relative;box-shadow:-3px 0 red,3px 0 #00f}.custom-checkbox input:checked+.checkmark:after{content:"";position:absolute;top:4px;left:4px;width:7px;height:7px;background:#000;border-radius:50%}@media (max-width: 768px){.controls{flex-direction:column;align-items:center;gap:var(--gap-small);padding:15px 10px}.control-group{flex-direction:column;align-items:center;width:100%}.control-group label{text-align:center}input[type=range]{width:90%;max-width:300px;height:30px;padding:2px 0}input[type=range]::-webkit-slider-runnable-track{height:var(--mobile-slider-thickness)}input[type=range]::-webkit-slider-thumb{margin-top:var(--mobile-slider-thumb-margin-top);width:var(--mobile-slider-thumb-size);height:var(--mobile-slider-thumb-size);box-shadow:-4px 0 red,4px 0 #00f}input[type=range]::-moz-range-track{height:var(--mobile-slider-thickness)}input[type=range]::-moz-range-thumb{width:var(--mobile-slider-thumb-size);height:var(--mobile-slider-thumb-size);box-shadow:-4px 0 red,4px 0 #00f}.value-display{display:none}.checkbox-container{gap:15px;margin-top:15px;justify-content:center}.custom-checkbox{margin-left:0;padding:10px}.custom-checkbox .checkmark{width:20px;height:20px;margin-left:15px;box-shadow:-4px 0 red,4px 0 #00f}.custom-checkbox input:checked+.checkmark:after{top:5px;left:5px;width:10px;height:10px}}html[data-theme=light]{--text-color: #111111;--background-color: rgba(245, 245, 245, .85);--nav-text-color: #111111;--nav-link-color: #111111;--nav-link-hover-color: #000000;--nav-link-hover-background: #dddddd;--control-label-color: #111111;--value-display-color: #111111;--slider-track-color: #cccccc;--slider-thumb-color: #222222;--controls-background: rgba(245, 245, 245, .7)}html[data-theme=light] body{background-color:#f5f5f5}html[data-theme=light] .gray-section{background-color:#ebebeb;border-color:#0000001a;box-shadow:0 2px 30px #00000014}html[data-theme=light] .gray-section:hover{box-shadow:0 6px 40px #00000021}html[data-theme=light] .gray-text{color:#333}html[data-theme=light] .gray-text h2{color:#111}html[data-theme=light] .project-image{border-color:#555;box-shadow:0 0 15px #0000002e}html[data-theme=light] .project-date{color:#666;background:#0000000f;border-color:#0000001f}html[data-theme=light] .project-link{color:#333;border-color:#00000040}html[data-theme=light] .project-link:hover{background:#0000000f;border-color:#00000080;color:#111}html[data-theme=light] .menu-icon .bar{background-color:#111}html[data-theme=light] .custom-checkbox input:checked+.checkmark:after{background:#f5f5f5}html[data-theme=light] a:hover,html[data-theme=light] .nav h1:hover,html[data-theme=light] .nav-links a:hover{text-shadow:none}.nav-right{display:flex;align-items:center;gap:5px}.theme-toggle{background:none;border:none;cursor:pointer;font-size:1.15em;color:var(--nav-link-color, white);padding:5px 9px;border-radius:var(--border-radius);transition:background .2s;line-height:1;display:flex;align-items:center;font-family:var(--font-family)}.theme-toggle:hover{background:var(--nav-link-hover-background, #000000);text-shadow:-1px 0 red,1px 0 blue}
