body,html{margin:0;padding:0;height:100%;display:flex;justify-content:center;align-items:center;background-color:#c5e1ef}.montserrat-regular{font-family:Montserrat,sans-serif;font-weight:400}.montserrat-bold{font-family:Montserrat,sans-serif;font-weight:700}.big-container{display:flex;gap:50px}.component-container{display:flex;flex-direction:row;gap:50px;padding:100px 80px 80px}.game-over{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%}body{background-color:#c5e1ef}.word-placement-wrapper{padding-bottom:67px;padding-left:350px;display:flex;align-items:first baseline;justify-content:center}.left-side-panel{display:flex;flex-direction:column;gap:20px;z-index:1000}.left-top{display:flex;flex-direction:row;gap:5px}.music-display{display:flex;flex-direction:column;gap:15px}.right-side-panel{display:flex;flex:1;min-width:0}.album-section{display:flex;flex-direction:column;gap:20px}.keyboard{height:690px;padding:12px;border:3px solid #7ebce1;border-radius:30px;background-color:#f4f2eb;box-shadow:0 4px 10px #0003;font-family:Jazz LET,fantasy;display:flex;flex-direction:column;justify-content:flex-end;width:100%}.keyboard-row{height:80px;display:flex;justify-content:center;margin-bottom:10px}.keyboard-key{width:70px;height:70px;padding:10px;margin:5px;border:2px solid #7ebce1;border-radius:15px;background-color:#7ebce1;font-size:30px;font-weight:700;cursor:pointer;color:#f4f2eb;font-family:Montserrat,sans-serif;position:relative;transition:all .3s ease}.keyboard-key:hover{background-color:#c5e1ef;color:#fff;transform:translateY(-3px)}.keyboard-key:active{background-color:#f4f2eb;transform:translateY(2px)}.keyboard-key.clicked{background-color:#f4f2eb;color:#c5e1ef}.chances-display{width:250px;-webkit-user-select:none;user-select:none;font-family:Montserrat,sans-serif;color:#4e9bc8;font-size:20px;position:absolute;top:0;right:-100px;transform:translate(-50%);text-align:center;z-index:1;transition:all .3s ease}.keyboard{position:relative}body{-webkit-user-select:none;user-select:none;font-family:Montserrat,sans-serif;display:flex;justify-content:flex-end;align-items:flex-start;height:100vh;width:100%;position:relative}h1{-webkit-user-select:none;user-select:none;font-family:Montserrat,sans-serif;font-size:3rem;color:#7ebce1;font-weight:700;margin:-50px 10 15px 0;position:relative;white-space:nowrap}.word-placement{z-index:1;text-align:center;padding:15px;border-radius:10px;margin:0 auto;position:relative;top:100px;right:180px;transform:translateY(-20px)}.word-container{display:flex;flex-direction:column;gap:10px;margin:0}.word-line{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:10px}.letter{margin:0 8px;letter-spacing:4px;position:relative;display:inline-block;color:#7ebce1;font-size:2rem;min-width:25px;text-transform:uppercase;transition:all .3s ease;font-family:Montserrat,sans-serif}.letter.empty{color:transparent;position:relative}.letter.empty:after{content:"_";color:#7ebce1;position:absolute;left:50%;transform:translate(-50%)}.letter.filled{animation:letterPop .3s ease}@keyframes letterPop{0%{transform:scale(.8)}50%{transform:scale(1.1)}to{transform:scale(1)}}.letter:before{content:"";position:absolute;top:-5px;left:-8px;right:-8px;bottom:-5px;background-color:#0000001a;border-radius:5px;opacity:0;transition:opacity .3s ease}.letter:hover:before{opacity:1;background-color:#c5e1ef}.space{display:inline-block;width:50px}.album-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;z-index:1000}.album-cover{width:300px;height:300px;border-radius:10px}.spotify-container{position:relative;width:300px;height:80px;overflow:hidden}.hide-title{position:absolute;top:0;left:0;width:100%;height:35px;background-color:#000;z-index:2}.play-button{padding:8px 16px;font-size:16px;border:none;background-color:#1db954;color:#fff;border-radius:5px;cursor:pointer}.play-button:hover{background-color:#1aa34a}.no-preview{color:red;font-size:14px;margin-top:5px}.hint-buttons-container{display:flex;flex-direction:column;gap:10px;background-color:#7ebce1;padding:20px;border-radius:15px;border:2px solid #7ebce1;color:#fff;box-shadow:0 4px 12px #0000001a}.hint-button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;color:#7ebce1;background-color:#f4f2eb;border:2px solid #7ebce1;border-radius:10px;cursor:pointer;transition:all .3s ease-in-out;min-width:140px;height:80px;font-family:Montserrat,sans-serif;font-size:x-large;font-weight:700;position:relative;box-sizing:border-box}.hint-button:hover:not(.revealed){background-color:#f1f7fc;transform:translateY(-5px);box-shadow:0 5px 15px #00000026}.hint-button:active:not(.revealed){background-color:#c5e1ef;transform:translateY(1px)}.hint-button.revealed{background-color:#f9f9f9;cursor:default;border-color:#7ebce1}.hint-button.revealed .hint-label{color:#517fab}.hint-button.revealed .hint-value{color:#7ebce1}body{margin:0;height:100vh;display:block}.hangman-container{padding-left:40px;display:flex;align-items:flex-start}.hangman-stand{padding-top:30px;display:flex;flex-direction:column}.hangman-beam{width:50%;height:6px;background-color:#7ebce1;border-radius:10px}.hangman-mid{display:flex;padding:0 16px;justify-content:space-between}.hangman-post{width:6px;height:320px;background-color:#7ebce1;border-radius:10px}.hangman-main{display:flex;flex:1;flex-direction:column;align-items:center;padding-right:5px}.hangman-main .hangman-rope{position:absolute;width:5px;height:50px;background-color:#7ebce1;border-radius:10px}.hangman-main img{margin-top:25px;width:260px;height:260px}.hangman-base{width:100%;height:7px;background-color:#7ebce1;border-radius:10px}.win-lose-page{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#000;text-align:center;position:relative;overflow:hidden}.video-background{position:absolute;top:0;right:0;bottom:0;left:0}.video-background video{width:100%;height:100%;object-fit:cover}.fireworks{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.content{position:relative;z-index:1;padding:20px;box-sizing:border-box;text-align:center}.win-lose-page h1{font-size:3rem;font-weight:700;color:#517fab;margin-bottom:20px;text-transform:uppercase;letter-spacing:2px}.result-message{margin-bottom:20px;font-size:1.2rem;font-style:bold;color:#517fab}.listen-button,.play-again-button{padding:15px 30px;font-size:1.2rem;background-color:#517fab;color:#fff;border:none;border-radius:10px;cursor:pointer;transition:background-color .3s,transform .3s;font-family:Montserrat,sans-serif;margin-top:10px}.listen-button:hover,.play-again-button:hover{background-color:#254e7a;transform:translateY(-2px)}.play-again-button{background-color:#7ebce1}.play-again-button:hover{background-color:#517fab}@media (max-width: 600px){.win-lose-page h1{font-size:2.5rem}.listen-button,.play-again-button{font-size:1rem;padding:12px 24px}}.spotify-player{display:flex;font-size:14px;font-weight:700;color:#333;overflow:hidden;border:none}.spotify-player iframe{border:none;outline:none;box-shadow:none}.solid-block{position:absolute;padding-left:70px;height:40px;width:225px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:10px;z-index:10}.solid-cover{position:absolute;height:80px;width:75px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:10px}