/* /home.css */

*:focus {outline: none;} /* prevents outline on clicked items */
* { /* reset */
	padding:0;
	margin:0;
	box-sizing:border-box;
}
body { /* prevents text selection */
user-select: none; /* Standard syntax */
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
}
body {
	background: #12f;
	background-image: radial-gradient(#8ff, #00e);
	font-size:2.5vw;
}
a {
	text-decoration:none;
	color:black;
}
a:hover {
	color:ivory;
}
#main {
	margin: 0 auto;
}
#md img{
	display:block;
	width:200px;
	margin: 10px auto -10px auto;
}
.button {
	display:block;
	width:40vw;
	font-family:sans-serif;
	font-size: 1.6em;
	text-align:center;
	margin:20px auto;
	border-radius: 20px;
	box-shadow: 5px 5px 2px #333;
}
.button div {
	padding: 5px 0;
	background:#fb0;
	background-image: radial-gradient(#ff0, #d60);
	border-radius: 20px;	
}
.button div a {
	display:block;
	width:100%;
}
.button div:hover {
	background:magenta;
	background-image: radial-gradient(#faf, #c0c);
}
@media screen and (orientation:landscape) {
	#main {
		padding-bottom:480px;
		margin-top:20px;
	}
	#md {
		margin-top: 40px;
	}
	.button {
		width: 140px;
		font-size: .8em;
	}
	@supports (display: grid) {
		#main {
			width:98vmin;
			height:94vmin;
			display:grid;
			align-items: center;
			justify-content: center;
			padding:0;
			margin:0 auto;
		}
		#md {grid-column: 15  / span 14; grid-row: 6 / span 5;}
		#md img {width:30vmin;}
		#email {grid-column: 18  / span 6; grid-row: 2 / span 2;}
		#puzzles {grid-column: 18  / span 6; grid-row: 14 / span 2;}
		#games {grid-column: 12  / span 6; grid-row: 3 / span 2;}
		#latest {grid-column: 25  / span 6; grid-row: 3 / span 2;}
		#special {grid-column: 11  / span 6; grid-row: 13 / span 2;}
		#activities {grid-column: 25  / span 6; grid-row: 13 / span 2;}
		#history {grid-column: 6  / span 6; grid-row: 6 / span 2; align-self:flex-start;}
		#search {grid-column: 31  / span 6; grid-row: 6 / span 2; align-self:flex-start;}
		#downloads {grid-column: 6  / span 6; grid-row: 10 / span 2; align-self:flex-end;}
		#tutorials {grid-column: 31  / span 6; grid-row: 10 / span 2; align-self:flex-end;}
		#apps {grid-column: 4  / span 6; grid-row: 8 / span 2;}
		#magic {grid-column: 33  / span 6; grid-row: 8 / span 2;}
	}
	.button {
		width:22vmin;
		font-size:3vmin;
		border-radius: 40%;
	}
	.button div {
		border-radius: 40%;
	}
	.button div a {
		padding:1vmin 0;
	}
}