.container p,.settings,.timer{margin-bottom:2rem}.container p,.timer,h1,label{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#start,select{background-color:#fff}#start,body{display:flex;padding:1rem}#streak,.guide-content strong,.quote h2,h1{font-weight:700}#start:hover,.close-button.bottom{background-color:#f0f0f0}body{background-image:url('../img/background.jpg');background-size:cover;background-position:center;align-items:center;justify-content:center;min-height:100vh;margin:0;font-family:Arial,sans-serif}.container{text-align:center;max-width:100%;width:100%;padding:2rem;border-radius:1rem}h1{font-size:3rem;margin-bottom:1rem}.container p{font-size:1.25rem}.quote h2,label{font-size:1.25rem;margin-bottom:.5rem}.timer{font-size:6rem;font-family:monospace}.settings{display:flex;flex-direction:column;justify-content:center;align-items:center}.ambient-sound-select,.duration-select{width:100%;max-width:300px;margin-bottom:1rem}.ambient-sound-volume-row{display:flex;justify-content:center;align-items:center;width:100%;max-width:300px}.ambient-sound-select{flex:1;margin-right:1rem}.volume-control{flex:1}label{display:block}select{width:100%;padding:.5rem;border-radius:.5rem;border:1px solid #ccc}input[type=range]{-webkit-appearance:none;width:100%;height:10px;border-radius:5px;background:#ddd;outline:0;opacity:.7;transition:opacity .2s;margin-top:10px}input[type=range]:hover{opacity:1}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#4caf50;cursor:pointer}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#4caf50;cursor:pointer}#start{font-size:2rem;width:60px;height:60px;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 1.5rem;color:#333;border:none;cursor:pointer;transition:background-color .3s;box-shadow:0 4px 6px rgba(0,0,0,.1)}#quote,#streak{font-size:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.5);color:#fff}#start.stop-button{font-size:1.5rem}.play-icon{display:inline-block;position:relative;left:3px;top:1px}.quote{margin-bottom:1.5rem}.quote h2{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#quote{font-style:italic}#readMoreLink{color:#fff;text-decoration:underline}#readMoreLink:hover{color:#ccc}.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:999;overflow-y:auto;padding:20px;box-sizing:border-box}.overlay-content{background-color:#fff;max-width:100%;margin:20px auto;padding:30px;border-radius:8px;position:relative;text-align:left;box-sizing:border-box}.overlay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.overlay-header h2{margin:0}.guide-content{line-height:1.6}.guide-content h3{margin-top:30px;margin-bottom:15px}.guide-content p{margin-bottom:20px;color:#333;text-shadow:none}.guide-content ol,.guide-content ul{margin-left:30px;margin-bottom:20px}.guide-content ol li,.guide-content ul li{margin-bottom:10px}.close-button{position:absolute;top:10px;right:10px;font-size:36px;background:0 0;border:none;cursor:pointer;color:#888;transition:color .3s;z-index:1000}.close-button:hover{color:#333}.close-button.bottom{position:static;display:block;margin:20px auto 0;font-size:24px;padding:5px 10px;border-radius:4px}.close-button.bottom:hover{background-color:#e0e0e0}.completion-message{background-color:rgba(0,0,0,.8);color:#fff;font-size:1.2rem;padding:1rem;border-radius:.5rem;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;display:none;text-align:center;max-width:90%}.show-completion-message{display:block}@media screen and (max-width:600px){h1{font-size:2rem}.container p{font-size:1.2rem}.timer{font-size:4rem}.settings{flex-direction:column}select{padding:1rem}.ambient-sound-volume-row{flex-direction:column;align-items:flex-start}.ambient-sound-select{margin-right:0;margin-bottom:1rem}.volume-control{width:100%}#start{font-size:1.5rem;width:50px;height:50px}#start.stop-button{font-size:1.25rem}.overlay{padding:10px}.overlay-content{padding:20px}.close-button{font-size:24px;top:5px;right:5px}.completion-message{font-size:1rem;padding:.8rem}}