/*PAGE ART*/

/*font body*/
@font-face {
	font-family: "comfortaa";
	src: url("../font/comfortaa-regular.ttf");
	}
	
body {
	font-family: "comfortaa";
	margin: 0;
	}
	
	
/*background header*/
.header{
	background-image:url("images/background.jpg");
	background-size:100% 250%;
	width:100%;
	height: 100vh;
	padding:4vw 0 8vw 0;
	height:2vh;
	margin:0 0 5vw 0;
	text-align: center;
	}
	
	
/*txt header*/
a {
	margin:0;
	padding:0;
	height:inherit;
	width:inherit;
	color:white;
	text-decoration: none;
	}
	
.txt {
	text-align: start center;
	transform: rotate(-90deg);
	margin: 0 0 -4% 0;
	padding: 0 0 0 4%;
	}
		
.art {
	font-size: 35px;
	margin: 0 0 0 2%;
	transform: rotate(-90deg);
	}

.inspi {
		font-size: 25px;
		margin: 0 0 0 2%;
		transform: rotate(-92deg);
		}
	
.aboutme {
	font-size: 11px;
	margin: 0 0 0 2%;
	transform: rotate(-90deg);
	}


/* Main CSS */
.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
	}
	
.grid-wrapper > div > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
	}

.grid-wrapper {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
	margin:0 5vw 0 5vw;
	}
	
.grid-wrapper .wide {
	grid-column: span 2;
	overflow:hidden;
	border-radius: 5px;
	}
	
.grid-wrapper .tall {
	grid-row: span 1;
	overflow:hidden;
	border-radius: 5px;
	transitition-duration:1s;
	}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
	overflow:hidden;
	border-radius: 5px;
	}
	
.grid-wrapper .demi {
	grid-column: span 1;
	grid-row: span 2;
	overflow:hidden;
	border-radius: 5px;
	}

.tall:hover, .big:hover, .wide:hover, .demi:hover{
	border-radius: 25px;
	transitition-duration:1s;
box-shadow: 0px 0px 11px -6px rgba(0,0,0,0.39);
-webkit-box-shadow: 0px 0px 11px -6px rgba(0,0,0,0.39);
-moz-box-shadow: 0px 0px 11px -6px rgba(0,0,0,0.39);}
/*background footer*/
.footer{
	background-image:url("images/background.jpg");
	background-size:100% 250%;
	width:100%;
	height: 100vh;
	padding:4vw 0 8vw 0;
	height:2vh;
	margin:5vw 0 0 0;
	text-align: left;
	}
	
/*logo footer*/
.logo {
	margin: -2% 0 0 5%;
	}
	
/*txt footer*/
.txtfooterg {
	margin: -6% 0 0 18%;
	}
	
.txtfooterd {
	text-align: right;
	margin: -3% 5% 0 0;
	}