html,
body {
  height: 100%;
  font-family: 'Futura', san-serif;
}

body {
  /* background-image: url('https://images.unsplash.com/photo-1471623963279-63bd05df0421?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop='); */
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #fff;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent {
  position: relative;
  width: 100%;
  height: 100%;
}

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

/* 
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
} */

.spinner-square {
  display: flex;
  flex-direction: row;
  width: 90px;
  height: 120px;
}

.spinner-square>.square {
  width: 17px;
  height: 80px;
  margin: auto auto;
  border-radius: 4px;
}

.square-1 {
  animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
}

.square-2 {
  animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite;
}

.square-3 {
  animation: square-anim 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite;
}

@keyframes square-anim {
  0% {
    height: 80px;
    background-color: rgb(111, 163, 240);
  }

  20% {
    height: 80px;
  }

  40% {
    height: 120px;
    background-color: rgb(111, 200, 240);
  }

  80% {
    height: 80px;
  }

  100% {
    height: 80px;
    background-color: rgb(111, 163, 240);
  }
}

#logo-img{
  padding-bottom: 10%;
}