body {
    margin-top: 10%;
    background-color: #222;
}

.parent {
  position: relative;
  padding:  0;
  text-align: center;
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

/*
  border-style: solid;
  border-color: coral;
  */
}

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, -50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */
}

.btn_contents {
/* CHILD STUFF */
  font-size: 1.5em;
  font-family: sans-serif;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2.8px;
  background-color: #1b8bf9;
  /* padding: 1em 3.5em; */
  width: 260px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  vertical-align: middle;
  border-radius: 5rem;
  border:0;
  /* box-shadow: 1px 2.9px 16px rgba(27, 139, 249, 0.4); */
  transition: 0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94); 
  margin: 20px auto;
}

.btn_contents:hover {
  /* box-shadow: 3px 4.9px 16px rgba(27, 139, 249, 0.6); */
  letter-spacing: 5px;
}
.btn--clicked {
  transition: 0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94);
  padding: 15px 2px;
  width: 50px;
  color: transparent;
  z-index: -10;
}
  
.img-overlay-wrap {
  position: relative;
  padding: 0px;
  transition: transform 150ms ease-in-out;
  text-align: center;
  height: 250px;
  margin: auto;
}

.img-overlay-wrap .blur{
    width:95%;
    max-width:95%;
    width: 500px; 
    height: 330px; 
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */
    filter: blur(12px);
    -webkit-filter: blur(12px);
}
        
.img-overlay-wrap svg, object, .test {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */
  pointer-events: none;
}       


#loader {
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid #444444;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
}
  
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
  
.center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
        
        
/* this is the old font which is not used
    <link rel='preconnect' href='https://fonts.googleapis.com'>
    <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
    <link href='https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap' rel='stylesheet'> 
    */