GuessTheNumberJS

1
@import url(normalize.css);@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Montserrat:wght@100;200;300;400;500;600;700&family=Old+Standard+TT:wght@400;700&display=swap);.container,input{border-radius:8px}input,main{box-shadow:0 2px 5px 0 rgba(0,0,0,.1)}body,footer,header,html,input{color:var(--text-secondary)}.buttons,.wrapper,body{display:flex}.attempts-items>div,.content header{border-bottom:2px solid var(--border-color)}:root{--primary-background:#15202b;--secondary-background:#192734;--accent-color:#64ffda;--text-primary:#ffffff;--text-secondary:#a8dadc;--border-color:#3b4a5b}body,html{height:100%;margin:0;font-family:Montserrat;background-color:var(--primary-background)}body{flex-direction:column;align-items:center;justify-content:center}.hint.visible,.settings-menu.visible,label{display:block}.container{max-width:80%;padding:20px;margin:0 auto;background-color:var(--secondary-background);box-shadow:0 4px 8px rgba(0,0,0,.1)}h1,h2,h3,h4,h5,h6{margin:0;color:var(--accent-color)}h1{font-weight:400;font-size:2.5rem}button,input{padding:12px;font-size:1rem;line-height:20px}label{margin-bottom:8px}input{margin-bottom:16px;outline:0;border:2px solid var(--border-color);background:var(--primary-background);transition:box-shadow .1s cubic-bezier(.79,.21,.06,.81),opacity .1s cubic-bezier(.79,.21,.06,.81)}button,main{width:100%;border-radius:8px}input::placeholder{color:var(--text-secondary)}button{background-color:var(--accent-color);color:var(--primary-background);cursor:pointer;transition:background-color .3s}.settings-menu,main{background-color:var(--secondary-background)}button:hover{background-color:darken(var(--accent-color),10%)}.wrapper{height:100%;flex-direction:column;justify-content:center;align-items:center}main{max-width:600px;padding:20px;text-align:center}footer,header{padding:15px 0;text-align:center}.content>*{padding:15px}.content header{position:relative}.content header h2{font-weight:600;color:var(--accent-color)}.bold{font-weight:600}.buttons{margin-top:20px;justify-content:center;gap:10px}button.restart,button.settings{width:40px;height:40px;background-color:var(--primary-background);border:2px solid var(--border-color);border-radius:50%;background-size:80%;background-repeat:no-repeat;background-position:center;cursor:pointer}.hint,.settings-menu{display:none;position:absolute;border-radius:8px;box-shadow:0 2px 10px 0 rgba(0,0,0,.2)}button.restart{background-image:url('../img/refresh.svg')}button.settings{background-image:url('../img/settings.svg')}button.settings.active{box-shadow:0 0 0 0 var(--primary-background),0 0 0 0 var(--primary-background),0 0 0 0 var(--border-color),0 0 0 0 var(--border-color),inset -7px -7px 20px 0 var(--primary-background),inset -4px -4px 5px 0 var(--primary-background),inset 7px 7px 20px 0 var(--border-color),inset 4px 4px 5px 0 var(--border-color)}.settings-menu{padding:15px;top:100%;right:0;z-index:1;transform:translate(-50%,0)}.attempts-items{max-height:50vh;overflow:auto}.attempts-items>div{padding:15px 0}.hint{padding:15px 30px;bottom:15px;right:15px;background-color:var(--accent-color);color:var(--secondary-background);transition:visibility .3s ease-out,opacity .3s ease-out}@media (max-width:576px){[class*=container]{padding:0 15px;max-width:none}button{background-size:60%}main .container .content{margin:15px}.message{padding-right:0}.buttons{right:10px}.settings-menu{right:50%;transform:translate(50%,0)}.hint{padding:10px 15px;font-size:12px}button.restart,button.settings{position:static;margin-top:10px}}