body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 5vw;
  color: #000000;
}
html {
  height: 100%;
  background: #9BE3BF;
}

@import url('https://fonts.googleapis.com/css?family=Work+Sans');

.wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
    box-sizing: border-box;
}
.logo {
  position: relative;
  margin: 10vh auto 0 10vh;
  font-size: 15vw;
}
.logo div {
  position: absolute;
  top: 0;
  left: 0;
}
.circle {
  position: absolute;
  overflow: hidden;
  margin-bottom: 20vh;
  z-index: 1;
  background-color: white;
  border-radius: 30vh;
  width: 60vh;
  height: 60vh;
  max-height: 60vh;
}
.contacts {
  position: fixed;
  bottom: 10%;
  left: 10%;
  z-index: 5;
}
a {
  color: #000000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

@media only screen
  and (max-width: 1024px) {
    .logo {
        width: calc(100% - 40px);
    }
    .circle {
        width: calc(70%);
        height: 70%;
    }
    .contacts {
        bottom: 10vh;
    }
}


@media only screen
  and (max-width: 400px) {
    .logo {
      font-size: 40vw;
    }
    .circle {
      width: 80vw;
      height: 80vw;
      max-height: 80vw;
      border-radius: 40vw;
    }
    .contacts {
      font-size: 6vw;
      bottom: 10vh;
    }
}

@media only screen
  and (max-height: 400px) {
    .logo {
      font-size: 40vh;
    }
    .circle {
      width: 80vh;
      height: 80vh;
      max-height: 80vh;
      border-radius: 40vh;
    }
    .contacts {
      font-size: 4vw;
      bottom: 5%;
      left: 5%;
    }
}