scry.css

*{margin:0; padding: 0;}
body{
	font-family: Arial, 'Open Sans', sans-serif;
	background-color: #efefef;
}

h1,h2, p{
	color: #777;
	text-align: center;
}
h1{
    font-size: 200px;
    margin: 0.3em 0;
}
p, input{
	font-size: large;
}
p{
    margin: 1em 0;
}
p.credit{
	font-size: small;
}

#cardImage {
	float: right;
	max-width: 30%;
}
form{
	text-align: center;
}
input {
    margin: 0 0 0 5px;
    padding: 5px;
}
input#name{
	width: 40%;
}

form, article{
	width: 100%;
}
.shrink{
	width: 70%;
}
.shrink h1{
	font-size: 100px;
	margin: 0.2em 0;
}

dl, ul{
	width: 90%;
	margin: 1em auto;
}
dt {
    font-weight: bold;
    margin-top: 0.5em;
	color: #222;
}
dd {
    text-align: justify;
	margin-top: 0.1em;
	padding: 15px 10px;
	background-color: #777;
	color: #fff;
}

ul{ list-style-type: none; }
li{
	display: inline-block;
    background-color: #8df;
    border: 1px solid #6ce;
    margin: 3px;
    padding: 4px;
	cursor: pointer;
}

/* On smallish widths */
@media (max-width: 767px){
	.shrink{
		width: 99%;
	}
	#cardImage{
		max-width:40%;
		float: none;
		display: block;
		margin: 1em auto;
	}
	h1{
		font-size: 100px;
		margin: 0.2em 0;
	}
	input#name{
		width: 60%;
	}
}