.card {
	/* 16dp — Elevation */
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14);
border-radius: 16px;
text-align: center;
padding: 12px;
margin-top: 28px;
position: relative;
margin-bottom: 8px;
/*width: 100vw;
height: 100vw;*/
}

.card:hover {
	transition: 0.5s;
	box-shadow: 0px 11px 15px rgba(0, 0, 0, 0.4), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14);
}

.spacing {
	margin-top: 0%;
}

.responsive {
  width: 40%;
  height: auto;
}

/* For devices larger than 400px */
@media (min-width: 550px) {
  .card {
  	margin-top: 0px;
  }
  .responsive {
  	width: 50%;
  }
  .centre-mid {
    margin-top: 32vh;
    padding-left: 8px;
  }
}


html {
  align-items: center;
  justify-content: center;
  border: 1px black;
}

/*.blob {
  position: absolute;
  top: 0;
  left: 0;
  fill: #023F92;
  width: 50vmax;
  z-index: -1;
  animation: move 10s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes move {
  0%   { transform: scale(1)   translate(10px, -30px); }
  38%  { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); }
  40%  { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); }
  78%  { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); }
  80%  { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); }
  100% { transform: scale(1)   translate(10px, -30px); }
}*/