@font-face {
	font-family: 'Uni Sans';
	src: url(fnt/unisans-heavy.otf);
	font-weight: bold;
	font-weight: 600;
}
@font-face {
	font-family: 'Wii';
	src: url(fnt/wiifont.ttf);
	font-weight: 600;
}
* {
	margin: 0;
	cursor: url('img/wii-cursor.png'), default;
	padding: 0;
	overflow: hidden;
}
body {
	background: linear-gradient(135deg, #b2bfd8 0%,#dee1e2 50%,#b2bfd8 100%);
    background-size:     100% 100%;
    background-repeat:   no-repeat;
    background-position: center;  
	color: #FFF;
	text-decoration: none;
	font-family: 'Uni Sans';
	font-weight: 300;
	font-size: 25pt;
	cursor: url('img/wii-cursor.png'), default;
}
a {
	color: #FFF;
	text-decoration: none;
	cursor: url('img/wii-cursor.png'), default;
}
canvas {
	width: 22%;
	height: 22%;
}

html {height: 100%;}

#savebutton,#resetbutton {
	font-family: 'Uni Sans';
	font-weight: 300;
	font-size: 25pt;
	color: #02090a;
	width: 40%;
	height: 100%;
	margin: 1% 1%;
	padding: 9px;
	display: inline-block;
	line-height: 100%;
	background: rgba(217,236,237,0.5);
	border-radius: 10px;
	border: 2px solid #72cada;
}

#interface {
	margin: 1%;
	width: 75%;
	height: 100%;
	display: inline-block;
	background: rgba(217,236,237,0.3);
	border-radius: 10px;
	border: 2px solid #72cada;
	float: left;
}

#canvas {
	display:inline-block;
    margin: 12.5% auto;
    padding: 0;
	float: left;
    vertical-align: middle;
	height: 100%;
}

.category {
	display: none;
	text-align: center;
	transition: 0.2s;
}

.tab-button {
	width: 96px;
	height: 64px;
	margin: 1% 1%;
	padding: 0px;
	display: inline-block;
	line-height: 100%;
	background: rgba(217,236,237,0.5);
	border-radius: 10px;
	border: 2px solid #72cada;
	transform: scale(0.9);
	transition: 0.2s;
}

.tab-button:hover {
	transform: scale(1.1);
	transistion: 0.1s;
}

.tab-button:active {
	transform: scale(1.25);
}

button {
	width: 64px;
	height: 64px;
	margin: 1% 0.1%;
	padding: 0px;
	display: inline-block;
	line-height: 100%;
	background: rgba(237,245,255,0.9);
	border-radius: 5px;
	border: 2px solid #72cada;
	transform: scale(0.9);
	transition: 0.2s;
}

button:hover {
	transform: scale(1);
	transistion: 0.1s;
}

button:active {
	transform: scale(1.16);
}

button:focus {outline:0;}

hr {
	border-radius: 30px;
  border: 0; 
  height: 4px; 
  background-image: -webkit-linear-gradient(left, rgba(238,238,238,0), rgba(114,137,218,0.9), rgba(238,238,238,0));
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }

@keyframes hover {
    0% {transform: scale(0.9);}
	100% {transform: scale(1.0);}
}