* {
  box-sizing: border-box;
}

/* PCs */
@media screen and (min-width:1160px)
{
	body {
		margin-left: 20%;
		margin-right: 20%;
	}	
	
	header, div {
		border-width: 8px;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.logo, .pixel {
		width: 25%;	
    	min-height: 100%;		
	}	
	
	.pixel {
		margin-left: 10px;
		margin-right: 10px;
	}	
	
	p,ul,li,ol {
		font-size:20px;
		margin-left:15px;
		margin-right:15px;	
	}	

	h1 {
		font-size: 40px;
		margin-left:15px;
		margin-right:15px;
	}
		
	h2 {
		font-size: 30px;
		margin-left:15px;
		margin-right:15px;
	}		
	
	button {
		margin: 15px 15px;
		padding: 15px 15px;
		border-width: 8px;
		font-size: 45px
	}		
	
	.gametitle {
		font-size: 100px;
	}	
}

/* Tablets */
@media screen and (min-width:768px) and (max-width:1160px)
{
	
	header, div {
		border-width: 6px;
		margin-top: 15px;
		margin-bottom: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}	
	
	.logo, .pixel {
		width: 50%;
		margin-left: auto;
		margin-right: auto;		
	}	

	p,ul,li,ol {
		font-size:20px;
		margin-left:10px;
		margin-right:12px;	
	}	
	
	h1 {
		font-size: 40px;
		margin-left:10px;
		margin-right:10px;
	}
		
	h2 {
		font-size: 30px;
		margin-left:10px;
		margin-right:10px;
	}		

	button {
		margin: 12px 12px;
		padding: 12px 12px;
		float: center;
		border-width: 8px;
		font-size: 45px
	}		

	.gametitle {
		font-size: 75px;
	}	
	
}

/* Mobile devices */
@media screen and (max-width:767px)
{
	
	body {
		margin-left: 0%;
		margin-right: 0%;
	}		
	
	header, div {
		border-width: 4px;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}	
	
	.logo, .pixel {
		width: 75%;	
		margin-left: auto;
		margin-right: auto;				
	}		
	
	p,ul,li,ol {
		font-size:15px;
		margin-left:7px;
		margin-right:7px;	
	}		
	
	h1 {
		font-size: 30px;
		margin-left:7px;
		margin-right:7px;
	}
		
	h2 {
		font-size: 22px;
		margin-left:7px;
		margin-right:7px;
	}			
	
	button {
		margin: 10px 10px;
		padding: 10px 10px;
		float: center;		
		border-width: 6px;
		font-size: 30px
	}	
	
	.gametitle {
		font-size: 50px;
	}	
}

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.russo-one-regular {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
	background-color: black;
}	

p,ul,li,ol {
	font-family: "Roboto", sans-serif;
	color: white;
}

header,div {
	border-color: white;
	border-style: solid;
}	

h1 {
	font-family: "Russo One", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: white;
}
	
h2 {
	font-family: "Russo One", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: white;
}	

img {
	height: auto;
}	

.logo, .pixel {
	image-rendering: pixelated;	
	display: block;	
}	

.logo {
	margin-left: auto;
	margin-right: auto;
}
	

a {
	text-decoration:none;
}	

a:link,a:visited {
	color: yellow;
}	

a:active {
	color: white;
}		

.linkbox {
	color: yellow;
	border-color: yellow;
}

button {
	background-color: black;
	border-color: white;
	border-style: solid;
	color: white;
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-style: normal;
}	

button:hover {
	border-color: yellow;
	color: yellow;
	cursor: pointer;
}	