/* CSS HSL */
/*--vanilla: hsla(48, 93%, 84%, 1);
--copper: hsla(28, 43%, 51%, 1);
--pakistan-green: hsla(121, 64%, 17%, 1);
--wine: hsla(350, 30%, 34%, 1);
*/
@import url(https://fonts.bunny.net/css?family=raleway:400,700);

@import url(https://fonts.bunny.net/css?family=alkatra:400,700|amarante:400|arima:400,700|farsan:400|gluten:400,700|happy-monkey:400|life-savers:400,700|overlock-sc:400|paprika:400|salsa:400|simonetta:400,700|unkempt:400,700|viaoda-libre:400);

@import url(https://fonts.bunny.net/css?family=alegreya:400,700|bona-nova:400,700|eb-garamond:400,700|gentium-book-basic:400,700|merriweather:400,700|rosarivo:400);

/* h1 {
	font-family: 'Simonetta', display;
	font-family: 'Rosarivo', serif;
	font-family: 'Alegreya', serif;
	font-family: 'EB Garamond', serif;
	font-family: 'Gentium Book Basic', serif; 
	

}*/

:root {
	--vanilla: #fcedae;
	--vanilla-transparent: #fcedae80;
	--copper: #b87d4b;
	--green: #007300;
	--wine: #723d46;
	--wine-transparent: #723d4680;
	--cinnamonish: #b84e2b;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	font-family: 'Raleway', sans-serif;
	box-sizing: border-box;
	background-color: var(--vanilla);
	background-image: url("https://www.transparenttextures.com/patterns/wood-pattern.png");

	/* 
	background-image: url("https://www.transparenttextures.com/patterns/transparent-square-tiles.png");
	/*veeery subtle
	background-image: url("https://www.transparenttextures.com/patterns/redox-02.png"); */
}

.content {
	max-width: 960px;
	margin: auto;
	padding: 2rem;
	/* background-color: var(--vanilla-transparent); */
}

header {
	position: sticky;
	top: 0;
	background-color: var(--vanilla);
	background-image: url("https://www.transparenttextures.com/patterns/wood-pattern.png");
	z-index: 999;
}

header h1 {
	color: var(--green);
	text-align: center;
	font-family: 'Life Savers', sans-serif;
	font-size: 5rem;
	padding: 1rem 0;
	transition: font-size 0.3s;
}
 
body.scrolled header h1 {
	font-size: 3rem;
}

h2 {
	background: linear-gradient(to right, var(--wine), var(--cinnamonish));
	/* box-shadow: -3px 3px 3px 0px #00000060; */
	color: lightgrey;
	/* margin: 2rem 0; */
	padding: 0.2rem 0.5rem;
	border-radius: 5px;
	position: sticky;
	top: 0;
	z-index: 998;
}

h3 {
	margin-top: 0.2rem;
	font-size: 1rem;
	color: var(--wine);
}

section {
	margin-top: 1rem;
	text-align: justify;
}

ul {
	list-style-position: inside;
	list-style-type: '- ';
}

a {
	color: var(--green);
}

img {
	border-radius: 5px;
}

#laptop-pic {
	flex-basis: 250px;
	max-width: 90%;
	margin: auto;
	box-shadow: -3px 3px 5px 0px var(--wine);
	aspect-ratio: 3/2;
	object-fit: cover;
}

.about-container {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	text-align: center;
	margin: 2rem;
}

.about-container div {
	flex-basis: 250px;
	flex-grow: 1;
	text-align: justify;
	position: relative;
	padding: 1rem 0.5rem;
}

.about-container i {
	font-size: 1.5rem;
	vertical-align: middle;
}

.github {
	text-decoration: none;
}

.project-container {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	text-align: center;
	margin: 2rem;
}

.project-container a {
	position: relative;
	flex-basis: 250px;
	margin: auto;
}

.project-container div {
	flex-basis: 250px;
	flex-grow: 1;
	text-align: justify;
}

.project-img {	
	box-shadow: -3px 3px 5px 0px var(--wine);
	aspect-ratio: 3/2;
	object-fit: cover;
	max-width: 100%;
	width: 100%;	
	transition: transform 0.3s, box-shadow 0.3s;
}

.project-img:hover {
	transform: scale(105%);
	box-shadow: -6px 6px 10px 0px var(--wine-transparent);
}

.rabbit {
	position: absolute;
	display: block;
}

.external-link {
	position: absolute;
	display: inline;
	bottom: 7px;
	left: 3px;
}

.project-container p {
	margin-top: 0.2rem;
}

.skills-container {
	max-width: 800px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.experience-card {
	background-color: #ffffff30;
	height: 6rem;
	width: 8rem;
	margin: 1rem;
	padding: 1rem;
	border-radius: 5px;
	box-shadow: -3px 3px 5px 0px var(--wine);
	text-align: center;
}

i {
	font-size: 3rem;
	color: var(--green);
}

@media (max-width: 480px) {
	header h1 {
		font-size: 3rem;
	}

	header {
		padding: 0;
	}

	.content {
		padding: 1rem;
	}

	.about-container {
		margin: 0;
	}
}

@media (hover: hover) {
	.external-link {
		display: none;
	}
}