* {
	margin:0;
	padding:0;
	scrollbar-color:#194e4f80 #11324240;
	scrollbar-width:thin;
}
:root {
    --background-header_footer-color:#2b323d;
	--background-body-color:#2e3540;
    --text-color:#eed296;
	--nav-color:#edc5a6;
    --nav-color-darker:#dab79c;
	--test:rgb(232, 175, 175);
}
body {
	display:flex;
	flex-direction:column;
	align-content:center;
	text-align:center;
	background-color: var(--background-body-color);
	color: var(--text-color);
	overflow-x:hidden;
}
header {
	position: sticky;
    top: 0;
    z-index: 1;
    text-align: center;
	white-space: nowrap;
	padding-top:1.75rem;
	margin-bottom: .75rem;

    background-color: var(--background-header_footer-color);
    border-bottom: transparent 1px solid;
    border-radius: 0 0 7px 7px;
    filter: drop-shadow(0px 0px 0.35rem #12161d);

    cursor: default;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

	overflow-x: hidden;
}
h1 {
	margin-bottom:1.75rem;
	white-space: nowrap;
	font-size: clamp(1.75rem, 1.7244rem + 0.1282vw, 2rem);
	text-shadow:1px 1px .25rem #141a16;
}
h1 > u {
	text-decoration:underline #d7bf8b;
	text-shadow:1px 1px .25rem #141a16;
}
h1::before {
	content: "\01091F\16EB\2055\00A0 ";
	font-size: clamp(2rem, 1.9744rem + 0.1282vw, 2.25rem);
}
h1::after {
	content: "\00A0\2055\16EB\2027";
	font-size: clamp(2rem, 1.9744rem + 0.1282vw, 2.25rem);
}
div#base2base_nav {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: row;
    flex-wrap: nowrap;

    width: 100vw;
}
div#base2base_nav button{
    border: none;
    border-left: solid .1em #1f2832;
    border-radius: 5px 5px 0px 0px;
    background-color:#27303a;

	text-align: center;
	white-space: nowrap;
    color: var(--nav-color);
    font-family: monospace;
    font-size: clamp(1.15rem, 1.1397rem + 0.0513vw, 1.25rem);
    font-weight: bold;
    padding: 0.5rem 1rem;
	padding-right: 1.25rem;
    width: 100vw;

    box-shadow: -4px 1px 6px -1px #1d2630;
    text-shadow:1px 1px .25rem #1d2630;

    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
div#base2base_nav button:first-child{
	z-index: 1;
	transform: translate(7.5px, 0);
}
div#base2base_nav button:nth-child(2){
	z-index: 2;
	transform: translate(2.5px, 0);
}
div#base2base_nav button:nth-child(3){
	z-index: 3;
	transform: translate(0, 0);
}
div#base2base_nav button:last-child{
	padding-right: 1rem;
	z-index: 4;
	transform: translate(-5px, 0);
}
div#base2base_nav button:hover, div#base2base_nav button:focus{
    background-color: #242d37;
}
div#base2base_nav button.selected{
    background-color: #212a34;
    color: var(--nav-color-darker);
    text-shadow:1px 1px .25rem #1b232c;
}


main {
	display: flex;
	justify-content: center;
    align-items: center;
    flex-direction: row;
    text-align: center;
    width: 75vw;
    margin: 5em auto;
    flex: 1;
    position: relative;
    transition: all .5s ease-out;
}

main > div.base_main {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	flex-wrap: wrap;
    align-content: center;

	width: fit-content;

	margin: auto calc(2rem + 3vw);
	padding: 1rem 2.5rem;
	border-radius: 5px;
	background-color: #27303a;
	box-shadow: -1px 1px 0.35rem #12161d;
	text-shadow: 1px 1px .25rem #141a16;

	user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

	transition: all .5s ease-out;

}
main > div.base_main > h2 {
	font-family: "Roboto","Arial",sans-serif;
	font-size: clamp(1.25rem, 1.1987rem + 0.2564vw, 1.75rem);
	color: #dcc08b;
	white-space: nowrap;
}
main > div.base_main > h2 u {
	vertical-align: text-bottom;
}
main > div.base_main > h2 > arrow {
	font-size: clamp(1.5rem, 1.4487rem + 0.2564vw, 2rem);
	font-weight: bold;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
div.base_input{
	margin: 0 auto;
	display: flex;
	flex-direction: row;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
div.base_input p, div.base_output p {
	white-space: nowrap;
	font-size: clamp(1.0625rem, 1.0304rem + 0.1603vw, 1.375rem);
	margin: 0 1rem;

}

div.base_input pre{
	font-size: clamp(0.875rem, 0.8429rem + 0.1603vw, 1.1875rem);
}

div.base_input input{
	--ridge: ridge;
	text-align: center;
	font-family: monospace;
	font-weight: bold;
	font-size: clamp(0.9375rem, 0.9054rem + 0.1603vw, 1.25rem);
	background-color: #465056;
	border: var(--ridge, outset) 2px rgba(118, 118, 118, 0.3);
	color: #c1b49a;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

div.base_input input#base_toBase:disabled, div.base_input input#base_fromBase:disabled{
	background-color: #242c35;
	border: inset 2px rgba(118, 118, 118, 0.3);
	color: #d8caad;
	
}
div.base_output{
	margin: .25rem auto;
}
div.base_output p{
	font-family: monospace;
	border: inset 2px rgba(118, 118, 118, 0.3);
	background-color: #242c35;
	padding-left: 1.25rem;
	padding-right: 1.25rem;

	min-width: 1.25rem;
	max-width: 12.5rem;
    overflow: auto;

	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: unset;
}

footer
{
    text-align: center;
    position: fixed;
    bottom: 0;
    right: 50%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    z-index: 1;
    transform: translateX(50%);
    width: 100%;
    background-color: var(--background-header_footer-color);
    color: #d8caad;
	font-size: clamp(1rem, 0.9641rem + 0.1795vw, 1.35rem);
    border-bottom: transparent 1px solid;
    border-radius: 7px 7px 0 0;
    filter: drop-shadow(0px 0px 0.35rem #12161d);
}

footer > *
{
	margin-bottom:.25rem;
}
.owner
{
	cursor:default;
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
}

.owner u
{
	cursor:progress;
}

/* ---------- media querrys ---------- */
@media (max-width: 975px) {
	main{
		display: block;
		margin: 1em auto;
	}
	main > div.base_main{
		max-width: 12rem !important;
		margin: 2rem auto;
		padding: 1rem 1.75rem;
	}
	div.base_main .base_input input{
		max-width: 1.75rem !important;
	}
	div.base_output p{
		max-width: 6.5rem !important;
	}
}
@media (max-width: 645px) {
	* {
		scrollbar-width:none !important;
	}
}
@media (max-width: 480px) {
	header h1{
		margin-bottom: 0.75rem !important;
	}
	div#base2base_nav{
		flex-direction: column;
	}
	div#base2base_nav button{
		box-shadow: 1px -2px 6px -1px #1d2630;
	}
	div#base2base_nav button:first-child{
		transform: translate(0, 13px);
	}
	div#base2base_nav button:nth-child(2){
		transform: translate(0, 8px);
	}
	div#base2base_nav button:nth-child(3){
		transform: translate(0, 3px);
	}
	div#base2base_nav button:last-child{
		transform: translate(0,0px);
	}
}
@media (max-height: 550px) and (min-width: 976px) {
	header{
		padding-top: 0.75rem;
	}
	h1{
		margin-bottom:1.25rem;
	}
	main{
		margin: 3rem auto;
	}
	main > div.base_main{
		margin: 2rem calc(2rem + 4vw);
		padding: 1rem 2.25rem;
	}
	div.base_main .base_input input{
		max-width: 3.25rem !important;
	}
	div.base_output p{
		max-width: 9.5rem !important;
	}
}
@media (max-height: 850px) and (max-width: 975px) {
	header{
		padding-top: 0.75rem;
	}
	h1{
		margin-bottom:1.25rem;
	}
	main{
		display: block;
		margin: 1em auto;
	}
	main > div.base_main{
		max-width: 12rem !important;
		margin: 2rem auto;
		padding: 1rem 1.75rem;
	}
	div.base_main .base_input input{
		max-width: 1.75rem !important;
	}
	div.base_output p{
		max-width: 6.5rem !important;
	}
}