body {
	--white: #fffdfa;
	--linen: #FDF6ED;
	--gold: #EDAB5A;
	--coral: #ED6A5A;
	--steel: #66717E;
	--lightblue: #586BA4;
	--navy: #1C2535;
	--black: #07090D;
	--font-serif: 'Cardo', serif;
	--font-sans: 'Montserrat', sans-serif;
	--font-black: 'Archivo Black',sans-serif;
}

p {
	font-family: var(--font-serif)
	font-size: clamp(16px, 2vw, 24px);
}
h1, h2, h3, h4 {font-family: var(--font-sans);}
h1 {font-size: clamp(28px, 4vw, 63px);}

/***** INDEX *****/

/*hero container*/
.grid {
	display:grid;
	grid-template-columns:.45fr 1fr;
	min-height: 100vh;
}

/*hero left*/
.column-1 {
	display:grid;
	align-items:center;
	background:var(--black);
	margin: 0 auto;
	width:100%;
	grid-template-rows: auto 1fr auto;
	box-shadow: 0px 8px 10px #00000070;
	z-index:3;
	justify-content:center;
}
.hero-center {
	max-width: 1280px;
	margin: 0 auto;
}
.sc {
	font-family: var(--font-black);
	font-size: clamp(200px,12vw,420px);
	color:var(--coral);
	line-height:.8;
}
.creates {
	font-size: clamp(15px,2vw,36px);
	font-family: var(--font-sans);
	font-variant: small-caps;
	letter-spacing: .8em;
	color:#FBECDA;
	margin-top:17px;
}
.contact {
	color: #fffdfa38;
	font-size: 21px;
	display: flex;
	align-items: center;
	align-content: space-between;
	justify-content: space-between;
	padding: 5%;
	text-align: center;
}
.copyright {
	color: #fffdfa38;
	text-align: center;
	padding: 5%;
	font-family:var(--font-sans);
}
@media screen and (max-width:360px) {
	.column-1 {
		display:block;
		justify-content:space-between;
	}
	.sc {
		font-size:21px;
		padding:10px;
	}
	.contact, .copyright {display:none;}
	div.contain:nth-child(1) {
		position:absolute;
		width:50%;
		padding:3% 3% 4% 3%;
	}
	.websites {border-left:14px solid var(--lightblue);}
	.illust {border-left:14px solid var(--coral);}
	.design {border-left:14px solid var(--gold);}
}
/*hero right*/
.column-2 {
	background:var(--linen);
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
}
.row {height:100%;}
.row h2 {
	font-family: var(--font-sans);
	font-size:clamp(14px,1.8vw,18px);
	color:#221C22;
	line-height: .3;
	color: var(--linen);
}
.row:hover {
	background: var(--white);
	-webkit-transition: ease-out 0.15s;
    -moz-transition: ease-out 0.15s;
    transition: ease-out 0.15s;
    box-shadow: 30px 0px 30px #0000000a;
}
.contain {
	z-index: 99;
	position: fixed;
	padding: 1% 2% 1.5% 2%;
	width:200px;
	box-shadow:8px 0px 10px 0px rgba(47, 47, 47, 0.15), 0px 8px 5px -6px rgba(47, 47, 47, 0.09), 8px 0px 8px -8px rgba(47, 47, 47, 0.2)
}
.portfolio-btn {
	color: var(--linen);
	font-family: var(--font-sans);
	letter-spacing: 1px;
	font-variant: small-caps;
	display: inline-block;
	-webkit-transition: ease-out 0.2s;
    -moz-transition: ease-out 0.2s;
    transition: ease-out 0.2s;
	position: relative;
	letter-spacing:1px;
}
.portfolio-btn:before {
	content: "";
	position: absolute;
	width: 0;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: var(--white);
	visibility: hidden;
	transition: all 0.2s ease-in-out;
}
.contain:hover > .portfolio-btn:before {
	visibility: visible;
	width: 100%;
}

/*websites row*/
.websites {
	border-left:30px solid var(--lightblue);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	overflow: hidden;
	align-items:center;
}
.websites > .contain {
	background: var(--lightblue);
}

/*illustration row*/
.illust {
	border-left:30px solid var(--coral);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	overflow: hidden;
	align-items:center;
}
.illust > .contain {
	background: var(--coral);
}
.illust > .bg {
    background: linear-gradient(to right, #0000002b 20%, #0000), url(../img/illust-bg.jpg);
    -webkit-filter: grayscale(100%) opacity(61%);
	-moz-filter: grayscale(100%) opacity(61%);
	filter: grayscale(100%) opacity(61%);
	transition: all 0.5s ease;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.column-2 > a:nth-child(2):hover > .illust > .bg {
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	-webkit-filter: grayscale(0%) opacity(100%);
   -moz-filter: grayscale(0%) opacity(100%);
   filter: grayscale(0%) opacity(100%);
}

/*design row*/
.design {
	border-left:30px solid var(--gold);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	overflow: hidden;
	align-items:center;
}
.design > .contain {
	background:var(--gold);
}


/***** DESIGN PAGE *****/


.design-item {
  display: block;
  margin: 0 0 1em;
  width: 100%;
}
.design-inner > .bg {
	background: url('../img/keysersoze-11x17flyer-resize.jpg');
    background-position-x: 0%;
    background-position-y: 0%;
background-position: center center;
filter: blur(1000px) opacity(30%);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.img-contain, .img-explain {
	z-index:99;
	position: relative;
	padding: 1% 3% 1.5% 3%;
	box-shadow:8px 0px 10px 0px rgba(47, 47, 47, 0.15), 0px 8px 5px -6px rgba(47, 47, 47, 0.09), 8px 0px 8px -8px rgba(47, 47, 47, 0.2)
}
.img-contain img {
	max-width:100%;
}
.design-inner {
	display:grid;
	grid-template-columns: 2fr 1fr;
}