* {
	font-family: "Orbitron";
	outline: unset !important;
}
::placeholder, body, button, input, select, textarea {
	font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 2vh;
}
html, body {
	position: relative;
	height: 100%;
	width: 100%;
	margin: 0;
	overflow: hidden;
}
body:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
	background: url(../imgs/background.png) center/100% 100% no-repeat;
	z-index: -1;
	pointer-events: none;
}
#brandings {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0.3;
	pointer-events: none;
}
.branding {
	position: absolute;
}
.branding#logo {
	top: 15%;
	left: 5%;
	width: 75%;
	height: 75%;
	background: url(../imgs/logo.png) top left/contain no-repeat;
}
.branding#pineapple {
	right: 5%;
	bottom: 5%;
	width: 60%;
	height: 60%;
	background: url(../imgs/ananas.png) bottom right/contain no-repeat;
}
#settings_menu:before {
	content: "";
	position: absolute;
	top: 0;
	left: -50vw;
	transform-origin: top left;
	background: url(../imgs/background.png) center/100% 100% no-repeat;
	z-index: -1;
}

#settings {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
#settings_menu {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(0deg, rgb(0,0,0,0.5), rgb(0,0,0,0.5)) center/cover no-repeat;
	box-sizing: border-box;
	padding: 1vh;
	width: 50vw;
	overflow: hidden;
	transition: width .3s linear;
}
#settings_menu.closed {
	padding-left: 0;
	padding-right: 0;
	width: 0;
}
#settings_cog {
	position: absolute;
	top: 0;
	right: 50vw;
	margin: 1vh;
	cursor: pointer;
	opacity: 1;
	background: url('data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="340px" height="340px" viewBox="0 0 340 340"><path fill="white" d="M293.629,127.806l-5.795-13.739c19.846-44.856,18.53-46.189,14.676-50.08l-25.353-24.77l-2.516-2.12h-2.937 c-1.549,0-6.173,0-44.712,17.48l-14.184-5.719c-18.332-45.444-20.212-45.444-25.58-45.444h-35.765 c-5.362,0-7.446-0.006-24.448,45.606l-14.123,5.734C86.848,43.757,71.574,38.19,67.452,38.19l-3.381,0.105L36.801,65.032 c-4.138,3.891-5.582,5.263,15.402,49.425l-5.774,13.691C0,146.097,0,147.838,0,153.33v35.068c0,5.501,0,7.44,46.585,24.127 l5.773,13.667c-19.843,44.832-18.51,46.178-14.655,50.032l25.353,24.8l2.522,2.168h2.951c1.525,0,6.092,0,44.685-17.516 l14.159,5.758c18.335,45.438,20.218,45.427,25.598,45.427h35.771c5.47,0,7.41,0,24.463-45.589l14.195-5.74 c26.014,11,41.253,16.585,45.349,16.585l3.404-0.096l27.479-26.901c3.909-3.945,5.278-5.309-15.589-49.288l5.734-13.702 c46.496-17.967,46.496-19.853,46.496-25.221v-35.029C340.268,146.361,340.268,144.434,293.629,127.806z M170.128,228.474 c-32.798,0-59.504-26.187-59.504-58.364c0-32.153,26.707-58.315,59.504-58.315c32.78,0,59.43,26.168,59.43,58.315 C229.552,202.287,202.902,228.474,170.128,228.474z"></path></svg>') center/contain no-repeat;
	transition: right .3s linear, opacity .3s linear;
}
#settings_menu.closed ~ #settings_cog {
	right: 0;
	opacity: 0;
}
#content {
	opacity: 1;
	transition: opacity .15s ease-in-out;
}
body.loading #content {
	opacity: 0;
	pointer-events: none;
}
.controls {
	display: flex;
	flex-direction: column;
}
.control_row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.control_label {
	color: rgba(222, 222, 222, 1);
}
.switch {
	display: block;
	flex: 0 0 auto;
	position: relative;
	background-color: #72767d;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
	opacity: 1;
	overflow: hidden;
	user-select: none;
	transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out,opacity .15s ease-in-out;
}
.switch::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #000;
	opacity: 0;
	z-index: 0;
}
.switch::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	background-color: #FFF;
	z-index: 1;
	transition: transform .15s ease-in-out,width .1s ease-in-out,left .1s ease-in-out;
}
.switch .switch_checkbox {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: 2;
	cursor: pointer;
}
.switch_checked {
	background-color: #C00;
}
.switch-disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

#content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-flow: column;
	user-select: none;
}
#board {
	width: 90vw;
	margin: auto;
}
#header {
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: auto;
	width: 100%;
	padding: 1vh 0;
}
#header #advanced_controls {
	display: flex;
	align-items: center;
	justify-content: center;
}
#header .arrow_button {
	background-image: url('data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="401.949px" height="401.949px" viewBox="0 0 401.949 401.949"><path fill="white" d="M401.947,159.301c0-8.583-6.949-15.742-15.497-15.889l0,0H197.515c-7.021-1.589-12.309-7.886-12.309-15.369V78.976c0-8.675-5.397-11.163-11.993-5.535L4.948,190.735c-6.598,5.634-6.598,14.847,0,20.479l168.262,117.29c6.599,5.632,11.996,3.146,11.996-5.528v-49.067c0-8.673,7.097-15.771,15.771-15.771l185.201-0.276c8.676-0.004,15.771-7.101,15.771-15.771L401.947,159.301z"/></svg>');
	background-position: center;
	background-size: 70%;
	background-repeat: no-repeat;
}
#header #redo_btn.arrow_button {
	transform: scale(-1, 1);
}
#header #last_entry {
	display: flex;
	align-items: center;
	color: #FFF;
	font-weight: 600;
}
#header #last_entry #first {
	color: rgba(150, 150, 150, 0.5);
}
#header #last_entry #middle {
	color: rgba(150, 150, 150, 0.75);
}
#header #last_entry > * {
	display: flex;
	justify-content: center;
	align-items: center;
}
#header #last_entry > *:empty {
	display: none;
}
#columns {
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
#columns .tile {
	display: flex;
	align-items: center;
	justify-content: center;
}
#columns .letter {
	color: rgba(222, 222, 222, 1);
	font-weight: 1000;
	border-bottom: 1px solid #AAA;
}
#columns .number {
	color: rgba(150, 150, 150, 0.5);
	font-weight: 700;
	transition: color 0.5s ease-in;
}
#columns .number.on {
	color: rgba(255, 255, 255, 1);
	font-weight: 850;
}

.framed {
	position: relative;
	overflow: hidden;
}
.frame {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0.7;
	pointer-events: none;
}
.border {
	position: absolute;
	background-size: cover;
}
.border.top,
.border.bottom {
	right: 0;
	left: 0;
	background-repeat-x: repeat;
	background-repeat-y: no-repeat;
}
.border.right,
.border.left {
	top: 0;
	bottom: 0;
	background-repeat-x: no-repeat;
	background-repeat-y: repeat;
}
.border.top {
	top: 0;
	background-image: url(../imgs/frame_top.png);
	background-position: top;
}
.border.right {
	right: 0;
	background-image: url(../imgs/frame_right.png);
	background-position: right;
}
.border.bottom {
	bottom: 0;
	background-image: url(../imgs/frame_bottom.png);
	background-position: bottom;
}
.border.left {
	left: 0;
	background-image: url(../imgs/frame_left.png);
	background-position: left;
}

button {
	cursor: pointer;
	box-sizing: border-box;
	color: #FFF;
	background-color: #500;
	border: none;
	border-bottom: 0 solid #200;
}
button:active {
	background-color: #C00;
	border-bottom-color: #500;
}
button:disabled {
	filter: grayscale(90%);
}

.toasts {
	position: fixed;
	top: 0vh;
	right: 15vw;
	bottom: 15vh;
	left: 15vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
	z-index: 4000;
}
.toast {
	animation: toast-up .3s ease;
	transform: translateY(-10px);
	background-color: #36393F;
	font-weight: 500;
	color: #FFF;
	opacity: 1;
	cursor: pointer;
}
.toast.closing {
	animation: toast-down .3s ease;
	animation-fill-mode: forwards;
	opacity: 1;
	transform: translateY(-10px);
}
@keyframes toast-up {
	from {
		transform: translateY(0);
		opacity: 0;
	}
}
@keyframes toast-down {
	to {
		transform: translateY(0px);
		opacity: 0;
	}
}
.toast.toast-danger, 
.toast.toast-error {
	background-color: #F04747;
}
.toast.toast-default {
	background-color: #F26522;
}
.toast.toast-info {
	background-color: #4A90E2;
}
.toast.toast-success {
	background-color: #43B581;
}
.toast.toast-warning,
.toast.toast-warn {
	background-color: #FFA600;
}

@media (orientation: portrait) {
	body:before,
	#settings_menu:before {
		height: 100vh;
		width: 100vw;
		transform: none;
	}
	#settings_cog {
		width: 6.5vw;
		height: 6.5vw;
	}
	.control_label {
		font-size: 4vw;
	}
	.switch {
		border-radius: 3vw;
		width: 8vw;
		height: 5vw;
		margin-left: 2vw;
	}
	.switch::after {
		border-radius: 3vw;
		width: 3.5vw;
		height: 3.5vw;
		margin: 0.75vw;
	}
	.switch_checked::after {
		transform: translate3d(3.5vw, 0, 0);
	}
	#header {
		border-radius: 1vh;
		box-shadow: 0.8vh 0.8vh 0.8vh 0 rgba(0, 0, 0, 0.5);
	}
	#header .arrow_button {
		width: 6.5vw;
	}
	#header #last_entry #first {
		font-size: 3vh;
		min-width: 8.5vh;
	}
	#header #last_entry #middle {
		font-size: 3.5vh;
		min-width: 10vh;
	}
	#header #last_entry #last {
		font-size: 4vh;
		min-width: 11.5vh;
	}
	#header #last_entry > * {
		margin: 0 1vh;
	}
	#columns {
		margin-top: 2vh;
		padding: 1vh 0;
		border-radius: 1vh;
		box-shadow: 0.8vh 0.8vh 0.8vh 0 rgba(0, 0, 0, 0.5);
	}
	#columns .column {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 16vh;
	}
	#columns .tile {
		font-size: 3vh;
		height: 5vh;
		width: 7vh;
	}
	#columns .letter {
		font-size: 4vh;
		margin-bottom: 1vh;
	}
	.border.top,
	.border.bottom {
		height: 1.5vh;
	}
	.border.right,
	.border.left {
		width: 1.5vh;
	}
	button {
		border-radius: 1vw;
		height: 6.5vw;
		font-size: 4.5vw;
		line-height: 6vw;
		padding: 0 1vw;
		margin: 0 1vw;
		border-bottom-width: 1vw;
	}
	#reset_btn {
		margin-right: 0 3vw;
	}
	.toast {
		padding: 2vw;
		border-radius: 2vw;
		box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 0.5vw 2vw 0 rgba(0,0,0,.2);
		font-size: 4vw;
		margin-top: 2vw;
	}
	.toast.toast-icon {
		padding-left: 8vw;
		background-size: 5vw 5vw;
		background-position: 1.5vw 45%;
	}
}

@media (orientation: landscape) {
	body:before,
	#settings_menu:before {
		height: 100vw;
		width: 100vh;
		transform: rotate(-90deg) translate(-100%);
	}
	#settings_cog {
		width: 6.5vh;
		height: 6.5vh;
	}
	.control_label {
		font-size: 4vh;
	}
	.switch {
		border-radius: 3vh;
		width: 8vh;
		height: 5vh;
		margin-left: 2vh;
	}
	.switch::after {
		border-radius: 3vh;
		width: 3.5vh;
		height: 3.5vh;
		margin: 0.75vh;
	}
	.switch_checked::after {
		transform: translate3d(3.5vh, 0, 0);
	}
	#header {
		border-radius: 1vw;
		padding: 1vh 0;
		box-shadow: 0.8vw 0.8vw 0.8vw 0 rgba(0, 0, 0, 0.5);
	}
	#header .arrow_button {
		width: 6.5vh;
	}
	#header #last_entry #first {
		font-size: 2vw;
		min-width: 7.5vw;
	}
	#header #last_entry #middle {
		font-size: 2.5vw;
		min-width: 9vw;
	}
	#header #last_entry #lst {
		font-size: 3vw;
		min-width: 10.5vw;
	}
	#header #last_entry > * {
		margin: 0 1vw;
	}
	#columns {
		padding: 1vh 0;
		margin-top: 3vh;
		border-radius: 1vw;
		box-shadow: 0.8vw 0.8vw 0.8vw 0 rgba(0, 0, 0, 0.5);
	}
	#columns .column {
		display: grid;
		justify-content: space-evenly;
		align-content: center;
		grid-auto-columns: 5.5vw;
		grid-column-gap: 1vw;
		width: 16vw;
		margin: 0 0.5vw;
	}
	#columns .tile {
		font-size: 3vw;
	}
	#columns .tile:last-child {
		grid-column: 1 / span 2;
	}
	#columns .number {
		margin: calc(4vh - 2vw) 0;
	}
	#columns .letter {
		grid-column: 1 / span 2;
		font-size: 4vw;
		margin-bottom: 1vw;
	}
	.border.top,
	.border.bottom {
		height: 1.5vw;
	}
	.border.right,
	.border.left {
		width: 1.5vw;
	}
	button {
		border-radius: 1vh;
		height: 6.5vh;
		font-size: 4.5vh;
		line-height: 6vh;
		padding: 0 1vh;
		margin: 0 1vh;
		border-bottom-width: 1vh;
	}
	#reset_btn {
		margin-right: 0 3vh;
	}
	.toast {
		padding: 2vh;
		border-radius: 2vh;
		box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 0.5vh 2vh 0 rgba(0,0,0,.2);
		font-size: 4vh;
		line-height: 4.5vh;
		margin-top: 2vh;
	}
	.toast.toast-icon {
		padding-left: 8vh;
		background-size: 5vh 5vh;
		background-position: 1.5vh 45%;
	}
}