@font-face {
	font-family: "Iosevka";
	src: url("Iosevka.woff2") format("woff2");
}

.tt-home {
	text-decoration: none;
	padding: 5px;
	border-radius: 10px;
	transition: background-color 0.5s ease;
}

/* dark theme */
* {
	font-family: "Iosevka", monospace;
	background-color: #2e2e2e;
	color: lightgray;
}

/* simple vertical flow, elements centered on y-axis */
/* avoids extra work for mobile! */
.tt-vert {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* horizontal flow that wraps on smaller screens (e.g. mobile) */
.tt-horiz {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/* nice, contrasting, rounded border */
.tt-border,
.tt-clickable,
.tt-subtle-border,
.tt-text {
	border-radius: 10px;
	border: 2px solid gray;
}

/* cozy padding & margin */
.tt-clickable,
.tt-cozy,
.tt-text {
	padding: 10px;
	margin: 5px;
}

/* for elements that should be clicked */
.tt-clickable {
	transition: background-color 0.3s ease;
}

button,
input {
	font-size: 12pt;
}

/* italicize buttons and input placeholder text */
button,
input::placeholder {
	font-style: italic;
}

/* increase contrast between these elements and the body  */
input,
.tt-clickable:hover,
.tt-home:hover {
	background-color: #434343;
}

/* get rid of the ugly outline when any element is focused */
:focus {
	outline: none;
	box-shadow: none;
}

/* if an <a> is a tt-clickable, remove the underline */
a.tt-clickable {
	text-decoration: none;
}

/* don't look like a link if there is no link */
a[href=""] {
	pointer-events: none;
	cursor: default;
}

.tt-subtle-border,
.tt-text {
	border-color: #434343;
}

.tt-text,
details {
	text-align: center;
}

/* small icon */
.tt-icon {
	vertical-align: middle;
	width: 20px;
	height: 20px;
	background-color: inherit;
}

/* a subtler heading that doesn't hurt your eyes */
.tt-subtle {
	color: gray;
	font-style: italic;
}

summary > * {
	display: inline;
}

ul.tt-list {
	/* padding: 0; */
	margin: 0;
}

/* Hide the input element */
input[type="file"] {
	display: none;
}