html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#wrapper {
  max-height: 100%;
  height: 100%;
  background-color: #eedfb8;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.bordertop {
  width: 100%;
  background-color: #b8d4e0;
  position: absolute;
  top: 0;
  padding-top: 20px;
}

.borderbottom {
  width: 100%;
  background-color: #b8d4e0;
  position: absolute;
  padding-bottom: 20px;
  bottom: 0;
}

.kreis {
  width: 610px;
  height: 610px;
  border-radius: 305px;
  border: 10px solid #fff;
  background-color: #b8d4e0;
  position: absolute;
  top: calc(50% - 305px);
  left: calc(50% - 305px);
}

.kreis02 {
  width: 610px;
  height: 610px;
  border-radius: 305px;
  border: 10px solid #fff;
  background-color: transparent;
  - webkit-animation: turner 3s infinite linear;
  animation: turner 3s infinite linear;
  position: absolute;
  z-index: 1;
  top: calc(50% - 305px);
  left: calc(50% - 305px);
}

.kreis03 {
  width: 610px;
  height: 610px;
  border-radius: 305px;
  border: 10px solid #fff;
  background-color: transparent;
  -webkit-animation: turner 5s infinite linear;
  animation: turner 5s infinite linear;
  position: absolute;
  z-index: 2;
  top: calc(50% - 305px);
  left: calc(50% - 305px);
}

.kreis04 {
  width: 610px;
  height: 610px;
  border-radius: 305px;
  border: 10px solid #fff;
  background-color: transparent;
  -webkit-animation: turner 4s infinite linear;
  animation: turner 4s infinite linear;
  position: absolute;
  z-index: 3;
  top: calc(50% - 305px);
  left: calc(50% - 305px);
}

.myname {
  font-family: Open Sans !important;
  font-weight: 400;
  font-size: 4.5em;
  position: absolute;
  z-index: 4;
  top: calc(50% - 35px);
  left: calc(50% - 405px);
}

@media only screen and (max-width: 890px) {
  .myname {
    font-size: 3.5em;
    left: calc(50% - 307px);
  }
}

@media only screen and (max-width: 680px) {
  .myname {
    font-size: 2.5em;
    left: calc(50% - 220px);
  }
  .kreis {
    width: 410px;
    height: 410px;
    border-radius: 205px;
    top: calc(50% - 205px);
    left: calc(50% - 205px);
  }
  .kreis02 {
    width: 410px;
    height: 410px;
    border-radius: 205px;
    top: calc(50% - 205px);
    left: calc(50% - 205px);
  }
  .kreis03 {
    width: 410px;
    height: 410px;
    border-radius: 205px;
    top: calc(50% - 205px);
    left: calc(50% - 205px);
  }
  .kreis04 {
    width: 410px;
    height: 410px;
    border-radius: 205px;
    top: calc(50% - 205px);
    left: calc(50% - 205px);
  }
}

@media only screen and (max-width: 480px) {
  .myname {
    font-size: 2.0em;
    top: calc(50% - 10px);
    left: calc(50% - 170px);
  }
  .kreis {
    width: 210px;
    height: 210px;
    border-radius: 105px;
    top: calc(50% - 105px);
    left: calc(50% - 105px);
  }
  .kreis02 {
    width: 210px;
    height: 210px;
    border-radius: 105px;
    top: calc(50% - 105px);
    left: calc(50% - 105px);
  }
  .kreis03 {
    width: 210px;
    height: 210px;
    border-radius: 105px;
    top: calc(50% - 105px);
    left: calc(50% - 105px);
  }
  .kreis04 {
    width: 210px;
    height: 210px;
    border-radius: 105px;
    top: calc(50% - 105px);
    left: calc(50% - 105px);
  }
}

@media only screen and (max-width: 395px) {
  .myname {
    font-size: 1.5em;
    left: calc(50% - 128px);
  }
}

@media only screen and (max-width: 300px) {
  .myname {
    font-size: 1.0em;
    top: calc(50% - 7px);
    left: calc(50% - 83px);
  }
}

@keyframes turner {
  0% {
    -webkit-transform: rotate3d(1, 1, 1, 0deg);
    -ms-transform: rotate3d(1, 1, 1, 0deg);
    -o-transform: rotate3d(1, 1, 1, 0deg);
    transform: rotate3d(1, 1, 1, 0deg);
  }
  50% {
    webkit-transform: rotate3d(1, 1, 1, 180deg);
    -ms-transform: rotate3d(1, 1, 1, 180deg);
    -o-transform: rotate3d(1, 1, 1, 180deg);
    transform: rotate3d(1, 1, 1, 180deg);
  }
  100% {
    -webkit-transform: rotate3d(1, 1, 1, 360deg);
    -ms-transform: rotate3d(1, 1, 1, 360deg);
    -o-transform: rotate3d(1, 1, 1, 360deg);
    transform: rotate3d(1, 1, 1, 360deg);
  }