@import "resets.css";

@import url("https://use.typekit.net/hoa7xrr.css");

:root {
	font-size: 24px;
	font-family: "prestige-elite-std", monospace;
	font-weight: 400;
	font-style: normal;


	--accent-color: #bf4943;
	--white: #f7d4d4;
	--black: #1a1e40;

	--background-color: var(--black);
	--font-color: var(--white);
	--shadow-color: #f7d4d444;

	--extra-large: 240px;
	--large: 120px;
	--medium: 60px;
	--small: 20px;
	--extra-small: 10px;
}


body {
	cursor: url("../assets/cursor.png"), auto;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100vw;
	overflow-x: clip;
	background: var(--background-color);
	color: var(--font-color);
}

p,
span,
a {
	color: var(--font-color);
}

a {
	cursor: url("../assets/pointer.png"), auto;
}



/* 	===============================================
	Header
	=============================================*/

header {
	position: relative;
	height: 100vh;
	background: url("../assets/background-header.png");
	background-size: 900px;
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
}

.header-text {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: end;
	gap: var(--medium);
	padding: var(--extra-large) var(--large);
}

.header-text a {
	font-size: 28px;
	font-weight: 700;
	text-decoration: none;
	width: fit-content;
}

.header-text a img{
	transform: translateY(5px);
	width: 32px;
}

header a:hover img {
	animation: jiggle-down 1.5s linear infinite;
}

@keyframes jiggle-down {
	0% {
		transform: translateY(5px);
	}
	15% {
		transform: translateY(15px);
	}
	30% {
		transform: translateY(10px);
	}
	45% {
		transform: translateY(15px);
	}
	60% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(5px);
	}
}

header h1 {
	color: var(--accent-color);
	font-family: "argent-pixel-cf", "Cambria", Times, serif;
	font-size: 90px;
	text-shadow: 3px 3px 3px var(--background-color);
	font-smooth: never;
}

.portrait {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 80%;
	background: url(../assets/portrait-bitmap.png);
	background-size: cover;
	background-position: center;
	background-position-x: 10vh;
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	z-index: -10;
}

/* 	
	Nav
	=============================================*/



nav {
	position: fixed;
	right: 0;
	top: 0;
	height: 100%;
	padding: var(--small) var(--extra-small) var(--small) 40px;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	background: linear-gradient(-90deg, var(--background-color) 25%, transparent);
}


nav ul {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

nav ul li {
	list-style: none;
}

nav ul li a,
nav ul li span {
	color: var(--font-color);
	text-decoration: none;
	font-weight: 700;
}

.core-nav {
	display: none;
}

/* 	===============================================
	Main
	=============================================*/

main {
	border-top: 10px dashed var(--accent-color);
	padding: var(--large);
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: auto 1fr;
	gap: var(--medium) var(--large);
	min-height: 80vh;
}

main section {
	grid-column: 1/2;
}

main aside {
	grid-column: 2/3;
	grid-row: 1/3;
	text-align: center;
}


section article {
	border-left: 4px solid var(--font-color);
	padding: var(--extra-small) var(--small);
	margin: var(--small) 0;
}


section article h3 a {
	font-family: "argent-pixel-cf", "Cambria", Times, serif;
	font-size: 36px;
	color: var(--accent-color);
	text-decoration: none;
}

section article h3 a img {
	transform: translateY(5px);
	transition: transform 0.25s;
}

section article h3 a:hover img {
	transform: translateY(5px) translateX(5px);
	transition: transform 0.25s;
}

section article p {
	font-size: 20px;
}

section article p a {
	text-decoration: none;
	font-weight: 700;
	border-bottom: 2px dotted var(--font-color);
}

.badges {
	display: flex;
	gap: var(--small);
	margin-top: var(--extra-small);
}

.badge {
	clip-path: polygon(0px calc(100% - 8px),
		4px calc(100% - 8px),
		4px calc(100% - 4px),
		8px calc(100% - 4px),
		8px 100%,
		calc(100% - 8px) 100%,
		calc(100% - 8px) calc(100% - 4px),
		calc(100% - 4px) calc(100% - 4px),
		calc(100% - 4px) calc(100% - 8px),
		100% calc(100% - 8px),
		100% 8px,
		calc(100% - 4px) 8px,
		calc(100% - 4px) 4px,
		calc(100% - 8px) 4px,
		calc(100% - 8px) 0px,
		8px 0px,
		8px 4px,
		4px 4px,
		4px 8px,
		0px 8px
	);
	position: relative;
	background: var(--shadow-color);
	font-weight: 700;
	width: fit-content;
	padding: 3px 9px;
	font-size: 16px;
}

aside p {
	font-size: 200px;
	font-weight: 700;
	font-family: "argent-pixel-cf", "Cambria", Times, serif;
}


/* 	===============================================
	Footer
	=============================================*/

footer {
	margin-top: auto;
	padding: var(--extra-small) var(--small);
}


/* 	===============================================
	Media Querries
	=============================================*/

@media screen and (min-width: 2400px) {
	.portrait {
		width: 50%;
		right: 5%;
	}
}

@media screen and (max-width: 1240px) {
	:root {
		--extra-large: 180px;
		--large: 60px;
		--medium: 30px;
	}
	.portrait {
		width: 90%;
	}
	main {	
		gap: var(--large) var(--large);
	}
	aside p {
  		font-size: 180px;
	}
}

@media screen and (max-width: 960px) {
	.portrait {
		width: 100%;
	}
	header h1 {
		font-size: 60px;
	}
	.header-text a {
		font-size: 24px;
	}
	.header-text a img{
		width: 28px;
	}
	main aside {
		grid-row: 1/2;
	}
	aside p {
  		font-size: 150px;
	}
	section.projects {
		grid-column: 1/3;
	}
}

@media screen and (max-width: 760px) {
	.portrait {
		height: 70%;
	}
	main aside {
		grid-row: 1/2;
		grid-column: 1/3;
	}
	aside p {
		font-size: 180px;
	}
	section.introduction {
		grid-row: 2/3;
		grid-column: 1/3;
	}
	section.projects {
		grid-row: 3/4;
		grid-column: 1/3;
	}
}

@media screen and (max-width: 650px) {
	main aside {
		grid-row: 1/2;
		grid-column: 1/3;
	}
	section.introduction {
		grid-row: 2/3;
		grid-column: 1/3;
	}
	section.projects {
		grid-row: 3/4;
		grid-column: 1/3;
	}
}

@media screen and (max-width: 560px) {
	.header-text {
		flex-direction: column-reverse;
		justify-content: start;
		padding: var(--large);
	}
	.portrait {
		height: 110vw;
		background-position: cover;
		background-position-x: 50%;
	}
	main aside {
		grid-row: 1/2;
		grid-column: 1/3;
	}
	section.introduction {
		grid-row: 2/3;
		grid-column: 1/3;
	}
	section.projects {
		grid-row: 3/4;
		grid-column: 1/3;
	}
}

@media screen and (max-height: 920px) {
	main {
		padding-right: calc(var(--large) + 20px);
	}
}

@media screen and (max-height: 500px) {
	.core-nav {
		display: block;
	}
	.extended-nav {
		display: none;
	}
}

@media screen and (max-width: 760px) and (max-height: 920px) {
	.portrait {
		height: 100%;
	}
}  

@media screen and (max-width: 420px), screen and (max-height: 650px) {
	.header-text {
		padding: var(--medium);
	}
	header nav li span:not(.extended-nav, .core-nav) {
		display: none;
	}
	main {
		padding: var(--medium);
	}
	aside p {
		font-size: 140px;
	}
}  

@media screen and (max-width: 420px) and (max-height: 920px) {
	.portrait {
		height: 110vw;
	}
}