@media only screen and (max-width: 700px) {
  .avatar {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
  }

  .uncolapsed {
    width: 100%;
  }

  .visible {
    position: absolute;
    left: 50%;
    top: 330px;
    transform: translate(-50%, -50%);
  }

  .sidebar hr {
    width: 60%;
  }

  .sidebar ul {
    margin-top: 7%;
  }

  .sidebar li span {
    top: 50px;
  }

  .sidebar a {
    margin-top: 25px;
  }

  .sidebar .icon {
    margin-right: 3%;
    margin-left: 35%;
  }

  .my-world {
    position: absolute;
    transform: rotate(0deg);

    text-align: center;
    top: 55%;
    left: none;
  }

  .my-world h1 {
    display: none;
  }

  .my-world span {
    color: #6699ff;
  }

  .my-world p {
    color: #cccccc;
    margin-top: 60px;
    text-align: center;
    margin-left: -80%;
  }
}

@media only screen and (max-width: 1100px) {
  .portfolio-wrapper {
    height: 400px !important;
  }

  .projekte-grid {
    grid-template-columns: auto auto;
  }

  .blog-grid {
    grid-template-columns: auto auto;
  }

  .footer-socialmedia {
    display: none !important;
  }

  .footer-links {
    position: relative;
    width: 20%;
    left: 45%;
    width: 10%;
  }
}

@media only screen and (max-width: 800px) {
  .portfolio-wrapper p {
    width: 90%;
  }

  .server-wrapper {
    height: 550px;
  }

  .server-wrapper p {
    width: 70%;
  }

  .server-index {
    display: block;
  }

  .server-index:last-child {
    margin-left: 0px;
    margin-top: 50px;
  }

  .server-index .server-led {
    width: 10%;
    left: 50%;
  }
}

@media only screen and (max-width: 750px) {
  .projekte-grid {
    grid-template-columns: auto;
  }

  .blog-grid {
    grid-template-columns: auto;
  }
}

@media only screen and (max-width: 700px) {
  .server-index .server-led {
    left: 50.4%;
  }
}

@media only screen and (max-width: 660px) {
  .server-index .server-led {
    left: 50.7%;
  }
}

@media only screen and (max-width: 610px) {
  .server-index .server-led {
    left: 51%;
  }
}

@media only screen and (max-width: 570px) {
  .portfolio-wrapper {
    height: 450px !important;
  }

  .server-index .server-led {
    left: 51.7%;
  }
}

@media only screen and (max-width: 465px) {
  .portfolio-wrapper {
    height: 550px !important;
  }

  .avatar h1 {
    font-size: 1.5em;
  }

  .avatar .name {
    margin-left: 10px;
  }

  .server-index .server-led {
    left: 53.5%;
  }
}

@media only screen and (max-width: 350px) {
  .portfolio-wrapper {
    height: 650px !important;
  }

  .server-index .server-led {
    left: 55.7%;
  }
}

/* IMPRESSUM */

@media only screen and (max-width: 700px) {
  .impressum {
    left: -20%;
  }

  .thats-me {
    margin-left: 120px;
  }
}