@keyframes expand {
  
  from {padding: 4px;}
  to {padding: 8px;}
  
}
@keyframes shrink {
  
  from {padding: 8px;}
  to {padding: 4px;}
  
}
* {

  padding: 0px;
  margin: 0px;
  
} 
*[pusab] {
  font-family: pusab;
  font-size: 20px;
  color: rgba(255,255,255,1);
  opacity: 1;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  
}
*[gold] {
  
  color: rgba(255,200,0,1);
  padding: 10px;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  
}
*[bigger] {
  
  font-size: 48px;
  
}
*[big] {
  
  font-size: 36px;
  
}
*[normal] {
  
  font-size: 24px;
  -webkit-text-stroke-width: 1px;
  
}
*[small] {
  
  font-size: 16px;
  
}
body {
  
  text-align: center;
  background-size: cover;
  background: linear-gradient(#0065FD, #002E73);
  background-attachment: fixed;
  min-height: 100%;
  
}
button {
  
  animation-name: shrink;
  animation-duration: 1s;
  border-radius: 12px;
  background: linear-gradient(#C7FC53, #46A20B);
  border-color: #fff;
  border-width: 2.5px;
  cursor: pointer;
  box-shadow: 0px 0px 0px 2.5px #000 inset;
  margin: 8px;
  padding: 4px;
  
}
button:active {
  
  animation-name: expand;
  animation-duration: 0.5s;
  padding: 8px;
  
}
img[icon] {
  
  margin: -3px;
  
}
img[cube] {
  
  margin-right: -3px;
  
}
msg {
  
  display: none;
  opacity: 1;
  
}
msg[activated=true] {

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  border-radius: 12px;
  background: rgba(0,0,0,0.5);
  
}
div[levels] {
  
  border: 2.5px solid white;
  border-radius: 4px;
  background: linear-gradient(#C7FC53, #46A20B);
  box-shadow: 0px 0px 0px 2.5px #000 inset;
  padding: 16px;
  overflow: auto;
  max-height: 100%;
  display: block;
  display: inline-block;
  
}
div[level] {
  
  text-align: left;
  padding: 8px;
  
}
div[level][top] {
  
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  
}
div[level][bottom] {
  
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  
}
div[level][a] {
  
  background: #A1582C;
  
}
div[level][b] {
  
  background: #C1743F;
  
}
img[side] {
  
  margin: 10px;
  width: 100px;
  height: 100px;
  float: left;
  padding: 10px;
  
}
@keyframes ex {
  from {width: 0%; height:0%;}
  to {width: 75%; height:75%;}
}
menu {
  
  background-color: #001931;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 75%;
  height: 75%;
  border-radius: 8px;
  border:2.5px solid #fff;
  padding: 20px;
  display: block;
  overflow: scroll;
  transform: translate(-50%, -50%);
  
}
*[arial] {
  
  font-family: arial;
  color: white;
  font-size: 24px;
  -webkit-text-stroke-width: 0px;
  
}
*[arial] color[blue] {
  
  color: aqua;
  -webkit-text-stroke-width: 0px;
  
}
*[arial] color[gold] {
  
  color: yellow;
  -webkit-text-stroke-width: 0px;
  
}
*[arial] color[lime] {
  
  color: lime;
  -webkit-text-stroke-width: 0px;
  
}
@keyframes a {
  
  from {padding: 1.5%;}
  to {padding: 1%;}
  
}
@keyframes b {
  
  from {padding: 1%;}
  to {padding: 1.5%;}
  
}
info {
  
  animation-name: a;
  animation-duration: 0.5s;
  transform: translate(50%, -50%);
  background-image: url(info.png);
  background-size: cover;
  padding: 1%;
  
}
info:active {
  
  animation-name: b;
  animation-duration: 1s;
  transform: translate(50%, -50%);
  padding: 1.5%;
  
}
menu[show=true] {
  
  animation-name: ex;
  animation-duration: 0.5s;
  visibility: visible;
  
}
menu[show=false] {
  
  visibility: hidden;
  
}