@charset "UTF-8";

:root {
/* Brand colors */
--bg-color: #000000;
--primary: #ffc324;
--primary-hover: #ffd25b;
--black: #000000;
--white: #ffffff;
--transblack: rgba(0, 0, 0, 0.8);
}
[data-theme="simpsons"] {
  --bg-color: #31abed;
  --primary: #ffd90f;
  --primary-hover:#ffe34b;
}
[data-theme="image"] {
  --bg-color: #012e3b;
  --primary: #9efdfd;
  --primary-hover: #b6fefe; 
}
[data-theme="prompt"] {
  --bg-color: #320000;
  --primary: #ff2800;
  --primary-hover: #ff5e40;
}
html, body {
    margin: 0;
    height: 100vh;
    
}
html { height: 100%; scroll-behavior: smooth; overscroll-behavior: none; }
*,*:before,*:after { box-sizing: border-box; }
body {
    background-color:var(--bg-color);
	color:var(--white);
	font-family: "Inter", sans-serif;
	font-style: normal;
	font-weight: normal;
	font-optical-sizing: auto;
    display: flex;
    flex-direction: row;
    display:flex;
	align-items: flex-start;
	gap:2rem;
	align-items: start;
	height: fit-content;
    padding: 0.25rem;
    max-width: 1920px; 
    margin: 0 auto; 
}
/* FONTS */
h1, h2, h3, h4, p, a { margin:0;}
h1 { font-size:2.75em; font-weight: 600; }
h2 { font-size:1.2em; font-weight: 400; }
h3 { font-size:1.1em; font-weight: 400; }
h4 { font-size:1em; font-weight: 200;  }
p, a { font-size: 1em; font-weight:300; line-height: 1.6em; }
strong { font-weight:700;}
ul li, ol li { margin: 0 0 16px -20px;}

/* FLEX COMPONENTS */
nav {
	background-color: var(--transblack);
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
	margin:0;
    flex:1;
	position: sticky;
  	top: 4px;
	width:100%;
    border-radius: 4px;
}
.nav1 {
	background-color: transparent;
	display:flex;
	justify-content: space-between;
	align-items: center;
	width:100%;
	height:auto;
    padding:1.25rem;
}
main {
    background-color:var(--transblack);
	flex:3;
    display:flex;
    gap:3.333%;
    padding: 1.25rem;
    border-radius: 4px;
}
footer {
	padding:24px;
	display: flex;
	justify-content: flex-end;
}
/* LEFT RAIL */
.side-nav {
	flex:1;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap:2rem;
	height:max-content;
	padding:0.5em 1.25rem 1.25rem 1.25rem;
}
/* MIDDLE AND RIGHT RAIL */
.main-content {
	flex:3;
	display:flex;
	flex-direction: column;
	gap:2rem;
}	
/* MIDDLE */
.project-header {
	display:flex;
	flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
	gap: 1rem;
}
.project-title {
	flex:2;
	display:flex;
	flex-direction: column;
	gap:1rem;
}
.btn-group {
    flex:1;
	display:flex;
    gap:8px;
	justify-content: flex-end;
}
.hero-section {
	display:flex;
	gap:1.5rem;
}
.hero-img {
	width:100%;
	height:auto;
	flex:2
}
.other-content { display:flex; gap:24px;}
.other-content div{
	flex:2;
	display:flex;
	flex-direction: column;
	gap:1.5em;
}
.other-content div:last-child {flex:1;}

/* FLEX */
.row-align {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
}
.row-space {
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap:16px;
}
/* BUTTONS */
.btn {  
    background-color: transparent;
    color: var(--white);
    border-radius: 4px;
    border:none;
    font-size:1em;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap:8px;
    transition: all 150ms ease-in-out 0s;
    cursor: pointer;
    white-space: nowrap;
    word-break: normal;
    flex-shrink: 0;
    max-width:fit-content;
	box-sizing: border-box; 
	height: 44px;
	margin:0;
}
.btn:hover, a:hover {
	scale: 1.01;
}
/* Keyboard focus ring, shown only for keyboard navigation */
a:focus-visible, button:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}
.btn-primary{
    background-color: var(--primary);
    color:var(--black);
	box-sizing: border-box; 
	padding:12px 16px;
}
.btn-primary:hover, .btn-primary:focus-visible {
	background-color: var(--primary-hover);
}
.btn-secondary {
    background-color: var(--black);
    color: var(--primary);
	box-sizing: border-box; 
    border: solid 2px var(--primary);
	padding:12px 16px;
}
.btn-secondary:hover, .btn-secondary:focus-visible {
	background-color: var(--black);
    border: solid 2px var(--primary-hover);
}
.btn-tertiary {
	/*background-color: var(--black);*/
    color: var(--primary);
	box-sizing: border-box; 
	padding:12px 0;
}
.btn-tertiary:hover, .btn-tertiary:focus-visible { 
	background-color: var(--primary-hover);
    color:var(--black)
}
.btn-icon {
    background-color: var(--black);
    color: var(--primary);
	box-sizing: border-box; 
    border: solid 2px var(--primary);
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height:44px;
}
.btn-tertiary:hover, .btn-tertiary:focus-visible { padding:12px 16px; }
.btn-rounded {
    background-color: var(--black);
    color: var(--white);
	box-sizing: border-box; 
    border: solid 2px var(--white);
    border-radius: 50%;
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    width:44px; height:44px;
}
.btn-rounded img { width:24px; }
.btn-nav {
    padding:0;
    color:var(--white);
    font-weight:300;
}
.btn-nav:hover, .btn-nav:focus-visible {
	color:var(--primary)
}
.btn-nav svg * { transition: fill 0.3s ease;}
.btn-nav:hover svg *, .btn-nav:focus-visible svg * {stroke: var(--primary); }
.disabled, .featured-list a.disabled {
    pointer-events: none;
    /* Solid grey instead of 50% opacity: at least 5.2:1 on every theme's nav panel */
    color: #919191;
    cursor: not-allowed;
    user-select: none; 
}
.next-project { display:flex; align-items: flex-end; width:100%; }

/* ABOUT */
.copybox {
	display: flex;
	flex-direction: column;
	gap:1rem;
}
.copybox div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap:1rem;
}

/* PRODUCT HIGHLIGHTS */
.highlights {
    display: flex;
	flex-direction: column;
	gap:1rem;
}
.highlights div div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap:0.75rem;
}

/* HERO DETAILS */
.hero-rail {
	flex:1;
	display: flex;
	flex-direction: column;
	gap:1rem;
}
.hero-rail div {
    display: flex;
	flex-direction: column;
	gap:0.75rem;
}

/* LIST OF SELECTABLE ITEMS */
.featured { display:flex; flex-direction: column; width:100%; gap:1rem; }
.featured-list { display:flex; flex-direction: column; gap:0.25rem;}

.featured-list a {
    flex:1;
    box-sizing: border-box; 
    text-wrap: nowrap;
    background-color: transparent;
    border-radius: 3px;
    color:var(--white);
    fill: currentColor;
    font-size:1em;
    font-weight:300;
    text-decoration: none;
    padding:12px 0px;
    display: flex;
    align-items: center;
    gap:0.75rem;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.featured-list a, .icon-svg path { fill: currentColor; }
.featured-list a:hover, .featured-list a:focus-visible { color: var(--primary); }

/* SHIV */
.img-responsive { width:100%; height:auto; }

/* RESPONSIVE */
/* MOBILE ONLY */
@media (max-width: 767px) {
    nav { border-radius: 0px; top:0;  }
    body { flex-direction: column; gap:0; padding: 0; }
    main { padding: 1rem; width:100%; border-radius: 0px; background-color: var(--black); }
    .nav1 {background-color: var(--black); position: relative; top:0; padding:0.5em 1rem;}
	.project-title, .hero-section { flex-direction: column; gap:1rem;}
	.mobile-hide { display:none;}
	/* Open menu covers the page below the header */
	nav { z-index: 10; }
	.side-nav { position: fixed; top: var(--nav-h, 64px); right: 0; bottom: 0; left: 0; height: auto; overflow-y: auto; background-color: var(--black); }
	body.menu-open { overflow: hidden; }
}
/* TABLET ONLY */
@media (min-width: 768px) and (max-width: 1023px) {
	.hero-section { flex-direction: column; }
}
/* NOT MOBILE */
@media (min-width:768px) {
    .desktop-hide { display:none; }
}
/* MOBILE & TABLET */
@media (max-width: 1023px) {
    .other-content { flex-direction: column;}
}
/* HD DESKTOP */
@media (min-width: 1300px) {
    .project-header { flex-direction: row;}
}
/* LOGO: first E and second C follow the theme color */
.logo-accent { fill: var(--primary); }

/* MOBILE MENU TOGGLE */
.nav-toggle { padding: 0; height: auto; }
.nav-toggle[hidden] { display: none; }


/* NARROW SCREENS: let buttons wrap instead of forcing sideways scroll */
.btn-group { flex-wrap: wrap; }
@media (max-width: 767px) { .btn-group { justify-content: flex-start; } }
.next-project .btn { white-space: normal; height: auto; min-height: 44px; text-align: right; }

/* ACCESSIBILITY HELPERS */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}