bits-rs/index.scss

body {
	background: linear-gradient(to bottom right, bisque, hsl(24, 57%, 70%));
	height: 100vw;
	margin: 0;
}


#bytes_in {
	text-align: center;
	border: 0px;
	font-size: 56px;
	font-family: 'Cute Font';
	filter: sepia(100%);
	border-radius: 10px;
	background-color: #eeeeee;
}

#input_box {
	filter:
		// drop-shadow(5px 5px red)
		sepia(100%) //  drop-shadow(-5px -5px hsl(24, 27%, 40%))
		drop-shadow(10px 10px 10px 10px hsl(24, 27%, 40%));
	height: 150px;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
}

.bit {
	color: blue;
	font-weight: 200;
	font-size: 80px;
	cursor: pointer;
}

th {
	background-color: bisque;
}

th:nth-child(odd) {
	background-color: burlywood;
}


#bit_wrap table:nth-of-type(even) {
	margin-left: 5px;
	margin-bottom: 5px;
	margin-right: 0px;
}

#bit_wrap table:nth-of-type(odd) {
	margin-left: 0px;
	margin-bottom: 5px;
	margin-right: 5px;
}

table {
	width: 45%;
}

#activated_ext {
	display: flex;
	flex-wrap: wrap;
	flex-basis: content;
	justify-content: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	text-align: center;
	border: 0px;
	font-size: 36px;
	font-family: 'Cute Font';

	background: -webkit-linear-gradient(hsl(24, 27%, 40%), hsl(24, 27%, 50%));
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#activated_wrap {
	display: flex;
	flex-wrap: wrap;
	flex-basis: content;
	justify-content: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	text-align: center;
	border: 0px;
	font-size: 36px;
	font-family: 'Cute Font';

	background: -webkit-linear-gradient(hsl(24, 27%, 40%), hsl(24, 27%, 50%));
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


#bit_wrap {
	filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px hsl(24, 27%, 40%));

	display: flex;
	flex-wrap: wrap;
	flex-basis: content;
	justify-content: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
}

#activated {
	text-wrap: balance;
	font-weight: bold;
	font-size: 64px;
	color: grey;
	word-wrap: break-word;

	text-align: center;
	/* width: 90vw; */
}

#activated_text {
	font-weight: bold;
	text-align: center;
	font-size: 32px;
}

.bit:hover {
	filter: brightness(85%) saturate(150%);
}

.header {
	font-size: x-large;
}