body  {
  background-color: #1E1E1E;
  padding: 50px;
  font-family: 'Source Code Pro', monospace;
  font-size: 12px;
  font-weight: 200;
  color: white;
}

a {
  color: white;
}

h1 {
  font-family: 'BhuTuka Expanded One', cursive;
  font-size: 16pt;
  color: white;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.disc1 {
  position: absolute;
  top:0;
  bottom: 0;
  left: 500px;
  right: 0;
  margin: auto;
  rotate: 7deg;
  width: 400px;
  height: 400px;
  z-index: 2;
}

.disc1:hover {
  z-index: 3;
  margin: auto;
  width: 500px;
  height: 500px;
  rotate: 0deg;
}

.disc2 {
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  rotate: 2deg;
  width: 400px;
  height: 400px;
  z-index: 1;
}

.disc2:hover {
  z-index: 3;
  width: 500px;
  height: 500px;
  rotate: 0deg;
}

.disc3 {
  position: absolute;
  top:0;
  bottom: 0;
  left: -300px;
  right: 0;
  margin: auto;
  rotate: -7deg;
  width: 400px;
  height: 400px;
  z-index: 0;
}

.disc3:hover {
  z-index: 3;
  width: 500px;
  height: 500px;
  rotate: 0deg;

}

.drag {
  font-family: 'Source Code Pro', monospace;
  font-size: 12px;
  font-weight: 200;
  position: absolute;
  top:100px;
  left: 200px;
  right: 0;
  visibility: hidden;
  z-index: 4;
}

.container {
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  rotate: 3deg;
  transform: skewX(10deg);
}

@media (max-width: 768px) {
  .disc1 {left: 0px; rotate: 0deg;}
  .disc2 {left: 0px; rotate: 0deg;}
  .disc3 {left: 0px; rotate: 0deg;}
  body {background-color: #601818;}
  .drag {visibility: visible;}
}

.back {
  position: fixed;
  margin-bottom: 5px;
  margin-left: 5px;
    bottom: 0;
    left: 0;
    color: white;
    font-size: 12pt;
    font-family: 'Source Code Pro', monospace;
    text-decoration: underline;
}