/* --- RESET --- */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* --- END OF RESET --- */

/* --- PAGE STYLING --- */
* {
	box-sizing: border-box;
}

:root {
    --light-stone: #F1EFEC;
    --cool-mustard: #DBB37F;
    --ink-black: #252525;
	--almost-white: #fcfcfc;
}

body {
	font-family: 'Space Grotesk', monospace;
	color: var(--ink-black);
    background-image: url(images/background-pattern-long.svg);
    background-size: contain;
	background-repeat: repeat;
	background-attachment: fixed;
}

header {
    display: flex;
    justify-content: space-between;
	align-items: center;
    padding: 0.5rem 2rem;
	margin: 1rem 2rem;
	border-radius: 5rem;
}

.hero {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 2rem;
	position: relative;
}

main section:not(#overview, #context, #development, #tech, #challenges, #outcome) {
	padding: calc(8vw - 0.5rem);
}

article {
	padding: 0 2rem;
}

section, div:not(.hero) {
	margin: 2rem 0;
}

div.project-title {
	margin-top: 1rem;
	line-height: 1.1rem;;
}

#portfolio nav {
	margin: 4rem 0;
}

header {
	border: 3px solid var(--cool-mustard);
}

header, section, #projects {
	background-color: var(--almost-white);
}

.hero.top {
	position: relative;
	justify-content: flex-end;
	height: 50vh;
	min-height: 400px;
}

section#about {
	position: relative;	flex-direction: column;
}

.section-container {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.about, section#about, .section-container {
	display: flex;
}

.about-container {
	padding-bottom: 4rem;
}

#projects article {
	max-width: 800px;
	margin: auto;
}

footer {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	text-align: center;
}

div.footer-container {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: auto;
	justify-content: center;
	align-items: center;
}

footer h2 span.note, footer ul li {
	display: inline;
}

footer ul li {
	padding: 1rem;
}

footer p:not(.copyright) {
	font-size: 6vw;
	transform: rotate(-4deg);
	padding: 1rem;
	margin: 2rem 0;
	background-color: var(--almost-white);
	border: 2px solid var(--ink-black);
	border-radius: 10px;
}

footer .copyright {
	display: block;
	align-self: baseline;
	margin: 0 auto;
}

footer p, footer li {
	font-size: 1.5rem;;
}

/* --- TYPOGRAPHY --- */

h1, h2, .hero {
	font-family: 'Asap', sans-serif;
}

h1, h2, h3, .bold {
	font-weight: 500;
}

h1 {
	font-size: 10vw;
}

.hero p {
	font-size: 16vw;
	font-weight: 600;
	position: relative;
}

.hero p.note, p.note {
	width: 40%;
	text-align: center;
	transform: rotate(-3deg);
}

p + p.note, div#development label:first-of-type, #development p:last-of-type, figure+h3, p+figure {
	margin-top: 2rem;
}

h2 {
	font-size: 8vw;
} 

h2, h3 {
	margin-bottom: 2rem;
}

h3 {
	font-size: 4vw;
}

p.note, .note {
	font-family: 'Shadows into light', sans-serif;
}

#about div {
	display: flex;
	flex-direction: column;
	justify-content: end;
}

#about h2 {
	width: 40vw;
	justify-content: end;
}

#about div p, p.note, h2 span.note, div.project-title a {
	display: block;
}

#about div.about {
	width: 60%;
	max-width: 800px;
	border: 2px;
	margin: auto;
}

p.note {
	font-size: 4.5vw;
	font-weight: 400;
	z-index: 3;
}

h2 span.note {
	transform: rotate(-3deg);
}

.right-align {
	text-align: right;
}

ol {
	list-style: decimal;
	padding-left: 1rem;
	margin-top: 1.5rem;
}

#about .about p, ol {
	max-width: 400px;
}

.list-container {
	display: flex;
	align-items: flex-end;
}

li {
	margin: 1rem 0;
}

a {
	text-decoration: none;
}

code {
    font-family: monospace;
}

pre {
	display: block;
    background-color: #efede7;
    padding: 0 1rem;
    margin-top: 1rem;
    overflow-x: auto;
}

article[aria-label="portfolio-project"] label {
    border-bottom: 2px solid black;
    font-size: 1rem;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
}

#overview span {
    font-family: 'Space Grotesk', monospace;
    text-transform: uppercase;
    background-color: var(--cool-mustard);
}

#development span, #overview span {
    padding: 0.2rem;
	margin-right: 0.5rem;
	border-radius: 0.25rem;
}

#development span {
	text-decoration: underline;
}

#overview p+p {
	padding-top: 1rem;
}

footer p+a {
	font-size: 4rem;
	padding: 1rem;
	background-color: var(--cool-mustard);
	border-radius: 5px;
}

/* --- NAVIGATION --- */

nav li {
	margin: 0.5rem 0;
}

nav[aria-label="main"] ul {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 4;
	background: var(--light-stone);
	width: 100%;
	height: 100vh;
	opacity: 0;
	visibility: hidden;
	transform: translatex(100%); /* slide onto screen */
	transition: transform 0.6s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s;
	align-items: center;
	justify-content: center;
}

nav[aria-label="main"] ul li {
	font-size: 4em;
	text-align: center; 
	padding: 0.5rem 0;
	margin: 15px 0; 
	position: relative; /* used to position the circle for the hover */
}

#portfolio li {
	margin-bottom: 4rem;
}

/* --- IMAGES --- */

header img {
    width: 100px;
    height: auto;
}

svg {
	stroke: var(--cool-mustard);
}

.hero img, #about img {
	position: absolute;
}

.hero img {
	top: 2rem;
	width: 50%;
	right: calc(2vw - 20px);
}

#about img {
	width: 50%;
	max-width: 400px;
	height: auto;
	left: calc(6vw - 10px);
	top: calc(31vw + 5px);
}

#about .about img {
	left: calc(46vw - 10px);
	top: calc(650px + 20vw);
	/* top: calc(165vw - 7px);
	left: 45vw;
	top: 162vw; */
}

.underline-container {
	display: inline-block;
}

.underline-container svg {
	display: block;
	max-width: 100%;
}

#portfolio img {
	width: 100%;
	height: auto;
	transform: rotate(2deg);
}

#portfolio figure#recursive-records div{
	transform: rotate(3deg);
}

#portfolio figure#decoded div, #portfolio figure#three-designed-objects div{
	transform: rotate(-3deg);
}


#portfolio figure div, #portfolio img {
	box-sizing: border-box;
	margin: 0;
}

#portfolio figure div, #portfolio img {
	border: 4px solid var(--cool-mustard);
	border-radius: 20px;
}

figure+figure, #about h1+p, #challenges figure, object {
	margin-top: 1rem;
}

object {
	width: 100%;
	height: auto;
}

figcaption {
	font-style: italic;
	margin-top: 0.5rem;
}

#portfolio figcaption {
	margin-top: 2rem;
}

#projects img {
	width: 100%;
	height: auto;
}

/* --- TOGGLE --- */

input[type="checkbox"] {
	opacity: 0;
	position: absolute;
}

label.toggle {
	display: block;
	width: auto;
	margin: 0;
	position: relative;
	text-transform: uppercase;
	font-size: 1.2em;
    z-index: 5; /* ensures label stays on top of background when toggled */
}

label.toggle:hover, label.toggle:active, label.toggle:focus-visible {
	cursor: pointer;
	color: var(--cool-mustard);
}


nav .toggle::before {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}
input[type="checkbox"] + label.toggle + article, input[type="checkbox"] + label.toggle + nav, input[type="checkbox"] + label.toggle + div {
	display: none;
}

input[type="checkbox"]:checked + label.toggle + article, input[type="checkbox"]:checked + label.toggle + nav, input[type="checkbox"]:checked + label.toggle + div {
	display: block;
}

input[type="checkbox"]#menu-toggle:focus-visible + label.toggle::before {
	border-top: 1px solid var(--cool-mustard);
	border-bottom: 1px solid var(--cool-mustard);
	outline: none;
}

input[type="checkbox"]#menu-toggle:checked + label.toggle + ul {
	display: block;
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

label.toggle [class*='line-'] {
	background: #000;
	display: block;
	border-radius: 3px;
	height: 3px;
	width: 26px;
	margin: 6px auto;
	transform: rotate(0deg);
	transition: .4s ease all;
}

label.toggle:hover nav[aria-label="main"] div {
	background-color: var(--ink-black);
}

label.toggle:hover [class*='line-'] {
	background: var(--cool-mustard);
}

input[type="checkbox"]#menu-toggle:checked + label.toggle .line-top {
	transform: rotate(45deg);
	transform-origin: 0 0;
}

input[type="checkbox"]#menu-toggle:checked + label.toggle .line-mid {
	opacity: 0;
}

input[type="checkbox"]#menu-toggle:checked + label.toggle .line-bot {
	transform: rotate(-45deg);
	transform-origin: 0 90%;
}

#projects label.toggle:hover {
	font-weight: 600;
}

/* --- BACK TO TOP --- */

#back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	/* display: inline; */
	background-color: var(--cool-mustard);
	padding: 0.5em;
	border-radius: 1em;
	border: solid #fff 2px;
	font-size: 0.75em;
}

#back-to-top a{
	display: none;
}

#back-to-top:hover a{
	display: contents;
	transition: display 1s ease-in-out;
	color: var(--ink-black);
}

@supports (animation-timeline: view()) {
  @keyframes rise {
    from { bottom: -2.6rem }
    to   { bottom: 2.4rem }
  }
  p#back-to-top {
    animation: rise auto linear both;
    animation-timeline: scroll();
    animation-range: 500px 800px;
  }
}
/* --- LINK STATES --- */

a:link, a:visited {
	color: var(--ink-black);
}

a:hover, a:active, a:focus {
	color: var(--cool-mustard);
	font-weight: 600;
}

#portfolio li:hover {
	transform: scale(1.05);
}

#portfolio li:not(:hover) {
	transition: transform 0.4s ease-in-out;
}

footer p:not(.copyright):hover {
	background-color: var(--cool-mustard);
}
footer p:not(.copyright):hover a {
	color: var(--ink-black);
}

/* --- MEDIA QUERIES --- */

@media (min-width:560px) {

	.hero.top {
		height: calc(100vh - 140px);
	}

	p.note {
	font-size: calc(4vw - 3px);
	}

	nav[aria-label="main"] label, nav[aria-label="main"] input {
	display: none;
	}

	nav[aria-label="main"] ul {
		display: flex;
		flex-direction: row;
		position: static;
		width: auto;
		height: auto;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		justify-content: flex-end;
		gap: 1rem;
	}

	nav[aria-label="main"] ul li {
		font-size: calc(3vw - 3px);
	}

	nav .toggle::before {
	display: inline;
	}

	header {
		position: sticky;
		top: 0;
		z-index: 4;
		opacity: 75%;
	}

	header:hover {
		opacity: 1;
	}

	#about img {
		top: 20vw;
	}

	#about .about img {
		top: calc(700px + 10vw);
	}

	footer{
		height: calc(100vh - 140px);
	}
}

@media (min-width:650px) {
	#about .about img {
		top: calc(700px + 14vw);
	}

	#projects h2 {
		font-size: 3.5rem;
	}

	#projects h3 {
		font-size: 1.25rem;
	}
}
@media (min-width:960px) {

	p.note {
	font-size: 2rem;
	}

	.hero img {
	right: calc(2vw - 50px);
	}

	#about img {
		left: 10vw;
	}

	#about .about img {
		top: calc(700px + 20vw);
	}
}

@media (min-width:1200px) {

	h1 {
		font-size: 7.5rem;
	}

	nav[aria-label="main"] ul li {
		font-size: 2rem;
	}
	
	.hero img {
	right: calc(2vw - 80px);
	}

	#portfolio ul, #visual-balance, #challenges div {
	display: grid;
	gap: 2rem;
	}

	#portfolio ul, #visual-balance {
	grid-template-columns: repeat(3, 1fr);
	}

	#challenges div {
		grid-template-columns: repeat(2, 1fr);
	}

	#about .about img {
		top: calc(800px + 25vw);
	}
}

@media (min-width:1370px) {
	#about img {
		top: calc(17vw + 5px);
		left: 60vw;
	}
}