body {
  background-color: #7d84ff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#7d84ff), color-stop(#9095f9), color-stop(#979ae7), color-stop(#9095f9), to(#7d84ff));
  background-image: linear-gradient(#7d84ff, #9095f9, #979ae7, #9095f9, #7d84ff);
  margin-top: 6.5%;
  line-height: 1.6;
  font-size: 90%;
  margin-left: 0;
  padding: 18vh 1rem;
  font-family: -apple-system, "futuristic_armour";
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.container {
  margin-top: 80px;
  margin-left: -25px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: -apple-system, "aero_03";
  font-size: 110%; }

.container div {
  width: 50px;
  height: 50px;
  margin-right: 100px;
  background-color: #2754a1;
  position: absolute;
  border-radius: 50%;
  border: 1px solid black;
  left: 50%;
  top: 50% margin-25px; }

.container div:hover {
  background-image: radial-gradient(#3263b8, #5678b4, #8da2c5); }

.container div:nth-child(1) {
  -webkit-transform: rotate(0deg) translate(115px) rotate(0deg);
          transform: rotate(0deg) translate(115px) rotate(0deg); }

.container div:nth-child(2) {
  -webkit-transform: rotate(72deg) translate(115px) rotate(-72deg);
          transform: rotate(72deg) translate(115px) rotate(-72deg); }

.container div:nth-child(3) {
  -webkit-transform: rotate(144deg) translate(115px) rotate(-144deg);
          transform: rotate(144deg) translate(115px) rotate(-144deg); }

.container div:nth-child(4) {
  -webkit-transform: rotate(216deg) translate(115px) rotate(-216deg);
          transform: rotate(216deg) translate(115px) rotate(-216deg); }

.container div:nth-child(5) {
  -webkit-transform: rotate(288deg) translate(115px) rotate(-288deg);
          transform: rotate(288deg) translate(115px) rotate(-288deg); }

#interactive {
  margin-top: 8px; }

#blog {
  margin-top: 8px; }

#changelog {
  margin-top: 8px; }

#works {
  margin-top: 7px; }

#games {
  margin-top: 5px; }

p {
  text-align: center; }

/* 600px, 601px, 768px, 992px */
@media (max-width: 600px) {
  body {
    width: 100%; }
  .container {
    padding-top: 120px; } }

@media (max-width: 601px) {
  body {
    width: 100%; }
  .container {
    padding-top: 120px; } }

@media (max-width: 768px) {
  body {
    width: 100%; }
  .container {
    padding-top: 120px; } }

@media (max-width: 992px) {
  body {
    width: 100%; }
  .container {
    padding-top: 120px; } }