html {
    font-size: 30px;
}
body {
    position: absolute;
    margin: 0;
    height: 100%;
    display: block;
    width: 100%;
	background-color: #aaaa39;
	color: #e7dfec;
	transition: background-color 1s, color 1s;
}
a {
	color: inherit;
}

.score {
    display: grid;
}

.number {
	font-family: sans-serif;
	font-weight: 900;
	font-size: 1.2em;
	word-break: break-all;
}
.len-10 .number {
	font-size: 0.8em;
}
.len-20 .number {
	font-size: 0.6em;
}
.len-30 .number {
	font-size: 0.4em;
}

#content {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

body.loading {
	background: #666;
	color: #eee;
}
body.loading #pager {
	display: none;
}

#start, #settings-start {
    background: #2e4372;
    color: #ffe3aa;
}
#no {
    background: #aa3939;
    color: #DBF0DB;
}

#yes {
    background: #aaaa39;
    color: #e7dfec;
}
#restart {
    background: #2e4372;
    color: #ffe3aa;
}

body.start {
    background: #aaaa39;
    color: #e7dfec;
}
body.play {
    background: #2e4372;
    color: #ffe3aa;
}
body.end {
    background: #aa3939;
    color: #DBF0DB;
}
body.end footer {
    font-size: 0.8em;
}

.screen {
    display: none;
}

body.start .screen.start,
body.play .screen.play,
body.settings .screen.settings,
body.end .screen.end
{
    display: block;
}

.screen.not-prime strong, .screen.not-prime small {
	color: hsl(120, 41%, 70%);
}
.screen.prime strong, .screen.not-prime small {
	color: hsl(277, 25%, 80%);
}
.screen.probably-prime strong, .screen.probably-prime small {
	color: hsl(40, 100%, 70%);
}

input {
	font-size: 1em;
	width: 2em;
	background: none;
	border: none;
	border-bottom: 2px solid;
}
button {
	font-size: 1em;
	padding: 0.5em 1em;
	border: none;
	background: none;
	font-family: inherit;
}

@media screen and (min-width: 425px) {
    .controls {
        display: flex;
    }
    .controls button {
        flex-grow: 1;
        margin: 0 1em;
    }
}


.top-control {
	position: absolute;
	top: 10px;
	line-height: 1em;
	font-family: sans-serif;
	text-decoration: none;
}
@media screenand (min-width: 768px) {
	.top-control {
		font-size: 0.8em;
	}
}

#about {
	right: 10px;
}
#settings {
	left: 10px;
}

.setting {
	margin: 0.5em auto;
}

.setting label {
	width: 48%;
	text-align: right;
	display: inline-block;
}
.setting .control {
	text-align: left;
	display: inline-block;
}
.setting input {
	text-align: right;
}
.setting button {
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 700px) and (orientation: landscape) {
	html {
		font-size: 25px;
	}
	.score {
		grid-template-columns: auto auto;
		grid-gap: 1em;
		justify-content: center;
		font-size: 0.8rem;
	}
	.screen.end p {
		font-size: 0.8rem;
		margin: 0.5em 0;
	}
	.screen.end h1 {
		margin: 0.5rem 0;
	}
}

@media screen and (min-width: 768px) {
	html {
		font-size: 60px;
	}
}

@media screen and (max-width: 700px) and (orientation: portrait) {
	.score {
		grid-template-columns: auto;
		font-size: 1rem;
	}
}

@media screen and (max-width: 400px){
	html {
		font-size: 20px;
	}
}

@media screen and (max-width: 650px) and (orientation: landscape) {
	html {
		font-size: 20px;
	}
}