* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	min-width: 100vw;
	min-height: 100vh;
}

body {
	padding: 1rem 0;
	font-size: 1.2rem;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

header {
	padding: 1rem 0;
}

section {
	width: 100%;
}

/*
Button modeled after Button 30 (by Algolia) from here: 
https://getcssscan.com/css-buttons-examples
*/
#the-button {
	margin: 2rem auto;
	padding: 1rem;

	font-size: 3rem;
	font-weight: bold;
	color: coral;
	text-shadow: 1px 1px 3px #444;
}

button,
input[type=submit] {
	display: block;

	border-radius: 4px;
	background-color: white;
	border: 1px solid gray;
	box-shadow: 0px 2px 4px #222, inset 0px -4px #ddd;
	transition: transform .2s, box-shadow .2s, background-color .2s;
}

button:hover,
input[type=submit]:hover {
	transform: translateY(-2px);
	box-shadow: 0px 2px 6px black, inset 0px -4px #ddd;
}

button:active,
input[type=submit]:active {
	transform: translateY(2px);
	box-shadow: inset 0px 3px 7px #bbb;
	background-color: #f8f8f8;
}

button:disabled,
input[type=submit]:disabled,
#the-button:disabled {
	color: #aaa;
	text-shadow: -2px -2px #ddd;
	transform: none;
	box-shadow: 0px 0px 2px #444;
}

h2 {
	color: coral;
	margin-top: 1rem;
	text-decoration: underline;
}

a {
	color: salmon;
	text-decoration: underline dotted;
}

form {
	width: 100%;

	display: grid;
}

form>label {
	color: #888;
	font-size: 1rem;
}

input {
	font-size: inherit;
	padding: 0.5rem;
	margin-bottom: 1rem;

	background-color: #ddd;
	border: none;
}

input[type=text]:focus,
input[type=password]:focus {
	outline: 2px solid coral;
}

input[type=submit] {
	font-weight: bold;
	color: coral;
}

#error {
	padding: 0.5rem;
	background-color: #a55;
	border: 2px solid #a22;
	border-radius: 1rem;
	font-weight: bold;
	color: pink;
}

#settings button, #logout {
	font-weight: bold;
	font-size: 0.8em;
	padding: 0.5rem;
	display: block;
}

#drastic-action {
	margin: 0 0 0 auto;
}

#logout {
	margin: 0.5rem 0 0.5rem auto;
}

#presses {
	display: block;
	font-size: 1rem;

	table-layout: fixed;
	border-collapse: collapse;

	width: 100%;
	max-height: 33vh;

	overflow-y: scroll;

	tr {
		background-color: whitesmoke;
	}

	tr:nth-of-type(2n) {
		background-color: white;
	}

	td {
		padding: 0.125rem 0.25rem;
	}
}

.ptitle {
	width: max-content;
	white-space: pre;
	vertical-align: top;
}

.pdetails {
	width: 100%;
	padding: 0.125rem 0.5rem;

	p {
		padding-left: 1rem;
		font-style: italic;
	}
}

.pscore {
	width: min-content;

	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;

	vertical-align: top;
	text-align: right;
}

#presses summary {
	list-style-type: none;
}

#presses summary::after {
	font-weight: bold;
	font-size: 0.75em;
	color: #222;
	content: '⤵';
}

#presses details[open] summary::after {
	content: '⤴';
}

#countdown,
#locked-countdown {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
	margin-bottom: 1rem;
}

#locked-countdown {
	grid-template-columns: 1fr 1fr;
}

#settings {
	margin-bottom: 1rem;
}

#settings summary {
	margin-left: 0.5rem;
	background-color: white;
	position: relative;
	z-index: 1;
	width: fit-content;
}

#settings :not(summary) {
	font-size: 0.85em;
}

#settings-inner {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: top;
	column-gap: 2rem;

	border: 2px solid gray;
	border-radius: 8px;
	padding-top: 1rem;
	margin-top: -0.7rem;
	padding: 0.75rem 6px 6px 6px;
}

#settings p {
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	width: 100%;

	border-bottom: 1px solid black;
}

#settings input {
	margin-bottom: 0;
}

#settings #setting-clear-press-cache {
	padding: 0.25rem;
}

@media (max-width: 35rem) {

	/* Modile target */
	header,
	main,
	footer {
		width: 96vw;
		margin: 0 auto;
	}

	#the-button {
		min-width: 100%;
	}

	form {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 35rem) {

	/* Desktop target */
	header,
	main,
	footer {
		width: 32rem;
		margin: 0 auto;
	}

	#the-button {
		min-width: 50%;
	}

	form {
		grid-template-columns: 1fr;
	}
}