:root {
	--title-box-width: 7.5vw;
	--title-box-height: 3vh;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

* {
	box-sizing: border-box;
	overflow-x: hidden; /* keeps everything within window */
}

html {
	font-family: "Comic Sans MS";
	font-size: 2vh;
}

body {
	margin: 0;
	padding: 0;
}

hr {
	border: 1px solid #2f2f2f;
}

div.header-container, div.main-container {
	float: left;
}

div.header-container {
	width: 100vw;
	height: 50px;
	background: rgba(255,255,255,0.08);
	/*border: 1px solid #ff0;/**/
}

div.header {
	
}

div.title-container {
	float: left;
	margin-top: 1.25vh;
	margin-left: 1vw;
	/*border: 1px solid #f00;/**/
}

div.title-right {
	float: right;
	margin: 1.5vh 1vw 0px 0px;
	cursor: pointer;
	font-size: 15px;
	color: rgba(255,255,255,0.09);
}

.encoder, .decoder, span.header-title {
	color: #fff;
}

div.main-container {
	width: 100vw;
	height: 90vh;
	/*border: 1px solid #ff0;/**/
}

div.main-content {
	margin: 10px 25px;
	padding: 25px 15px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	height: calc(100vh - calc(var(--title-box-height) + 88px));
	/*border: 1px solid #00f;/**/
}

div.flex-container {
	display: flex;
}

div.flex-content {
	flex: 1;
	margin: 15px;
}

div.flex-content:first-child {
	margin-right: 10px;
}

div.flex-content-title {
	margin-bottom: 10px;
}

.txtArea {
	width: 100%;
	height: 15vh;
	border-radius: 8px;
	resize: none;
	padding: 8px;
}

.txtArea:focus {
	outline: none;
}

.encoder {
	
	/*border: 1px solid #0f0;/**/
}

.decoder {
	
	/*border: 1px solid #00f;/**/
}

.decoder-btn {
	background: rgba(255,255,255,0.1);
	color: #e1e1e1;
	border: 0;
	border-radius: 10px;
	font-size: 3vh;
	min-width: 4vw;
	min-height: 4vw;
	margin-right: 3px;
	margin-bottom: 3px;
	line-height: 1;
}

.decoder-btn:hover {
	background: rgba(255,255,255,0.15);
	cursor: pointer;
}

.decoder-btn:active {
	background: rgba(255,255,255,0.085);
}

.translations-l, .translations-r {
	margin-top: 10px;
	font-size: 2.5vh;
	min-height: 100px;
	/*border: 1px solid #00f;/**/
	background: rgba(255,255,255,0.025);
	border-radius: 10px;
	padding: 0px 15px;
}

/* stuff */

highlight {
	color: #ffd700;
}

/* rgb */
.header-title {
	font-weight: bold;
	background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet, red);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: rainbow-animation 35s linear infinite;
}

@keyframes rainbow-animation {
    to {
        background-position: 375vh;
    }
}