/* 
 * alemi's tiny css kit
 *
 *  i made this for my sites, so they would look nice and consistent without much work
 *  it aims for a minimal, bi-chrome look that favors dark mode
 *
 *  feel free to use this in your projects! just add
 *    <link crossorigin rel="stylesheet" href="https://cdn.alemi.dev/web/alemi.css">
 *  and then optionally customize colors by overriding :root { } variables (check below!)
 *
 *  publicly available under MIT license (i think just writing it here is fine?)
 *  https://git.alemi.dev/template/css.git
 *
 * &#x26fc; woven under moonlight
 */

:root {
	--background: #201F29;
	--background-dim: #292835;
	--background-secondary: #46435E;
	--accent: #BF616A;
	--accent-dim: #D1888E;
	--text: #F2EEE6;
	--text-dim: #E8E1D3;
	--secondary: #ADA9A1;
	--secondary-dim: #c9c2b7;
	--main-col-percentage: 60%;
	--transition-time: .1s;
	--transition-time-long: .5s;
	--accent-rgb: 191, 97, 106;
	--secondary-rgb: 173, 169, 161;
	--background-rgb: 32, 31, 41;
}


* {
	font-family: 'Fira Code', Menlo, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
	scrollbar-color: var(--accent) transparent;
	scrollbar-width: thin;
}

::selection {
	color: var(--background);
	background: var(--accent);
}

body {
	background-color: var(--background);
	color: var(--text);
	font-size: 1rem;
	line-height: 1.5rem;
}

.dim {
	color: var(--secondary);
}

.hidden { display: none; }

a, a:visited {
	color: var(--text-dim);
	transition: var(--transition-time);
}
a:visited {	text-decoration-color: var(--secondary); }
a:hover { color: var(--accent); }

a.clean { text-decoration: none; }

a.dim { color: var(--secondary); }
a.dim:hover { color: var(--secondary-dim); }

table, th, td, tr {
	border: 1px dashed var(--accent);
	border-collapse: collapse;
}
th {
	background-color: var(--background-dim);
	padding: .25em;
}

table.align,
table.align th,
table.align td,
table.align tr {
	border: 0px;
	line-height: 1rem;
	word-wrap: break-word;
}

table.fixed {
	table-layout: fixed;
}

.top td, .top th {
	vertical-align: top;
}

hr {
	border-radius: 0px;
	border-top: 1px solid var(--background-dim);
	border: 1px solid var(--background-dim);
}

hr.dim {
	border-top: 1px solid var(--background);
	border: 1px solid var(--background);
}

hr.color {
	border-top: 1px solid var(--accent);
	border: 1px solid var(--accent);
}

div.separator {
	border-top: 3px dotted var(--accent);
	margin-top: 1em;
	padding-bottom: .15em;
	margin-bottom: 1em;
	border-bottom: 3px dotted var(--accent);
}

h1, h2 {
	margin-top: 2em;
	color: var(--accent);
	line-height: 2rem;
}

h3, h4, h5 {
	margin-top: 1.5em;
	color: var(--secondary-dim);
}

p {
	margin: 1em 2em 1em 2em;
}

@media screen and (max-width: 800px) {
	p {
		margin: 1em;
	}
}

p.clean {
	margin: 1em;
}

ul {
	list-style-type: square; /* just in case below trick isn't supported */
	list-style-type: '- ';
	padding-left: 3.5rem;
}

ul.plus {
	list-style-type: '+ ';
}

ul ul {
	list-style-type: square; /* just in case below trick isn't supported */
	list-style-type: '- ';
	padding-left: 1.5rem;
}

ul ul ul {
	list-style-type: square; /* just in case below trick isn't supported */
	list-style-type: '- ';
	padding-left: 1.5rem;
}

li::marker {
	color: var(--accent);
}

blockquote {
	color: var(--secondary);
	border-left: solid 3px var(--accent);
}

li code,
p  code,
code.color {
	background-color: rgba(var(--accent-rgb), 0.2);
	color: var(--accent);
	padding: 1px 6px;
}

pre code {
	background-color: unset;
	color: unset;
	padding: unset;
}

pre {
	tab-size: 4;
	border-top: 1px solid var(--accent);
	border-bottom: 1px solid var(--accent);
	padding: 10px;
	color: var(--secondary);
	background-color: var(--background-dim);
	overflow: auto;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	box-sizing: border-box;
}

audio {
	background-color: rgba(var(--accent-rgb), 0.666);
	border-radius: 2em;
	border: 2px solid var(--accent);
}

input, textarea, select {
	color: var(--accent);
	background-color: var(--background);
	border: 1px solid;
	margin: 1px;
	box-sizing: border-box;
	transition: var(--transition-time);
}

input.big, textarea.big, select.big {
	padding: 10px;
}

input:hover, textarea:hover, select:hover {
	outline: 1px solid var(--accent);
}

input:focus, textarea:focus, select:focus, button:focus {
	outline: 2px solid var(--text);
	border-color: var(--text);
}

input[type="submit"]:hover {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--background);
	cursor: pointer;
}

input[type="checkbox"] {
	vertical-align: middle;
	padding: 10px;
	box-shadow: inset 0 0 0 3px var(--background);
	appearance: none;
}

input[type="checkbox"].big {
	height: 2.8em;
}

input[type="checkbox"]:hover {
	background-color: var(--background-secondary);
	cursor: pointer;
}

input[type="checkbox"]:checked {
	background-color: var(--accent);
}

input[type="checkbox"]:checked:hover {
	background-color: var(--accent-dim);
}

input[type="radio"] {
	cursor: pointer;
	vertical-align: middle;
	appearance: none;
	border: .1em solid var(--accent);
	border-radius: 50%;
	height: 1.2em;
	width: 1.2em;
}
input[type="radio"]:hover {
	box-shadow: inset 0 0 0 .4em var(--background);
	background-color: var(--accent);
}
input[type="radio"]:checked {
	background-color: var(--accent);
}
input[type="radio"]:checked:hover {
	box-shadow: inset 0 0 0 0px var(--accent);
	background-color: var(--accent);
}

textarea::placeholder,
input::placeholder {
	color: rgba(var(--accent-rgb), 0.5);
}

button {
	color: var(--background);
	background-color: var(--accent);
	border: 0px solid;
	padding: .5em 1em;
	font-weight: bold;
	font-size: 1.2rem;
	transition: var(--transition-time-long);
}

button:hover {
	background-color: var(--accent-dim);
	cursor: pointer;
}

button:disabled,
button:disabled:hover {
	cursor: unset;
	background-color: rgba(var(--accent-rgb), 0.333);
}

input:disabled, textarea:disabled, select:disabled {
	color: var(--secondary);
	background-color: var(--background);
	border-color: var(--secondary);
}

input:disabled:hover, textarea:disabled:hover, select:disabled:hover {
	outline: 0px 
}

textarea:disabled::placeholder,
input:disabled::placeholder {
	color: rgba(var(--secondary-rgb), 0.5);
}

small {
	color: var(--secondary);
	font-size: .65rem;
	line-height: 1rem;
}

small.tiny {
	font-size: .6rem;
}

b.color {
	color: var(--accent);
}

img.box {
	max-width: 100%;
	padding: .5em;
	box-sizing: border-box;
	border: .3em solid var(--accent);
}

img.box.big {
	border: .5em solid var(--accent);
	padding: 1em;
}

img.box.btn {
	transition: var(--transition-time-long);
}

img.box.btn:hover {
	background-color: rgba(var(--accent-rgb), 0.33);
}

img.cover {
	object-fit: cover;
	width: 100%;
}

main {
	margin: 0 1em 0 1em;
}

div.container,
main.container {
	margin: 0 auto 0 auto;
	width: 50%; /* kind of wasteful but way prettier! */
}

div.responsive-spacing {
	padding: 3em;
}

@media screen and (max-width: 1600px) {
	div.container,
	main.container {
		width: 60%;
	}
	div.responsive-spacing {
		padding: 2em;
	}
}
@media screen and (max-width: 1250px) {
	div.container,
	main.container {
		width: 90%;
	}
	div.responsive-spacing {
		padding: 1em;
	}
}
@media screen and (max-width: 850px) {
	div.container {
		width: 95%;
	}
	div.responsive-spacing {
		padding: 0;
	}
}

.moreinfo {
	cursor: help;
}

.slider {
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	scrollbar-width: none;
}
.slider::-webkit-scrollbar {
	width: 0px;
	background: transparent;
}

.two-col:after {
	content: "";
	display: table;
	clear: both;
}

.col-main {
	float: left;
	width: var(--main-col-percentage);
}

.col-side {
	float: left;
	width: calc(100% - var(--main-col-percentage));
}

.center {
	text-align: center;
}

@media screen and (max-width: 786px) {
	.col-main {
		width: 100%;
	}
	.col-side {
		width: 100%;
		margin-bottom: 2em;
	}
}

.rev {
	text-align: right;
}

.bb {
	box-sizing: border-box;
}

.w-100 { width: 100%; }
.w-75 { width: 75%; }
.w-50 { width: 50%; }
.w-25 { width: 25%; }
.w-66 { width: 66%; }
.w-33 { width: 33%; }

.h-100 { height: 100%; }
.h-75 { height: 75%; }
.h-50 { height: 50%; }
.h-25 { height: 25%; }
.h-66 { height: 66%; }
.h-33 { height: 33%; }

.pa-0 { padding: 0; }
.pa-s { padding: .25em; }
.pa-1 { padding: 1em; }
.pa-2 { padding: 2em; }
.pa-3 { padding: 3em; }

.pt-0 { padding-top: 0; }
.pt-s { padding-top: .25em; }
.pt-1 { padding-top: 1em; }
.pt-2 { padding-top: 2em; }
.pt-3 { padding-top: 3em; }

.pb-0 { padding-bottom: 0; }
.pb-s { padding-bottom: .25em; }
.pb-1 { padding-bottom: 1em; }
.pb-2 { padding-bottom: 2em; }
.pb-3 { padding-bottom: 3em; }

.pl-0 { padding-left: 0; }
.pl-s { padding-left: .25em; }
.pl-1 { padding-left: 1em; }
.pl-2 { padding-left: 2em; }
.pl-3 { padding-left: 3em; }

.pr-0 { padding-right: 0; }
.pr-s { padding-right: .25em; }
.pr-1 { padding-right: 1em; }
.pr-2 { padding-right: 2em; }
.pr-3 { padding-right: 3em; }

.ma-0 { margin: 0; }
.ma-s { margin: .25em; }
.ma-1 { margin: 1em; }
.ma-2 { margin: 2em; }
.ma-3 { margin: 3em; }

.mt-0 { margin-top: 0; }
.mt-s { margin-top: .25em; }
.mt-1 { margin-top: 1em; }
.mt-2 { margin-top: 2em; }
.mt-3 { margin-top: 3em; }

.mb-0 { margin-bottom: 0; }
.mb-s { margin-bottom: .25em; }
.mb-1 { margin-bottom: 1em; }
.mb-2 { margin-bottom: 2em; }
.mb-3 { margin-bottom: 3em; }

.ml-0 { margin-left: 0; }
.ml-s { margin-left: .25em; }
.ml-1 { margin-left: 1em; }
.ml-2 { margin-left: 2em; }
.ml-3 { margin-left: 3em; }

.mr-0 { margin-right: 0; }
.mr-s { margin-right: .25em; }
.mr-1 { margin-right: 1em; }
.mr-2 { margin-right: 2em; }
.mr-3 { margin-right: 3em; }