:root {
    --primary-color: lightsteelblue;
    --secondary-color: lightpink;
    --large: 200px;
    --small: 10px;
}

body {
    width: 100vw;
    height: 100vh;
    display: grid;
    overflow: hidden;
    justify-content: center;
    align-content: center;
}

main {
    height: 300px;
    width: 100vw;
    display: grid;
    justify-content: center;
    align-items: center;
}

div{
    background-color: var(--primary-color);
    width: var(--small);
    height: var(--small);
    border-radius: calc( var(--small) / 2);
    display: inline-block;
    animation: breath 8s ease infinite none running;
    background-image: url("GhostWhite.png"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
    background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 80%; /* Resize the background image to cover the entire container */
}

h1,p {
    color: #6E7B8B;
    font-family: "Work Sans", Arial, Helvetica, sans-serif;
    text-align: center;
}

@keyframes breath {
 25%, 50% {
    background-color: var(--secondary-color);
    width: var(--large);
    height: var(--large);
    border-radius: calc( var(--large) / 2);
 }
}