*,:before,:after{box-sizing:border-box}.app{flex-direction:column;justify-content:space-evenly;align-items:center;height:100vh;display:flex}@media (width>=1024px){.app{flex-direction:row}}:root{--color-button:white;--color-rain:#4972a1;--color-beach:#a14f49}.time-select{flex-direction:row;flex:1;justify-content:space-evenly;align-items:center;width:100%;display:flex}.time-select button{color:var(--color-button);border:2px solid var(--color-button);cursor:pointer;background:0 0;border-radius:5px;padding:10px;font-size:15px;transition:all .5s}.time-select button:hover{color:#000;background:var(--color-button)}.sound-picker{flex-direction:row;flex:1;justify-content:space-evenly;align-items:center;width:100%;display:flex}.sound-picker button{color:var(--color-button);cursor:pointer;border:none;border-radius:50%;width:120px;height:120px;padding:10px;transition:all .5s}.sound-picker button img{height:100%}.sound-picker button#rain{background:var(--color-rain)}.sound-picker button#beach{background:var(--color-beach)}.player-container{flex-direction:row;flex:1;justify-content:space-evenly;align-items:center;width:100%;display:flex;position:relative}.player-container button{cursor:pointer;background:0 0;border:none;justify-content:center;width:100%;display:flex}.player-container button img{width:45%}.player-container button .play-image{display:block}.player-container button .pause-image,.player-container button.playing .play-image{display:none}.player-container button.playing .pause-image{display:block}.player-container svg{pointer-events:none;height:70%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}.time-display{color:#fff;font-size:20px;position:absolute;bottom:0}.vid-container{z-index:-10;min-width:100%;height:100%;position:fixed;top:0%;left:0%}.vid-container video{min-width:100%;height:100%}@media (width>=1024px){.time-select{flex-direction:column;height:80%}.time-select button{padding:20px;font-size:15px}.sound-picker{flex-direction:column;height:80%}.sound-picker button{padding:20px;font-size:15px}.player-container{flex-direction:column;height:80%}.player-container img{width:50%}}