<h1>focused breathing</h1>
    <main>
        <div></div>
    </main>
      <p>breath in through the nose as the circle expands <br>
          hold, and release through the mouth as it contracts. <br> repeat as needed.</p>  
: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
}

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);
 }   
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.