.breathing-exercises-box {
    border: 2px solid #000;
    padding: 10px;
    margin: 10px;
    background-color: transparent;
    width: calc(100% - 24px);
    box-sizing: border-box;
    border-radius: 10px;
    position: relative; /* Added so the ::before pseudo-element is positioned relative to this box */
    text-align: center; /* Centers the content inside */
}

.breathing-exercises-box::before {
    content: "\f019"; /* Unicode for the Font Awesome icon */
    font-family: "Font Awesome 5 Free"; /* Specify the Font Awesome font family */
    font-weight: 900; /* This might be needed depending on the specific version/style of Font Awesome you're using */
    font-size: 5em;
    opacity: 0.5;
    display: block; /* Will make it behave like a block element */
    margin-bottom: 10px; /* Space between the icon and the content below */
}
    .breathing-button {
        display: inline-block;
        background-color: #FFFFFF;
        color: #000000;
        padding: 15px 20px;
        border: 2px solid black;
        border-radius: 5px;
        font-weight: bold;
        text-decoration: none;
        cursor: pointer;
        margin: 10px;
    }