#breth .container { position: relative;width: 300px;height: 300px;}
#breth .breathing-circle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px; border-radius: 50%;opacity: 0.7;transition: width 6s ease-in-out, height 6s ease-in-out; /* Tranziție pe toate stările */ z-index: 1;}
#breth .breathing-circle.expand {width: 250px;height: 250px;}
#breth .breathing-circle.contract {width: 100px; height: 100px;}
#breth .breathing-circle.ripple {animation: ripple 2s linear infinite;}
@keyframes ripple {0% {box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.5); /* Culoarea si opacitatea ripple-ului */}
100% {box-shadow: 0 0 0 20px rgba(52, 152, 219, 0);}}
#breth .breathing-circle.hold {width: 220px; height: 220px;}
#breth .button {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 80px;height: 80px;border-radius: 50%;color: white;font-size: 14px;font-weight: bold;display: flex;justify-content: center;align-items: center;cursor: pointer; z-index: 2; /* Sa fie deasupra cercului */user-select: none;transition: background-color 0.3s ease, transform 0.3s ease-in-out;}


#breth .button:hover {background-color: rgba(0,0,0,0.6);}
#breth .button.fading {color:rgba(255,255,255,.5);}
#breth .fading span{color:rgba(255,255,255,.0);}
#breth .button span {transform:translateY(-3px);transition:color .5s ease, transform  .3s ease;}
#breth  #patternSelect {margin-bottom: 20px;padding: 8px;font-size: 14px;border-radius: 5px;}
#breth .container{display: flex;flex-direction: column;align-items: center;}
#breth .xselecontainer{display: flex;flex-direction: row;align-items: center;gap:10px;margin-bottom:20px;}
#breth .xselecontainer input[type="radio"]{width:20px;height:20px}

#breth .style-1{background: rgb(255,19,208);background: -moz-radial-gradient(circle, rgba(255,19,208,1) 0%, rgba(99,218,255,1) 100%);background: -webkit-radial-gradient(circle, rgba(255,19,208,1) 0%, rgba(99,218,255,1) 100%);background: radial-gradient(circle, rgba(255,19,208,1) 0%, rgba(99,218,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff13d0",endColorstr="#63daff",GradientType=1);}
#breth .style-2 {background: rgb(45,55,73);
background: -moz-radial-gradient(circle, rgba(45,55,73,0) 30%, rgba(6,68,97,0.6704698236716562) 53%, rgba(45,55,73,0) 98%);background: -webkit-radial-gradient(circle, rgba(45,55,73,0) 30%, rgba(6,68,97,0.6704698236716562) 53%, rgba(45,55,73,0) 98%);background: radial-gradient(circle, rgba(45,55,73,0) 30%, rgba(6,68,97,0.6704698236716562) 53%, rgba(45,55,73,0) 98%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d3749",endColorstr="#2d3749",GradientType=1);}
#breth .style-3 {background:rgba(0,0,0,0.1);border:1px solid #D5C58E;}
#breth .stylebutton-1,#breth .stylebutton-1:hover{opacity:.6;}

#breth .stylebutton-2,#breth .stylebutton-2:hover {background: rgba(255,19,208,0.2);box-shadow:0 0 0 rgba(0,0,0,0,0.0);opacity:.6;}
#breth .stylebutton-3,#breth .stylebutton-3:hover {background: rgba(0,51,102,0.5);border:1px solid #000;box-shadow:0 0 0 rgba(0,0,0,0,0.0);opacity:.6;}