/*
Theme Name: filippovanucci.com
Author: Filippo Vanucci
Author URI: https://www.filippovanucci.com
*/

@keyframes animation {
	0% {
		opacity: 0;
	    transform: translate(0px, 40px);
	}
	75% {
	    transform: translate(0px, 0px);
	}
	100% {
		opacity: 1;
	}
}

@font-face {
	font-family: 'untitled-medium';
	font-weight: 400;
	src: url('./UntitledSans/untitled-sans-medium.woff2') format('woff2');
}

@font-face {
	font-family: 'untitled-regular';
	font-weight: 300;
	src: url('./UntitledSans/untitled-sans-regular.woff2') format('woff2');
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "untitled-regular", sans-serif;
	color: #fcfcf5;
	background: #111;
/*	background: #E84D3C;
	color: white;*/
	padding: 0;
	margin: 0;
	font-size: 16px;
}

p {
	margin-top: 0;
}

h1, h3, #header, #footer {
	font-family: "untitled-regular", sans-serif;
	font-size: 18px;
}

h2 {
	font-family: "untitled-regular", sans-serif;
	font-size: 18px;
	line-height: 1.3;
}

h2, h3 {
	margin: 0;
	padding: 0;
}

h3#workTitle {
	margin-top: 90px;
	display: block;
}

.sectionHeader {
	position: -webkit-sticky; /* Required for Safari */
	position: sticky;
	top: 80px;
	background: #111;
	z-index: 998;
	border-bottom: 1px solid #fcfcf5;
}

.grid {
	display: grid;
	row-gap: 2px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	background: #111;
	padding: 0;
	margin: 0 8px;
}

.grid-item img, .grid-item video {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
 	filter: grayscale(100%);
}

.grid-item {
	padding: 20px 20px;
	color: #fcfcf5;
	background: #111;
/*	background: #E84D3C;*/
}

.grid-item *, #header *, #footer * {
	animation: 0.8s animation;
}

#header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
/*	background: #006bff;*/
	color: #fcfcf5;
	background: #111;
	border-bottom: 1px solid #fcfcf5;
	height: 160px;
	padding: 10px 20px;

    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#header.minimize {
	height: 60px;
}

h3#workTitle.minimize {
	display: none;
}

#footer {
	border-top: 1px solid #fcfcf5;
	padding: 120px 20px 120px;
}

#footer h3 {
	margin-bottom: 30px;
}

#footer a, #footer a:hover {
	color: #AAA;
}

.grid-item.cover {
	grid-column-start: 3;
	grid-column-end: 5;
}

.grid-item.sectionTitle {
	grid-column-start: 2;
	grid-column-end: 5;
	position: sticky;
}

.secondary {
	color: #AAA;
}

@media only screen and (max-width: 560px) {
	.grid {
		grid-template-columns: 1fr 1fr;
	}

	.grid-item.cover {
		grid-column-start: 1;
		grid-column-end: 3;
	}

	.sectionHeader {
		height: 110px;
	}
}