/* CSS by Gramkraxor */

body * {
	font-family: inherit;
	color:       inherit;
	font-size:   inherit;
	line-height: inherit;
	/*text-decoration: none;*/
}

body {
	font-family: 'Ubuntu Mono', 'Roboto Mono', 'Droid Sans Mono', 'Consolas', monospace;
	color: #000000;
	background: #FFFFFF;
}

::selection {
	color: inherit;
	background: #C0C0C0;
}

:focus {
	outline: 0;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

input {
	color: inherit;
	box-sizing: border-box;
	border: 0;
	display: inline;
	margin: 0;
	padding: 8px;
	background: 0;
	font-size: inherit;
	line-height: inherit;
	transition: border 0.25s;
}

/*
input[type='button'] {
	padding: 8px 0;
	cursor: pointer;
	width: 36px;
	max-width: 12.5%;
	margin-right: 8px;
}
*/

input[type='text'] {
	border-bottom: 1px solid;
	border-bottom-color: rgba(0, 0, 0, 0.25);
}

input[type='text']:focus {
	border-bottom-color: #000000;
}

#custom-base {
	font-style: italic;
	border: 1px solid;
	border-color: rgba(0, 0, 0, 0.25);
}

#custom-base:focus {
	border-color: #000000;
}

#custom-base::placeholder {
	color: inherit;
	opacity: 0.5;
}

#wrapper {
	padding: 16px;
	margin: auto;
	max-width: initial;
}

#convert, #mode {
	display: block;
	margin: 8px 0px;
	box-sizing: border-box;
	padding: 8px;
	/*border: 1px solid #000000;*/
}

#convert, #romulator, #romulator input {
	text-align: center;
}

#mode {
	margin: 0 12.5%;
}

#title, #footer {
	display: block;
	text-align: center;
}

#footer {
	margin-top: 12px;
}

/*
#title::before {
	content: '2';
	margin-right: 4px;
	display: inline-block;
	transform: rotate(0.5turn);
}
*/

input[type='radio'] {
	opacity: 0;
	position: absolute;
}

input[type='radio'], label {
	display: inline-block;
	vertical-align: middle;
	margin: 5px;
	cursor: pointer;
}

label {
	position: relative;
}

input[type='radio'] + label:before {
	content: '';
	background-color: 0;
	transition: background 0.25s;
	border: 1px solid #000000;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	padding: 2px;
	margin-right: 8px;
	text-align: center;
	border-radius: 50%;
}

input[type='radio']:checked + label:before {
	content: '';
	background-color: #000000;
}

input[type='radio']:focus + label {
  outline: 0;
}

@media only screen and (max-width: 560px) {

	body {
		font-size:   5vw;
		line-height: 5vw;
		margin: 0;
	}

	#wrapper {
		padding: 10vw 0;
	}

	#convert {
		padding: 0;
	}

	#convert > p > span {
		margin-right: 5vw;
	}

	/*
	input[type='button'] {
		padding: 0;
		width: 18.75%;
		max-width: initial;
		height: 15vw;
		margin: 0;
	}
	*/

	input[type='text'] {
		width: 75%;
		height: 10vw;
	}

	#custom-base {
		height: 10vw;
		margin-top: 5vw;
	}

	#mode {
		margin-top: 5vw;
		text-align: center;
		width: 100%;
		margin: auto;
	}

	#mode p:not(#mode-title) {
		display: inline-block;
		margin: 0 3vw;
	}

	#mode-title {
		display: none;
	}

	input[type='radio'] + label:before {
		border-width: 0.5vw;
		width:  3vw;
		height: 3vw;
		padding: 1vw;
		margin-right: 4vw;
	}

	#romulator {
		margin-top: 5vw;
	}

}

@media only screen and (min-width: 561px) {

	body {
		font-size: 16px;
		line-height: 16px;
		margin: 128px 0;
	}

	#wrapper {
		max-width: 576px;
	}

	#convert, #mode {
		margin: 8px 12px;
	}

	#convert {
		text-align: left;
	}

	input[type='text']{
		width: 256px;
	}

	#convert > p > span {
		display: inline-block;
		width: 48px;
		text-align: right;
		margin-right: 12px;
	}

	#custom-base {
		padding: 8px 4px;
		height: 24px;
		margin-right: 8px;
		margin-left: calc(-48px + 4px);
		text-align: right;
		width: 96px;
	}

	#mode p {
		display: block;
	}

	#mode p:not(#mode-title) {
		margin: 8px 0;
	}

	#dozer {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	/*
	.custom.btn {
		font-style: italic;
		margin-left:   -36px;
		min-width: calc(36px + 36px);
	}
	*/

}

/* easter eggs */

body.dark {
	background: #000000;
}

body.dark * {
	color: #FFFFFF;
}

body.dark input[type='text'] {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

body.dark input[type='text']:focus {
	border-bottom-color: #FFFFFF;
}

body.dark #custom-base {
	border-color: rgba(255, 255, 255, 0.25);
}

body.dark #custom-base:focus {
	border-color: #FFFFFF;
}

body.dark input[type='radio'] + label:before {
	border-color: #FFFFFF;
}

body.dark input[type='radio']:checked + label:before {
	background-color: #FFFFFF;
}

body.flip {
	transform: rotate(180deg);
}