html {
    font-size: 40px;
}
body.about {
	font-size: 20px;
	padding: 1em;
}
@media screen and (min-width: 768px) {
	html {
		font-size: 100px;
	}
}

body {
    position: absolute;
    margin: 0;
    height: 100%;
    display: block;
    width: 100%;
	transition: background-color 1s, color 1s;
}

a {
	color: inherit;
}

.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;
}

body.not-prime {
    background: #aa3939;
    color: #DBF0DB;
}

body.prime {
    background: #aaaa39;
    color: #e7dfec;
}

body.probably-prime,
body.about {
    background: #2e4372;
    color: #ffe3aa;
}

#result .message {
    display: none;
}

body.loading #result .message.loading,
body.not-number #result .message.not-number,
body.not-prime #result .message.not-prime,
body.prime #result .message.prime,
body.probably-prime #result .message.probably-prime
{
    display: initial;
}

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

.ellipsis {
	display: inline-block;
	text-overflow: clip;
	overflow-x: hidden;
	vertical-align: bottom;
	animation: ellipsis 3s infinite;
}
@keyframes ellipsis {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	51% {
		opacity: 1;
		max-width: 0;
	}
	100% {
		opacity: 1;
		max-width: 0.75em;
	}
}

small {
	font-size: 30%;
	font-style: italic;
}

#result {
	padding: 1em;
}

#pager {
    font-size: 50%;
    position: absolute;
    bottom: 1em;
    width: 100%;
}
#pager button {
    background: none;
    border: none;
    font-size: 1em;
    color: inherit;
	font-family: inherit;
}
body.not-number #pager button {
	display: none;
}
#prev {
    float: left;
    margin-left: 1em;
}
#next {
    float: right;
    margin-right: 1em;
}

#about {
	position: absolute;
	right: 10px;
	top: 10px;
	line-height: 1em;
	font-family: sans-serif;
}
@media screen and (min-width: 768px) {
	#about {
		font-size: 0.8em;
	}
}

#about a {
	text-decoration: none;
}