@import url('characters.css');



::-webkit-scrollbar {width: 8px}
::-webkit-scrollbar-track {background: var(--scrollbar-background)}
/* ::-webkit-scrollbar-track {background: #11111d} */

::-webkit-scrollbar-thumb {
	/* background: #11111d; */
	background: var(--caption-background);
	border-radius: 8pt;
	box-shadow: 0 0 0 3px var(--background);
}



body {
	background: var(--background);
	color: var(--text-color);
	font-family: 'Roboto Mono', monospace;
	text-align: center;
}

img {
	image-rendering: pixelated;
}

a {
	/* Stylistic stuff */
	color: var(--link-color);
	text-decoration: none;
}

hr {
	/* Spatial styling */
	height: 2px;
	margin: 0;
	
	/* Stylistic stuff */
	background-color: var(--header-background);
	border: none;
}

a:hover {
	/* Stylistic stuff */
	color: var(--link-hover-color);
}

/* ::selection {background: var(--selection-color)} */



#twitch-embed iframe {width: 100%}




#header {
	/* Spatial styling */
	padding: 4pt;
	padding-top: 3pt;
	padding-bottom: 3pt;

	/* Layout styling */
	display: grid;
	grid-template-columns: max-content 1fr;
	
	/* Stylistic stuff */
	background: var(--header-background);
}



#header a {color: var(--header-link-color); font-size: 14pt}
#header a:hover {color: var(--header-link-hover-color)}
#header .logo {text-align: left}
#header .controls {text-align: right}

#header .controls .separate {
	border-left-color: var(--header-link-color);
	border-left-style: solid;
	border-left-width: 1px;
}

#container {
	/* Spatial styling */
	position: relative;
	height: max-content;
	padding-bottom: 6px;
	z-index: 10;

	/* Stylistic stuff */
	background: var(--container-background);

	/* Transition stuff */
	transition: 0.6s border-radius cubic-bezier(0.47, 1.64, 0.41, 0.8);

	/* Text styling*/
	text-align: center;
}

#container .prev-action {
	/* Spatial styling */
	margin-bottom: 5pt;

	/* Text styling*/
	color: var(--header-link-color);
	font-size: 14pt;
}

#footer, #footer a {
	/* Spatial styling */
	width: auto;
	height: min-content;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10pt;
	margin-bottom: 5pt;
	user-select: none;
	
	/* Stylistic stuff */
	color: var(--footer-color);

	/* Text styling*/
	font-size: 14pt;
	text-align: center;
	line-height: 22pt;
}

#footer a:hover {color: var(--footer-hover)}


#footer img {
	height: 16pt;
	vertical-align: top;
}


.caption {
	/* Spatial styling */
	width: 500px;
	padding: 4pt;
	margin: auto;
	margin-top: 2px;
	margin-bottom: 2pt;

	/* Stylistic stuff */
	background: var(--caption-background);
	border-radius: 3px;

	/* Text styling */
	text-align: justify;
}

.caption:last-of-type {
	margin-bottom: 0;
}


.description {
	/* Spatial styling */
	/* width: 90%; */
	margin: auto;
}


img.ad {width: 100%}


.suggestion-box {
	/* Spatial styling */
	width: 500px;
	padding: 3pt;

	/* Stylistic stuff */
	background: var(--caption-background);
	color: var(--text-color);

	border: none;
	border-radius: 3px;

	/* Text styling */
	font-family: 'Roboto Mono', monospace;
	font-size: 14pt;

	/* Transition stuff */
	transition: 0.15s background;
}

.suggestion-box:focus {
	/* Stylistic stuff */
	outline: none;
	background: #00000060;
}

.suggestion-box::placeholder {color: var(--footer-color)}


.next-button {margin: auto; font-size: 18pt;};
.next-button {margin-bottom: 10pt};
#container .panel:nth-child(2) {margin-top: 0}
.panel:first-of-type {margin-top: 0}
.panel {margin-top: 2pt}





.drawer {
	/* Spatial styling */
	position: relative;
	width: inherit;

	margin-left: auto;
	margin-right: auto;

	padding: 6px;
	padding-top: 10px;
	padding-bottom: 4pt;

	transform: translate(0, -6px);
	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;

	/* Stylistic stuff */
	background: var(--caption-background);

	/* Other Styling */
	user-select: none;

	/* Transition stuff */
	transition: 0.6s border-radius cubic-bezier(0.47, 1.64, 0.41, 0.8);
	-webkit-transition: 0.6s top;
}


.drawer .table {
	/* width: 100%; */
	display: grid;
	grid-template-columns: 1fr max-content min-content min-content;
	grid-gap: 10px;

	align-self: center;
}

.drawer .action-item {word-break: break-all}


.drawer .act {text-align: right}
.drawer .vote-count {}
.drawer .unvote {}
.drawer .delete {}

.drawer .vote,
.drawer .action-item,
.drawer .remove-action,
.drawer .remove-vote {cursor: pointer}


.jquery-modal {z-index: 10 !important}


/* .drawer ul {
	width: max-content;
	margin: 0;
	margin-left: auto;
	margin-right: auto;

	text-align: right;
	line-height: 20pt;
	padding: 0;
}

.drawer li {list-style: none}

.drawer li > div {display: inline}
.drawer div > .action-item {word-break: break-all} */




@media only screen and (max-width: 540px) {
	.caption {
		width: unset;
		margin-left: 4pt;
		margin-right: 4pt;
	}

	.suggestion-box {
		width: 95%;
	}

	.drawer {
		/* width: min-content; */
	}
}

@media only screen and (max-width: 350px) {
	#header a {font-size: 12pt}
}

/* Tiny Styling */
@media only screen and (max-width: 525px) {
	#header .controls {
		margin-left: auto;
	}
}