*{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none;color:inherit}html{font-size:62.5%}button{border:none;font-family:Noto Sans,serif;font-weight:400}ul{list-style-type:none}body{font-family:Noto Sans,serif;font-size:clamp(1.4rem,2.5vw,1.6rem);background-color:#423e3f;color:#fff}header{width:100%}nav{width:100%;height:7rem;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:1px}main{width:90%;display:flex;align-self:center;justify-self:center;justify-content:space-between;margin-top:5rem}.playlist-generator-text-section{display:flex;flex-direction:column;gap:1.8rem;font-weight:700;max-width:40%}.text-section-welcome{font-size:clamp(1.8rem,2vw,2.7rem)}.text-section-header{font-size:clamp(8rem,8.7vw,11rem);line-height:9.2rem;letter-spacing:-5px}.text-section-span{font-size:clamp(1.5rem,1.7vw,2.1rem);color:#adadad}.playlist-generator-form-section{display:flex;flex-direction:column;align-items:center;justify-content:center}.playlist-generator-form-container{display:flex;align-items:flex-end;gap:7rem;margin-top:2rem}.playlist-generator-form{display:flex;flex-direction:column;align-items:center;gap:.8rem}.playlist-generator-form>label{font-size:2rem;font-weight:700}.playlist-generator-form select{width:100%;padding:14px 34px 14px 25px;font-size:16px;color:#333;background-color:#f9f9f9;border:1px solid #ccc;border-radius:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;transition:border-color .3s ease,background-color .3s ease}.playlist-generator-form select:hover,.playlist-generator-form select:focus{border-color:#888;background-color:#f0f0f0}.playlist-generator-form select:disabled{background-color:#eaeaea;color:#aaa;cursor:not-allowed}.playlist-generator-form{position:relative}.playlist-generator-form:after{content:"▼";position:absolute;right:1.2rem;top:71%;transform:translateY(-50%);pointer-events:none;font-size:12px;color:#666}.playlist-generate-button{width:25rem;height:5rem;border-radius:10px;background-color:#fff;font-size:1.8rem;font-weight:700;color:#423e3f;display:inline-flex;align-items:center;justify-content:center;gap:1rem;cursor:pointer;overflow:hidden;padding-right:4rem}.playlist-generate-button:hover{cursor:pointer;background-color:#423e3f;border:2px solid white;color:#fff}.playlist-generate-button:hover .spinner{border-top:3px solid #ffffff}.error-message-container{color:red;font-weight:700;font-size:2rem}.spinner-container{width:3rem;height:3rem;display:inline-flex;align-items:center;justify-content:center}.spinner{width:3rem;height:3rem;border:3px solid transparent;border-top:3px solid #423E3F;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.playlist-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:#423e3f5b;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3rem}.back-button{position:absolute;top:3rem;right:3rem;background-color:transparent;border:none;cursor:pointer;color:#fff;transition:color .3s ease;font-weight:700;font-size:clamp(1.5rem,1.8vw,2rem)}.back-button-icon{padding-top:.5rem;margin-right:.3rem}.back-button:hover{color:#adadad}.playlist-display{border:2px solid white;min-width:30rem;height:38rem;display:flex;flex-direction:column;align-items:center;gap:1rem;background-color:#fff;padding:3rem 4rem 4rem;border-radius:10px}.playlist-header{font-size:clamp(1.7rem,2vw,2.4rem)}.song-item{display:flex;align-items:center;gap:3rem;width:100%;color:#423e3f}.song-number{font-size:4rem;color:#423e3f;font-weight:900}.song-details{display:flex;flex-direction:column}.song-title{font-size:1.8rem;font-weight:700;color:#423e3f}.song-artist{font-size:1.2rem;font-weight:400;color:#adadad}.warning-message{font-size:1.3rem;color:#ff6f61;font-weight:600;text-align:center}@media (max-width: 1200px) and (min-width: 940px){.playlist-generator-form-container{gap:4rem}.playlist-generate-button{width:23rem;font-size:1.5rem;padding-right:3rem}.playlist-generator-form>label{font-size:1.7rem}.playlist-generator-form select{font-size:1.4rem}.text-section-header{line-height:7.5vw}.playlist-header{margin-top:7rem}.back-button{top:1.5rem}.warning-message{margin-bottom:3rem}}@media (max-width: 939px){main{width:70%;flex-direction:column;gap:6rem;margin-bottom:15rem}.playlist-generator-text-section{max-width:100%}.text-section-header{font-size:clamp(8rem,13vw,12rem);line-height:11vw;letter-spacing:-5px}.text-section-welcome{font-size:clamp(2rem,2.5vw,2.6rem)}.text-section-span{font-size:clamp(1.6rem,3vw,2rem)}.playlist-generator-form-container{gap:4rem;margin-top:2rem}.playlist-generator-form>label{font-size:1.7rem}.playlist-generator-form select{padding:13px 30px 13px 23px;font-size:1.4rem}.playlist-generate-button{width:23rem;height:5rem;font-size:1.6rem;gap:.7rem;padding-right:4rem}.playlist-header{margin-top:3rem}.back-button{top:1.5rem;right:2rem}}@media (max-width: 574px){main{width:85%;margin-top:2rem}.playlist-generator-form-container{gap:2rem}.text-section-header{font-size:8rem;line-height:6.8rem}.text-section-welcome{font-size:1.9rem}.text-section-span{font-size:1.5rem}.playlist-generator-form>label{font-size:1.5rem}.playlist-generator-form select{padding:13px 28px 13px 21px;font-size:1.3rem}.playlist-generate-button{width:21rem;height:5rem;font-size:1.4rem;gap:.5rem;padding-right:4rem}.playlist-display{min-width:20rem;height:31rem;padding:3rem}.playlist-header{font-size:1.6rem}.song-number{font-size:3rem}.song-title{font-size:1.6rem}.song-artist{font-size:1.1rem}.warning-message{font-size:1.1rem;font-weight:600}.playlist-header{text-align:center;margin-inline:1rem}}@media (max-width: 423px){.playlist-generator-form-container{gap:3rem;align-items:center;flex-direction:column}}@media (max-width: 375px){main{width:90%}.text-section-header{font-size:7rem;line-height:6rem}.text-section-welcome{font-size:1.6rem}.text-section-span{font-size:1.3rem}}@media (max-width: 320px){.text-section-header{font-size:6rem;line-height:5rem}.text-section-span{font-size:1.2rem}.playlist-generator-form>label{font-size:1.4rem}}