style.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background: linear-gradient(to bottom, #87CEFA, #FFB6C1); /* Light blue to light pink */
    height: 100vh; /* Occupy full viewport height */
    padding: 0;
    margin: 0;
    overflow: hidden; /* Prevent scrollbars */
}

.breathing-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Full viewport height */
}

.breathing-box {
    width: 100px;
    height: 100px;
    background-color: #4682B4; /* Steel blue */
    border-radius: 50%; /* Circular shape */
    border: 5px solid transparent; /* Transparent base border */
    position: relative;
    animation: breathing-cycle 19s; /* 19-second cycle */
}

.breathing-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    font-size: 20px;
    color: white; /* White text for contrast */
}

#restart-button {
    display: none;
    margin: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

@keyframes breathing-cycle {
    0% {
        transform: scale(1);
        border-color: #4682B4; /* Border color for inhale */
    }
    21.05% {
        transform: scale(3); /* Inhale */
    }
    57.89% {
        transform: scale(3); /* Hold */
        border-color: #FFD700; /* Yellow during hold */
    }
    100% {
        transform: scale(1); /* Exhale */
        border-color: #DC143C; /* Red for exhale */
    }
}