/* variables */
:root {
  --txt-width: 60ch;
	--foreground: #333333;
	--background: #eeeeee;
	--dimm: 0.7;
	--green: #00d090;
	--orange: #f08010;
	--yellow: #f0c060;
	--red: #f05030;
	--blue: #4080a0;
}

/* normalize */
* {
	box-sizing: border-box;
}

input {
	background: none;
	border: none;
	border-bottom: solid var(--foreground) 1px;
	font-size: 1rem;
}

input:focus {
	outline: none;
}

button,
input[type^=submit] {
	cursor: pointer;
	border: none;
	background: none;
	font-size: 1rem;
}

.yes,
.green{
	color: var(--green);
}

.maybe,
.yellow {
	color: var(--yellow);
}

.no,
.orange {
	color: var(--orange);
}

.delete,
.red {
	color: var(--red);
}

.share,
.blue {
	color: var(--blue);
}

html {
	padding: 0;
	margin: 0;
	font-family: sans-serif;
	/* font-size: clamp(16px, calc(1vw + 1vh + 0.5vmin), 22px); */
	font-size: calc(0.1rem + 1vw + 1vh + 0.5vmin);
	line-height: 1.25;
	color: var(--foreground);
	background-color: var(--background);
}

/* layout */
body {
	margin: 0;
	height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

body>* {
	padding: 0.5rem;
	background-color: var(--background);
}

/* header */
body>header {
	border-bottom: thin solid var(--foreground);
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title navigation";
}

body>header>h1,
body>header>nav {
	display: flex;
	gap: 0.5rem;
}

body>header>h1 {
	grid-area: title;
}

body>header>nav {
	grid-area: navigation;
}

body>header * {
	margin: 0;
	font-size: 1rem;
	font-weight: normal;
	text-decoration: none;
	color: var(--foreground);
}

/* main */
body>main {
	overflow: scroll;
}

/* footer */
body>footer {
	border-top: thin solid var(--foreground);
}

body>footer * {
	margin: 0;
	font-size: 0.5rem;
}

/* deck */
#deck article {
	max-width: 100%;
	max-height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

#deck article>main {
	overflow: scroll;
}

/* matches */
#matches table {
	width: 100%;
}

#matches table tr {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	border-bottom: thin solid var(--foreground);
}

#matches table tr td:last-child {
	text-align: right;
}

/* upload */
#upload form {
	height: 100%;
	display: grid;
	grid-template-rows: 1fr auto;
}

#upload input[type^=file] {
	display: none;
}

.dropzone {
	cursor: pointer;
}

/* settings */
/* TODO: arrows */
#settings form {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 0.5rem;
}

#settings form input[type=submit] {
	grid-column: 1 / -1;
}

/* instructions */

#instructions article h1,
#instructions article h2,
#instructions article h3,
#instructions article h4,
#instructions article h5,
#instructions article h6 {
	font-size: 1rem;
	font-weight: normal;
	border-bottom: thin solid var(--foreground);
}

/* login, register */
#login>main,
#register>main {
		place-self: center;
}

#login form {
	display: grid;
	grid-template-areas:
		"user-label user-input"
		"pass-label pass-input"
		"login login";
	grid-gap: 0.5rem;
	align-items: center;
}

#register form {
	display: grid;
	grid-template-areas:
		"user-label user-input"
		"pass-label pass-input"
		"mail-label mail-input"
		"login login";
		grid-gap: 0.5rem;
	align-items: center;
}

#login form>input[type=text],
#login form>input[type=password],
#register form>input[type=text],
#register form>input[type=password],
#register form>input[type=email] {
}

#login form>input:focus,
#register form>input:focus {
	outline: none;
}

#login form>input[type^="submit"],
#register form>input[type^="submit"] {
	grid-area: login;
	place-self: center;
	align-self: center;
}

/* menu */
#menu form {
	display: grid;
	grid-template-columns: auto;
	grid-gap: 0.5rem;
	justify-items: start;
}


#content>form {
	display: grid;
	grid-template-rows: 1fr;
}

/* flash */
.flashes {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	max-width: var(--txt-width);
	list-style: none;
}

.flashes li {
	animation: 3s 2s forwards fadeout;
}

@keyframes fadeout {
from {
	opacity: 1;
	visibility: visible;
}

to {
	opacity: 0;
	visibility: hidden;
}
}

#buttonContainer {
	display: grid;
	grid-auto-flow: column; 
	grid-template-columns: repeat(5, 1fr);
}

#buttonContainer>button:hover {
	/* background-color: black!important; */
}

button[value^="Yes"] {
	background-color: var(--green);
}
button[value^="No"] {
	background-color: var(--orange);
}
button[value^="Maybe"] {
	background-color: var(--yellow);
}
button[value^="Delete"] {
	background-color: var(--red);
}
button[value^="Share"] {
	background-color: var(--blue);
}