/* FIXME
grid elements
svg
*/

@font-face {
	font-family: 'FuturaLT';
	src: url('fonts/FuturaLT-Book.woff');
	src: url('fonts/FuturaLT-Medium.woff');
	src: url('fonts/FuturaLT-Bold.woff');
}

@keyframes fadeInSlide {
	/*from {opacity: 0;
		}*/
	to {opacity: 1;
		transform: translateX(0px);
		}
}


@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}

/* shout out https://easings.net/ */

html * {
	box-sizing: border-box;
}

:root {
	--primary-color: #fc2105; /* Super Red */
	--secondary-color: #fca4dc; /* Pink */
	--color4: #69385c; /* like a muted dark purple; plum */
	--color5: #bc62a4; /* more saturated color4 */
	--background-color: rgba(35, 33, 11 0.9); /* almost Black */
	--link-color: #f7a138; /* light orange */
	--link-color-clicked: #c4730f; /* darker orange */
}

p {
	color: var(--color4);
	-webkit-text-stroke-width: 0px;
}

body {
	-webkit-text-stroke-width: 1.2px;
	-webkit-text-stroke-color: var(--color4);
	font-family: "FuturaLT", "Avenir Next", system-ui, sans-serif;
	font-size: 100%;
	line-height: 135%;
	/* background-color: var(--primary-color); */
	color: var(--secondary-color);
	background-image: url('images10/macro-leaves-gabed.jpg');
	background-size: cover;
}

header>* {
	-webkit-text-stroke-width: 1.5px;
	-webkit-text-stroke-color: var(--color4);
	min-height: 30vh;
	background-color: #88888833;
	display: flex;
	justify-content: center;
	align-items: center;
}

h1 {
	line-height: 1.2em;
}

h1>em {
	opacity: 0;
	transform: translateX(-20px);
	animation: fadeInSlide 1s ease forwards;
}

h2 {
	opacity: 0;
	animation: fadeIn 1s ease 0.5s forwards;
	padding-top: 1em;
}

h3 {
	opacity: 0;
	animation: fadeIn 1s ease 0.5s forwards;
	-webkit-text-stroke-width: 0.5px;
	padding-left: 3em;
}

.invisible>p {
	opacity: 0;
}
/* wow look im a genius i put the opacity here so i dont have to
repeat it 5 times */

.slide1 {
	transform: translateX(-40px);
	animation: fadeInSlide 1s ease-out 1.5s forwards;
}

.slide2 {
	transform: translateX(40px);
	animation: fadeInSlide 1s ease-out 2s forwards;
}

.slide3 {
	transform: translateX(-40px);
	animation: fadeInSlide 1s ease-out 2.5s forwards;
}

.slide4 {
	transform: translateX(40px);
	animation: fadeInSlide 1s ease-out 3s forwards;
}

.slide5 {
	transform: translateX(-40px);
	animation: fadeInSlide 1s ease-out 3.5s forwards;
}

/*.card p{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas:
	"hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
	"mne mne mne mne mne mne mne mne mne mne mne mne"
	"ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";
	gap: 4px;
}*/

.gridParent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	padding 16px;
}

.image {
}

.card {
	background-color: #88888833;
	padding: 1.5em;
}

.pinkmoji {
	transform: scale(0.05, 0.05);
	transition: transform 0.1s linear;
}

.pinkmoji:hover {
	transform: scale(1, 1);
}

footer {
	-webkit-text-stroke-width: 0.5px;
	font-family: "Futura LT", system-ui, sans-serif;
	padding-top: 2em;
	padding-left: 2em;
	padding-bottom: 3em;
	text-align: left;
}

a {
	display: inline-block;
	/* It needs this ^ otherwise it wont do anything. Why? I don't know */
	transition: transform 0.2s ease-in;
}

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

a:visited {
	color: var(--link-color-clicked);
}

a:hover {
	transform: translate(10px, 0px);
}

a:active {
	color: var(--color5);
}

ul {
	text-align: left;
	padding-left: 2em;
	opacity: 0;
	animation: fadeInSlide 0.5s ease-in 0.5s forwards;
}

li {
	color: var(--link-color);
	padding-left: 0em;
	transform: translateX(20px);
	animation: fadeInSlide 0.5s ease-in 0.5s forwards;
	}

.cNav {
}

.pNav>li {
	font-style: italic;
	list-style-type: circle;
}

.rNav>li {
	font-style: italic;
	list-style-type: square;
}

@media (prefers-color-scheme: dark) {

	header>* {
	-webkit-text-stroke-color: var(--color5);
	}

	p {
	color: var(--secondary-color);
	}

	body {
	-webkit-text-stroke-color: var(--color5);
	color: var(--color4);
	background-image: url('images10/macro-leaves-dark.jpg');
	}

}