/* Global CSS */
body {
	image-rendering: pixelated;
}
h1 {
	text-align: center;
	font-family: "GRAFFITI";
}
#logo {
	image-rendering: pixelated;
}
a {
	text-decoration: none;
}
a:visited {
	color: black;
}
@media (orientation:landscape)
{
	#home-logo {
		width: 40vw;
	}
	main {
		width: 60vw;
		margin: auto;
	}
}

@media (orientation:portrait)
{
	#home-logo {
		width: 75vw;
	}
}
/* Homepage CSS */
body.homepage {
	background-image: url("i/bricks.png");
	background-size: 256px;
}
#home-logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	animation-duration: 6s;
	animation-name: fadein;
}

main.homepage{
	display: grid;
	grid-template-columns: 50% auto;
	margin: auto;
}
.boxes {
	margin: 1em;
	border: solid;
	border-radius: 5em;
	background-repeat: repeat-x;
	background-size: contain;
}
#box-1 {
	background-image: url("i/red.png");

}
#box-2 {
	background-image: url("i/blue.png");
}
#box-3 {
	background: green;
}
#box-4 {
	background: purple;
}
/* Blog CSS */
header.blog {
	background: gray;
}
main.blog{
	
}
/* Links CSS */
body.links {
	background-image: url("i/osx_cat.png");
	background-size: 128px;
}
main.links {
	background: blue;
	 

}

/* Animations */
@keyframes fadein {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

/* Font */
@font-face {
	font-family: "GRAFFITI";
	src:
		url("f/GRAFFITI.woff2") format("woff2");
}