html {
  box-sizing: border-box;
}

html * {
  box-sizing: inherit;
}

body {
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #212121;
}

.container {
  width: 50vmin;
  height: 50vmin;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #387fc1;
  border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;
  border-color: #2d6599;
  border-style: solid;
  border-top-width: 4.1666666667vmin;
  border-right-width: 2.0833333333vmin;
  border-bottom-width: 2.0833333333vmin;
  border-left-width: 2.0833333333vmin;
  transition: border-width 0.4s cubic-bezier(1, -0.37, 0.21, 1.47), border-radius 0.4s cubic-bezier(1, -0.37, 0.21, 1.47);
  position: relative;
  margin:30px auto;
}
.container::before, .container::after {
  content: '';
  position: absolute;
  width: 50vmin;
  height: 50vmin;
  bottom: -4.1666666667vmin;
  border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%;
  transition: all 0.4s cubic-bezier(1, -0.37, 0.21, 1.47);
}
.container::before {
  left: -4.1666666667vmin;
  border-left: 2.0833333333vmin solid #387fc1;
}
.container::after {
  right: -4.1666666667vmin;
  border-right: 2.0833333333vmin solid #387fc1;
}
.container:hover {
  cursor: pointer;
  border-radius: 50% 50% 50% 50% / 75% 75% 25% 25%;
  border-top-width: 2.0833333333vmin;
  border-bottom-width: 4.1666666667vmin;
}
.container:hover::before, .container:hover::after {
  border-radius: 50% 50% 50% 50% / 75% 75% 25% 25%;
  bottom: -2.0833333333vmin;
}

.arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bounce 1s cubic-bezier(0.71, 0.29, 0.26, 0.78) infinite alternate;
}

.arrow-top {
  background-color: #ececec;
  width: 8.3333333333vmin;
  height: 8.3333333333vmin;
}

.arrow-down {
  box-sizing: border-box;
  height: 8.3333333333vmin;
  width: 16.6666666667vmin;
  border-top: 8.3333333333vmin solid #ececec;
  border-left: 8.3333333333vmin solid transparent;
  border-right: 8.3333333333vmin solid transparent;
}

.line {
  width: 16.6666666667vmin;
  height: 2.0833333333vmin;
  margin-top: 2.0833333333vmin;
  background-color: #ececec;
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1.0416666667vmin);
  }
}