*{
	font-family: oswald;
  margin: 0;
	border: 0;
	padding: 0;
	color: white;
}

html{
  background-color: #000000;
}

.ptable table{
	margin: 30px auto;
	border-collapse: collapse;
}

.ptable{
	margin: 0px 0% 30px 0%;
}

th, td {
    padding: 10px;
}

th{
	background-color: black;
	color: #ffe221;
}

.headin{
	text-align: center;
	text-decoration: none;
	color: #ffe221;
	margin: 30px;
	display: block;
}

.wpos{
	text-align: center;
}

.wpos td{
	color: #77ff21;
}

.pos{
	text-align: center;
}

.pos td{
	color: #ff7b21;
}

table .col{
	border-bottom: 1px solid #FFFFFF;
}

.wpos:hover{
	background-color: #77ff21;
}

.wpos:hover td{
	color: #000000;
}

.pos:hover{
	background-color: #77ff21;
}

.pos:hover td{
	color: #000000;
}

<!-- SPINNING CUBE CODE -->

.wrap{
	margin-top: 200px;
	margin-bottom: 80px;
	perspective: 1000px;
	perspective-origin: 50% 50%;
}
.cube {
  margin: auto;
  position: relative;
  height: 200px;
  width: 200px;
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.cube div {
  position: absolute;
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  width: 100%;
  border: solid 1px #c0c0c0;
  color: #c0c0c0;
}
.front {
  transform: translateZ(100px);
  -ms-transform: translateZ(100px);
  -webkit-transform: translateZ(100px);
  background-color:#f8cc0f;
  background: url('LOGO-DATASLAVES.png');
  background-size:100%;
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
  -webkit-transform: translateZ(-100px) rotateY(180deg);
  -ms-transform: translateZ(-100px) rotateY(180deg);
  background-color:#4db849;
  background: url('LOGO-WAVE.png');
  background-size:100%;

}

.right {
  transform: rotateY(-270deg) translateX(100px);
  -ms-transform: rotateY(-270deg) translateX(100px);
  -webkit-transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
  -ms-transform-origin: top right;
  -webkit-transform-origin: top right;
  background-color:#e8483f;
  background: url('LOGO-AVATAR.png');
  background-size:100%;

}

.left {
  transform: rotateY(270deg) translateX(-100px);
  -webkit-transform: rotateY(270deg) translateX(-100px);
  -ms-transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
  -ms-transform-origin: center left;
  -webkit-transform-origin: center left;
  background-color:#ffa6a6;
  background: url('LOGO-CHROME.png');
  background-size:100%;

}

.top {
  transform: rotateX(-270deg) translateY(-100px);
  -webkit-transform: rotateX(-270deg) translateY(-100px);
  -ms-transform: rotateX(-270deg) translateY(-100px);
  transform-origin: top center;
  -ms-transform-origin: top center;
  -webkit-transform-origin: top center;
  background-color:#000;
   background: url('LOGO-KITSUNE.png');
  background-size:100%;

}

.bottom {
  transform: rotateX(270deg) translateY(100px);
  -webkit-transform: rotateX(270deg) translateY(100px);
  -ms-transform: rotateX(270deg) translateY(100px);
  transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  background-color:#53bdeb;
  background: url('LOGO-BALLARINA.png');
  background-size:100%;

}
@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
    -ms-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }

  to {
    transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -webkit-transform: rotateX(360deg) rotateY(360deg);
  }
}

@-webkit-keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
    -ms-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }

  to {
    transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -webkit-transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube {
  animation: rotate 20s infinite linear;
  -webkit-animation: rotate 20s infinite linear;
}