:root {
	--ultra-light:hsl(33,100%,98%);
	--ultra-light-trans-30:hsla(33,100%,98%,30%);
	--ultra-light-trans-15:hsla(33,100%,98%,15%);
	--ultra-light-trans-5:hsla(33,100%,98%,5%);
	--light:hsl(33,100%,95%);
	--medium:hsl(56,7%,51%);
	--dark:hsl(190,10%,24%);
	--space-s:1rem;
	--shadow:hsla(0, 0%, 0%, 25%);
}
html {
	font-size: 100%;
}
body {
	background-color:var(--dark) ;
	font-family: "Raleway", sans-serif;
	color: var(--light);
	font-size: clamp(1rem, 0.917rem + 0.37vw, 1.25rem);
	font-weight: 300;
	line-height: 1.6;
}
img {
	width: 100%;
}
.callout {
    font-size: clamp(5rem, 4rem + 4.444vw, 8rem);
    font-weight: 600;
    color: var(--ultra-light-trans-30);
    line-height: 1;
}
.callout-wrapper {
	order: -1;
}
h1 {
	font-size: clamp(1rem, 0.917rem + 0.37vw, 1.25rem);
	font-weight: 300;
	line-height: 1.6;
}
h2 {
	font-size: clamp(2.5rem, 1.875rem + 2.778vw, 4.375rem);
	font-weight: 600;
	color: var(--ultra-light-trans-30);
    line-height: 1.2;

}
h3 {
	font-size: clamp(1.375rem, 1rem + 1.667vw, 2.5rem);
	font-weight: 600;
	line-height: 1.2;
}
h1,
h2,
h3,
p,
ul {
	margin-block: 0;
}
a,
a:visited {
	color: var(--ultra-light);
	text-underline-offset: 5px;
}
a:hover,
a:focus {
	color: var(--light);
	text-decoration: none;
}
a:active {
	color: var(--light);
}
a,
nav a,
nav a:visited {
	color: var(--ultra-light);
	text-decoration: none;
}
nav a:hover,
nav a:focus {
	color: var(--light);
	text-decoration: underline;
	text-underline-offset: 5px;
}
nav a:active {
	color: var(--light);
}
.logo img {
	max-width: 2rem;
	color: var(--ultra-light);
}
nav ul {
	padding-inline-start: 0;
	list-style-type: none;
	display: flex;
	gap: 1rem;
}
header .navtoggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;	
}
.navtoggle ul li:not(:last-child) {
	display: none;
}
.navtoggle.responsive ul li:not(:last-child) {
	display: flex;
}
section {
	padding-inline: var(--space-s);
	padding-block: calc(var(--space-s) * 1.5);
}
header{
	padding-inline: calc(var(--space-s));
	padding-block: calc(var(--space-s) * 2);
}
footer {
	padding-inline: var(--space-s);
	padding-block-start: calc(var(--space-s) * 1.5);
	padding-block-end: var(--space-s);
}
.container {
	display:flex;
	flex-direction: column;
	gap: calc(var(--space-s) * 8);
	width: 90%;
	max-width: 1000px;
	margin-inline: auto;
}
.project-wrapper {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-s) * 12);
}
.content-header {
	display: flex;
	flex-direction: column-reverse; 
	gap: calc(var(--space-s) * 2.5);
}
.content-wrapper {
	display: flex;
	flex-direction: column; 
	gap: calc(var(--space-s) * 2);	
}
.content-wrapper .text-block {
	display: flex;
	flex-direction: column; 
	gap: calc(var(--space-s) * 1);
}
.profile-image {
	background-color: var(--ultra-light-trans-5);
	padding: 1em 2em;
	max-width: 20rem;
	transform: rotate(-4deg);
-webkit-box-shadow: 0px 4px 9px 0px var(--shadow);
-moz-box-shadow: 0px 4px 9px 0px var(--shadow);
box-shadow: 0px 4px 9px 0px var(--shadow);
}
.profile-image img {
	max-width: 21rem;
	transform: rotate(4deg);
}
figure {
	margin: 0;
	line-height: 0;	
}
.profile-wrapper {
	display: flex;
	justify-content: center;
}
.project-short {
	background-color: var(--ultra-light-trans-5);
	padding: 2em 1em;
	margin-inline-start: 0.75em;
	display: grid;
    grid-template-columns: 6fr 1fr;
    transition: all 0.3s ease-in-out;
    -webkit-box-shadow: 0px 4px 9px 0px var(--shadow);
	-moz-box-shadow: 0px 4px 9px 0px var(--shadow);
	box-shadow: 0px 4px 9px 0px var(--shadow);
}
.project-short:after {
	content: "";
	position: absolute;
	top:-0.75em;
	bottom: 0.75em;
	left: -0.75em;
	right: 0.75em;
	border: 1.25px solid var(--ultra-light-trans-30);
	pointer-events: none;
	z-index: 2;
}
.skills-wrapper:after {
	content: "";
	position: absolute;
	top:-0.75em;
	bottom: 0.75em;
	left: -0.75em;
	right: 0.75em;
	border: 1.25px solid var(--ultra-light-trans-30);
	pointer-events: none;
	z-index: 2;
}
.container-inner {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-s) * 2);
}
.skills-wrapper {
	position: relative;
	background-color: var(--ultra-light-trans-5);
	padding: 2em 1.75em 2em 1em;
	margin-inline-start: 0.75em;
	display: grid;
	gap: calc(var(--space-s) * 2);
	-webkit-box-shadow: 0px 4px 9px 0px var(--shadow);
	-moz-box-shadow: 0px 4px 9px 0px var(--shadow);
	box-shadow: 0px 4px 9px 0px var(--shadow);
}
.media-wrapper-mockup:after {
	content: "";
	position: absolute;
	top:0.75em;
	bottom: -0.75em;
	left: -0.75em;
	right: 0.75em;
	border: 1.25px solid var(--ultra-light-trans-30);
	pointer-events: none;
	z-index: 2;
}
.media-wrapper-mockup {
	background-color: var(--ultra-light-trans-5);
	padding: 2em 1em;
	margin-inline-start: 0.75em;
	display: grid;
	-webkit-box-shadow: 0px 4px 9px 0px var(--shadow);
	-moz-box-shadow: 0px 4px 9px 0px var(--shadow);
	box-shadow: 0px 4px 9px 0px var(--shadow);

}
.media-wrapper-mockup.footer {
	position: relative;
}
.media-wrapper-mockup.footer:after {
	content: "";
	position: absolute;
	top:-0.75em;
	bottom: 0.75em;
	left: -0.75em;
	right: 0.75em;
	border: 1.25px solid var(--ultra-light-trans-30);
	pointer-events: none;
	z-index: 2;
}
.skills-wrapper ul {
    list-style-type: none;
    padding-inline-start: 0;
}
.list-wrapper,
.skills-wrapper__top {
	display: flex;
	gap: calc(var(--space-s) * 2);
	flex-direction: column;
}
.list-wrapper__top {
	display: flex;
	gap: calc(var(--space-s) * 1);
	flex-direction: column;
}
.subtitle {
	font-size: clamp(1.125rem, 0.9135rem + 0.3846vw, 1.5625rem);
	font-weight: 500;
}
.list-wrapper__bottom,
.skills-wrapper__bottom {
	display: flex;
	gap: calc(var(--space-s) * 1);
	flex-direction: column;
}
.split-container {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-s) * 2.5);
}
.specs-wrapper {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-s) * 2);
}
.icon-box {
	display: inline-flex;
	flex-direction: column;
	align-self:flex-start;
}
.icon-box img {
	max-width: 2.4rem;
}
.icon-box ul {
	list-style-type: none;
	padding-inline-start: 0;
}
.icon-box .subtitle {
	border-bottom: 1px solid var(--ultra-light);
	margin-block-end: calc(var(--space-s) * 0.5) ;
}
.content {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-s) * 1);
}
.description {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space-s) * 1);
}
.icon-btn {
	display: flex;
	padding-block:3px;
	/*
	border: 1px solid var(--ultra-light);
	padding-block: 0.5em;
	padding-inline: 1em;
	border-radius: 0.5em 0 0.5em 0;*/
	/*box-shadow: -2px 2px 0 0 red;*/
}
.project-short__icon-wrapper {
	display: flex;
	align-items: flex-end;
}
.text-btn {
	display: flex;
	align-items: center;
	gap: calc(var(--space-s)*1);
}
.text-btn svg {
	padding-block-start: 3.5px;
}
.btn {
	padding-block: 0.5em;
	padding-inline: 1em;
	border-radius: 0 0 0 0;
	border: 1px solid var(--ultra-light);
}
.button-wrapper {
	text-align: center;
}
.social a {
	line-height: 0;
    display: flex;
}
.social svg {
	height: 3.5rem;
	width: auto;
}
.social {
	display: flex;
	gap: calc(var(--space-s)*3);
	justify-content: center;
}
.footer {
	gap: calc(var(--space-s)*2.5);
	padding-block-end: calc(var(--space-s)*4);
}
.clickable {
position: relative;
}
.clickable a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.project-short .icon-btn,
.media-wrapper-mockup svg,
.media-wrapper-mockup,
.btn, 
.media-wrapper-mockup svg {
	transition: all 0.3s ease-in-out;
}
.project-short:hover .icon-btn,
.media-wrapper-mockup:hover .svg,
.media-wrapper-mockup:hover svg {
	margin-inline-start: 2rem;
}
.media-wrapper-mockup:not(.footer):hover {
	transform: scale(1.05);
}
.project-short:hover,
.btn:hover {
	background-color: var(--ultra-light-trans-15);
	transform: scale(1.05);
}
@media (min-width: 768px) {
	.navtoggle ul li:last-child {
	display: none;
	}
	.navtoggle ul li:not(:last-child) {
	display: flex;
	}
	.logo img {
	min-width: 5rem;
	}	
	.split-container {
		flex-direction: row;
	}
	.split-container .content-wrapper,
	.split-container .media-wrapper {
		width:50%;
	}
	.profile-image img {
    	max-width: 19rem;
    }
    .content-wrapper {
    	justify-content: center;
    }
    #about .split-container {
    	flex-direction: column;
    }
    #about .split-container .content-wrapper {
    	width: 100%;
    }
    .skills-wrapper__top {
    	flex-direction: row;
    	gap: calc(var(--space-s)* 9);
    }
    .skills-wrapper__bottom img {
    	max-width: 23rem;
    }
    #my_journal .media-wrapper-mockup,
    #social_spotter .media-wrapper-mockup {
    	position: sticky;
    	top: 5em;
    	align-self: flex-start;	
    }
    .button-wrapper {
    	text-align: left;
    }
    footer {
    	padding-block-end: 3em;
    }
    nav ul {
    	gap: calc(var(--space-s)* 2.5);
    }
}
@media (min-width:1024px) {
	.logo img {
	min-width: 5rem;
	}
	.project-short {
		width: 40rem;
	}
	#projects .container-inner {
		align-items: flex-end;
	} 
	#projects .container-inner .project-short:first-child {
		margin-inline-start: -20%;
    	margin-inline-end: 20%;
	}
	#about .split-container {
    	flex-direction: row;
    }
    #about .split-container .content-wrapper {
    	width: 50%;
    }
    .skills-wrapper__top {
        flex-direction: row;
        gap: calc(var(--space-s)* 4);
    }
    .specs-wrapper {
    	flex-direction: row;
    }
    .icon-box {
    	width: 33.33%;
    }
    section {
    	padding-block: calc(var(--space-s)* 4);
    }
    footer {
    	padding-block-start: calc(var(--space-s)* 4);
    }
}
@media (min-width: 1400px) {
	.container {
		max-width: 1400px;
	} 
	nav ul {
    	gap: calc(var(--space-s)* 5);
    }
    .project-short {
	padding: 2.5em 1.5em;
	}
	#about .split-container {
	gap: calc(var(--space-s)* 7);
	}
	#about .split-container .content-wrapper {
    	width: 40%;
    }
    #about .split-container .media-wrapper {
    	width: 60%;
    }
    .design-process img {
    	max-width: 70%;
    }
    .design-process .media-wrapper {
    	display: flex;
    	justify-content: center;
    }
    #my_journal .content-wrapper {
    	max-width: 60%;
    }
    #my_journal .media-wrapper {
    	max-width: 40%;
    }
    #my_journal .split-container {
    	gap: calc(var(--space-s)* 7);
    }
    #social_spotter .content-wrapper {
    	max-width: 60%;
    }
    #social_spotter .media-wrapper {
    	max-width: 40%;
    }
    #social_spotter .split-container {
    	gap: calc(var(--space-s)* 7);
    }
    footer .content-wrapper {
    	max-width: 60%;
    }
   footer .media-wrapper {
    	max-width: 40%;
    }
    footer .split-container {
    	gap: calc(var(--space-s)* 7);
    }
}