@import "/css/theme.css";
@import "/css/font/fonts.css";

body {
	background-color: var(--color-background);
}

* {
	font-family: "Montserrat Alternates", sans-serif;
	color: var(--color-text);
}

a {
	cursor: pointer;
}

aside {
	position: absolute;
	right: 0;
	top: 0;
	padding: 1em;
	text-align: right;
}

aside > a {
	display: block;
	width: auto;
}

main {
	padding: 4em;
	width: 875px;
	max-width: 100%;
	box-sizing: border-box;
}

.columns {
	display: flex;
	flex-wrap: wrap;
}

.columns > * {
	--padding: 1em;
	padding: calc(var(--padding) / 2);
	margin: calc(var(--padding) / 2);
	box-sizing: border-box;
	flex: 1;
	min-width: calc(100% / 2 - var(--padding) * 4);
	border-right: .5em solid var(--color-accent);
	background-color: white;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
	border-top-left-radius: .5em;
	border-bottom-left-radius: .5em;
}


h1, h2 {
	font-weight: normal;
	margin-top: 0;
}
h1 {
	font-size: 3em;
}

code.alert {
	background-color: var(--color-alert);
	padding: .5em;
	padding-left: 2em;
	border-radius: .3em;
	display: block;
	border: 2px solid var(--color-alert-em);
	margin-bottom: 1em;
	position: relative;
}
code:before {
	content: '\f05a';
	font-family: "Font Awesome 6 Free";
	color: var(--color-alert-accent);
	position: absolute;
	left: .5em;
}

a {
	text-decoration: none;
	color: black;
}
a:hover {
	text-decoration: underline;
}
a#back:before, a.go:before {
	content: '\f30a  ';
	font-family: "Font Awesome 6 Free";
}
a.go:before {
	content: '\f30b  ';
}
#export > a {
	margin-right: 1em;
	cursor: pointer;
}

small.copyright {
	font-style: italic;
	display: block;
}

.actions > i:hover {
	cursor: pointer;
	color: var(--color-accent);
}

.options > a {
	display: block;
}

.secret {
	display: inline-block;
	position: relative;
	width: 13em;
	text-align: center;
	color: transparent;
	padding-left: 1em;
	border-radius: 1em;
	transition: .4s background-color;
	cursor: default;
	user-select: none;
}
.secret:hover {
	color: black;
	background-color: white;
	user-select: auto;
}
.secret:before {
	color: black;
	content: "\f070";
	display: inline-block;
	width: 2em;
	text-align: center;
	font-family: "Font Awesome 6 Free";
	position: absolute;
	left: 0;
}
.secret:hover:before {
	content: "\f06e";
}
.secret:after {
	color: black;
	content: "************";
	font-family: "Font Awesome 6 Free";
	position: absolute;
	left: 2em;
}
.secret:hover:after {
	display: none;
}