/******************* Constants *******************/
:root {
	--font-color: #EFEFEF;
	--font-color-em: #8C8C8C;
	--background-color-main: #404040;
	--background-color-secondary: #505050;
	--avatar-background: #B6B6B6;
	--color01: #99CCFF;
	--color01_bright: #58af58;
	--color02: #ab7026;
	--color02_bright: #ea9a36;

	--body-maxwidth: 900px;
	--footer-height: 3em;
}

/******************* Page *******************/
* {
	box-sizing: border-box;
}
html {
	background-color: var(--background-color-main);
	font-family: Lato, Helvetica, sans-serif;
	font-size: large;
	color: var(--font-color);
	min-height: 100vh
}
body {
	margin: auto;
	position: relative;
	height: 100%;
	max-width: var(--body-maxwidth);
}
html, body {
	height: 100%;
}

a {
	color: var(--font-color);
}
a:hover {
	text-decoration: none;
	border-bottom: 0.08em dashed var(--font-color);
}
#page-wrap {
	min-height: 100%;
	margin-bottom: calc(0em - var(--footer-height));
}
#page-wrap:after {
	content: "";
	display: block;
}
footer, #page-wrap:after {
	/* .push must be the same height as footer */
	height: var(--footer-height);
}

/******************* Header *******************/

#navbar {
	position: relative;
	padding: 2rem 1rem;
}
#navbar .title{
	font-size: 2em;
}

#navbar-right {
	position: absolute;
	right: 1em;
	bottom: 2em;
}

/******************* Footer *******************/

#footer {
	width: 100%;
	height: var(--footer-height);
	vertical-align: bottom;
	position: relative;
}
#footer_text {
	position: absolute;
	bottom: 0.1em;
	left: 50%;
	min-width: fit-content;
	transform: translateX(-50%);
}

/******************* Container *******************/

.container {
	margin: 0 1em;
}

/******************* Others *******************/

#my_canvas {
	height: 50vh;
}

.cloud_words_input {
	margin: 1em;
}
.cloud_words input:nth-of-type(2) {
	margin-left: 0;
}
.cloud_words input:nth-last-of-type(2) {
	margin-right: 0;
}
#cloud_words_submit {
	display: block;
	margin-top: 1em;
}
#cloud_create_submit {
	margin-top: 1em;
}
.cloud_link {
	margin-bottom: 1em;
}

#cloud_create #ftext_l{
	vertical-align: top;
}
#cloud_create label::after{
	content: '\00a0:';
}

summary:active, summary:focus {
	outline: none;
}

.download_link {
	margin-top: 0.5em;
}

details table {
	margin-top: 0.5em;
	margin-left: 1em;
}