body{
  background:#000;
  color:#fff;
  font-family:Arial;
  text-align:center;
}

.logo{
  margin-top:20px;
}

.circle{
  width:60px;height:60px;
  border-radius:50%;
  background:red;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:auto;
  font-weight:bold;
}

.cube-container{
  perspective:800px;
  margin-top:40px;
}
.cube{
  width:150px;height:150px;
  margin:auto;
  position:relative;
  transform-style:preserve-3d;
  animation:spin 5s linear infinite;
}
.face{
  position:absolute;
  width:150px;height:150px;
  background:#111;
  border:2px solid #0ff;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:24px;
}
.front{transform:translateZ(75px);}
.back{transform:rotateY(180deg) translateZ(75px);}
.left{transform:rotateY(-90deg) translateZ(75px);}
.right{transform:rotateY(90deg) translateZ(75px);}
.top{transform:rotateX(90deg) translateZ(75px);}
.bottom{transform:rotateX(-90deg) translateZ(75px);}

@keyframes spin{
  from{transform:rotateX(0) rotateY(0);}
  to{transform:rotateX(360deg) rotateY(360deg);}
}

.card{
  margin-top:50px;
  padding:20px;
  border:1px solid #0ff;
  border-radius:10px;
  width:80%;
  margin-left:auto;
  margin-right:auto;
}