html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

body {
	background-image: url(../img/currentex.png);
}

h2 { color: #aabbcc; font-family: "RunishQuillMK"; }
p { color: #aabbcc; font-family: "Runenglish2"; }


@font-face {
  font-family: "Runenglish2";
  src: url(Runenglish2.ttf) format("truetype");
}

@font-face {
  font-family: "RunishQuillMK";
  src: url(Runishquillmk.ttf) format("truetype");
}

@font-face {
  font-family: "RunishQuillMK-Medium";
  src: url(Runishquillmk-Medium.ttf) format("truetype");
}

@font-face {
font-family: "RunaMonoVitka";
  src: url(RunaMonoVitka.otf) format("opentype");
}


.runename { color: #bbcccc;
	font-family: "RunishQuillMK-Medium";
	font-size: 5em;
}

.runeletter {
	font-family: "RunaMonoVitka";
	font-weight: "bold";
	font-size: 12rem;
	color: #cccccc;

}

.outer {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.inner {
	text-align: center;
}

.rune {
	font-size: 4rem;
	background-color: rgb(42, 42, 42);
	border-radius: 4px;
	border-style: outset;
	border-width: 1px 3px 3px 1px;
	border-color: rgb(42, 42, 42) rgb(13, 13, 13) rgb(13, 13, 13) rgb(42, 42, 42);
	width: 48px;
}


.fortune {
	background-color: rgb(13, 13, 13);
	border-radius: 4px;
	border-style: inset;
	border-width: 3px 1px 1px 3px;
	border-color: rgb(21, 21, 21) rgb(27, 27, 27) rgb(33, 33, 33) rgb(21, 21, 21);
	padding: 7px;
	max-width: 80%;
	margin: auto;
}

details {
	color: #6b728000;
}

details div {
	background-color: #1e1e27;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
	padding: 1.25rem;
	border-radius: 8px;
/*	max-height: calc(100vh - 100px);
	width: 400px;
	max-width: calc(100vw - 2rem);
	bottom: calc(100% + 1rem);*/
	overflow: auto;
	color: #95a3b9;
}

details[open] div {
	-webkit-animation: scale 0.25s ease;
	animation: scale 0.25s ease;
}

@-webkit-keyframes scale {
	0% { transform: scale(0); }
	100% { transform: scale(1); }
}

@keyframes scale {
	0% { transform: scale(0); }
	100% { transform: scale(1); }
}