@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500&display=swap');

:root {
	--highlight-color: tomato;
	--background-color: #eee;
	--amex-blue: #016ecf;
	--txt-color: #666666;
	--border: 1px solid grey;
	--ff-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ff-header: 'Barlow', sans-serif;
	--ff-cta: 'Barlow', sans-serif;
	--fs-h2: clamp(1.2rem, 5vw, 2.1rem);
	--fs-h3: clamp(1rem, 5vw, 1.5rem);
	--fs-hero: clamp(1.4rem, 2.1vw, 1.9rem);
	--fs-heroV1: clamp(1rem, 2.1vw, 1.9rem);
	--fs-p: clamp(1.2rem, 2.1vw, 1.6rem);
	--fs-p2: max(2vw, 1rem);
	--fs-cta: clamp(.7rem, 2.1vw, 1rem);
	--cta-back-color:grey;
	--cta-txt-color: black;
	--padding-h2: clamp(1rem, 5vw, 2rem);
	--padding-section: clamp(1rem, 5vw, 1.5rem);
	--nav-h2-offset: -5vw;
}
@media(max-width:1024px){
	nav .nav-h2{
		--nav-h2-offset: -7vw
	}
}

@media(max-width:600px){
	nav .nav-h2{
		--nav-h2-offset: 0;
	}
}
/* [data-theme=light] {
	--accent-color: #666666;
	--background-color: #eee;
}
[data-theme=dark] {
	--accent-color: #ccc;
	--background-color: #333;
} */
* {
	box-sizing: border-box;
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}
html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	font-family: var(--ff-primary)
}

body {
	background-color: var(--background-color);
	color: var(--txt-color);
	min-height: 100vh;
	font-size: 16px;
}
img{display: block}
ul{ list-style-type: none; }
a{ text-decoration: none; }
button, input {
	text-decoration: none;
	cursor: pointer;
	border: none;
}
.tween35{
	-moz-transition: all .35s;
	-o-transition: all .35s;
	-webkit-transition: all .35s;
	transition: all .35s;
}
.hide{
	visibility: hidden;
	opacity: 0;
}
.ohnohoney{
	opacity: 0;
  clip: rect(0 0 0 0) !important;
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
	z-index: -1;
}

div#site-container{
	display: block;
	/* place-content: top; */
	margin: 0 auto;
	border: var(--border);
	max-width: 2000px;
}
header {
	background-color: var(--background-color);
	position: sticky;
	top: 0;
	width: 100%;
	border-bottom: 1px gray solid;
	z-index: 100;
}

header h1 {
	/* background-color: var(--background-color); */
	font-weight: 200;
	font-size: max(5.5vw, 2.5em);
	line-height: .7;
	text-align: center;
	padding: max(1vw, 2vw) 0;
}

header h1 span.space {
	letter-spacing: -1em;
}

header h1 span.orange {
	color: var(--highlight-color);
}

/* README SECTION */

section, .work-container {
	display: flex;
	justify-content: space-around;
	align-content: flex-end;
	gap: 0;
	margin: 0;
	background-color: var(--background-color);
	border-top: var(--border);
	overflow: hidden;
	/* min-height: 90vh; */
}
section.hero{
	flex-direction: row;
	flex-wrap: wrap;
}
section.img-left{
	flex-direction:row-reverse;
	flex-wrap: wrap-reverse;
}
section.img-right{
	flex-direction: row;
	flex-wrap: wrap-reverse;
}
.work-container{
	/* min-height: 90vh; */
}
.work-container:last-of-type{
	padding-bottom: 30vh;
}
.hero-img-wrapper {
	flex: 1 1 450px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	height: clamp(30vh, 40vw, 55vh);
}
.hero-img-wrapper img{
	object-fit: cover;
	object-position: center center;
	/* height: 100%; */
	width: 100%;
}
div.hero-txt-wrapper{
	flex:1 1 410px;
	padding: var(--padding-section);
}
p {
	line-height: 1.3;
	font-weight: 200;
}

.hero p {
	font-size: var(--fs-hero);
}
main p {
	font-size: var(--fs-p);
}

h2, h3, h4 {
	font-family: var(--ff-header);
	text-transform: uppercase;
}
h2 {
	/* font-size: clamp(1.2rem, 5vw, 2.1rem); */
	font-size: var(--fs-h2);
	line-height: 1.3;
}
h2.title {
	display: block;
	background-color: var(--background-color);
	border-top: var(--border);
	padding: var(--padding-h2);
}

section.work-container {
	justify-content: space-between;
	gap: clamp(1rem, 5vw, 2rem);
	padding: clamp(1rem, 5vw, 2rem);
}
.work-img-wrapper {
	display: flex;
	justify-content: center;
	overflow: hidden;
	flex: 2 1 300px;
}
.work-img-wrapper img {
	object-fit: cover;
	object-position: top left;
	width: 100%;
	margin: 0 auto;
	border: var(--border);
}
div.work-txt-wrapper{
	flex:1 1 350px;
	/* overscroll-behavior: contain; */
}

h3 {
	font-size: var(--fs-h3);
	padding: 0 0 .5rem;
}
h4{
	font-size: var(--fs-h3);
}
h4 span {
	font-family: var(--ff-primary);
	color: var(--highlight-color);
	font-weight: 200;
	text-transform: none;
}
section h4:last-of-type{
	margin-bottom: 1rem;
}
div.cta-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
}
section p a {
	color: var(--highlight-color);
	text-decoration: underline;
}
a.cta{
	display: inline-block;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	color: var(--txt-color);
	font-family: var(--ff-cta);
	font-weight: 500;
	font-size: var(--fs-cta);
	padding: .8rem;
	margin-top: 0.8rem;
	position: relative;
	border: var(--border);
	width: 100%;
}
a.wipe {
	overflow: hidden;
	transition: color 0.3s;
}
a.wipe:after {
  background-color: var(--highlight-color);
	width: 100%;
  height: 101%;
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
	animation: slideOut 0.3s forwards;
  z-index: -1;
}
a.wipe:hover {
	color: white;
	
}
a.wipe:hover:after {
	animation: slideIn 0.3s forwards;
}
/* Define the hover state styles */
@keyframes slideIn {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0%);
	}
}
/* Define keyframes for unhover animation */
@keyframes slideOut {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* Social Iconds and contact buttons */

footer {
	height: 50px;
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: var(--background-color);
	border: var(--border);
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	gap: 1vw;
	padding: 0 clamp(1rem, 5vw, 2rem);
}
nav {
	background-color: var(--background-color);
	border-top: var(--border);
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 30px;
}
nav .btn-wrapper {
	position: sticky;
	width: 100%;
	height: 100%;
	padding: 0 clamp(1rem, 5vw, 2rem);
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 1vw;
	/* line-height: 0; */
}
nav .nav-h2 {
	/* width: 100%; */
	margin: 0 auto;
	position: relative;
	font-family: var(--ff-primary);
	font-weight: 200;
	font-size: clamp(.8rem, 2vw, 1rem);
	text-transform: none;
	transform: translateX(var(--nav-h2-offset));
}
.social-container{
	overflow: hidden;
	width: fit-content;
	line-height: 0;
}
footer a.wipe, nav a.wipe {
	/* border: var(--border); */
	border-right: var(--border);
	color: var(--accent-color);
	cursor: pointer;
	font-family: var(--ff-header);
	padding: 15px 10px;
	overflow: hidden;
	display: inline-block;
	position: relative;
	line-height: 0;
}
.social-container:first-child a{
	border-left: var(--border);
	font-size: clamp(.8rem, 2vw, 1rem);
}

nav
footer svg, nav svg {
	width: auto;
	height: 3vh;
	/* height: 90%; */
	object-fit: contain;
	display: inline-block;
}

.footer-btn {
	text-transform: uppercase;
}

/*  Email form */

.form-container {
	background-color: rgba(255, 255, 255, 0.85);
	position: fixed;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	z-index: 9;
}

.form-container div.form-wrapper {
	background-color: var(--background-color);
	border: var(--border);
	position: relative;
	width: 95%;
	max-width: 500px;
	display: block;
	margin: 1vh 0;
	font-family: var(--ff-header);
	text-transform: uppercase;
	box-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;
}
.form-container form {
	/* width: 100%;
	height: 100%; */
}
div.input-wrapper {
	padding: 1rem;
}
.form-container input, textarea, select {
	display: block;
	width: 100%;
	margin: 0 0 1rem;
	font-size: 1rem;
	font-family: var(--ff-primary);
	font-weight: 200;
	/* color: var(--accent-color); */
}
.form-container textarea{
	height: 200px;
}
.form-container label {
	display: inline-block;
	padding-bottom: 5px;
}

.form-container button.close-btn {
	font-family: var(--ff-primary);
	color: var(--accent-color);
	/* border: var(--border); */
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	border-bottom: var(--border);
	border-left: var(--border);
	margin: 0;
	padding: 0;
}
/* .close-btn div{
	content: "×";
} */
.form-container button.close-btn:hover, input#submitter:hover {
	background-color: var(--highlight-color);
}
input#submitter {
	border: var(--border);
}
form #form-response{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--highlight-color);
	color: black;
	font-size: var(--fs-h2);
	font-family: var(--ff-primary);
	text-align: center;
	text-transform: none;
}
/* .form-container label[for="subject"]{ display: block; } */