@charset "UTF-8";
/* CSS Document */

/* BASE STYLES */
:root {
    --clr-background: #FFF;
    --clr-text: #000;



    --clr-text-dark-hover: #353535;
    --clr-text-light-hover: #858585;
    

    --clr-menu-hover: #376590;
    --clr-menu-active: #1394DE;
}



@font-face {
	font-family: "Neue Regrade Regular";
	src: url("https://www.riccardofava.it/fonts/Neue-Regrade-Regular.otf");
	font-style: normal;
}

@font-face {
	font-family: "Neue Regrade Medium";
	src: url("https://www.riccardofava.it/fonts/Neue-Regrade-Medium.otf");
	font-style: normal;
}

@font-face {
	font-family: "Neue Regrade Bold";
	src: url("https://www.riccardofava.it/fonts/Neue-Regrade-Bold.otf");
	font-style: normal;
}

@font-face {
	font-family: "Neue Regrade Extrabold";
	src: url("https://www.riccardofava.it/fonts/Neue-Regrade-Extrabold.otf");
	font-style: normal;
}



header {
    text-align: center;
    margin: 0 0 15px 0;
}

body {
	font-family: "Neue Regrade Regular";
    color: var(--clr-text);
    background-color: var(--clr-background);
    letter-spacing: 1px;
    margin: 0;
    padding: 30px;
}



.title {
    padding: 0;
    margin: 0;
}



.name {
	font-family: "Neue Regrade Extrabold";
    color: var(--clr-text);
    text-transform: uppercase;
    font-size: 58px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    text-decoration-color: var(--clr-background);
	text-decoration: none;

}

.name:hover {
    color: var(--clr-text-dark-hover);
    transition-duration: 0.2s;
    transition-timing-function: ease-in-ot;
}




.subtitle {
	font-family: "Neue Regrade Medium";
	color: var(--clr-text);
    text-transform: uppercase;
    font-size: 17px;
    padding: 0;
    margin: 0 0 5px 0;
}



.grid-video {
    width: 33.333%;
}

.grid-photo {
    width: 33.333%;
}

.grid-cover {
	width: 25%;
}

.grid-video,
.grid-photo {
    position: relative;
    margin-bottom: 0;
    border: 0;
}

.grid-img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    
    transition-property: all;
    transition-duration: 0.35s;
    transition-timing-function: ease-in-out;
}

.grid-img:hover {
    opacity: 50%;
}

/* END OF BASE STYLES */
.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}



.copyright {
	margin: 25px 0 0 0;
	padding: 0;
	text-align: center;
	font-size: 13px;
	text-decoration-color: var(--clr-background);
}






/* Per schermi di 1000px o più piccoli */

@media screen and (max-width: 1000px) {
	.grid-video {
        width: 100%;
	}
	
	.grid-photo {
        width: 100%;
	}
	
	.grid-cover {
		width: 100%;
	}
	
    .grid-video,
    .grid-photo,
	.grid-cover {
		padding: 0;
		margin: 0 0 20px 0;
		background-color: var(--clr-background);
	}

/*
    .grid-photo {
        width: 50%;
	}

    .grid-photo {
        margin: 0;
	}
*/

    .grid-img:hover {
        opacity: 100%;
    }

    

    .name {
        font-size: 100px;
    }
	
    .subtitle {
        font-size: 45px;
        margin: 40px 0 50px;
    }
    
    
    
	body {
        padding: 20px;
        padding-top: 80px;
    }
    
    

	.copyright {
		margin: 20px, 0;
		text-align: center;
		font-size: 22px;
        color: var(--clr-text);
        text-decoration: none;
        text-decoration-color: var(--clr-background);
	}

}