*{
    box-sizing: border-box;
}
body{
    background-image:url(../images/cheap_diagonal_fabric.png) ;/* from https://www.toptal.com/designers/subtlepatterns/tag/light/page/5/ */

}
.container{
    text-align:center;
    min-height: 720px;
    width:100vw;
    display:flex;
    justify-content: center;
}
.game{
    min-height: 700px;
    width:700px;
    text-align: center;
    background-color: rgba(190, 190, 190, 0.35);


}
.password-box{
    margin-top:20px;
    display:flex;
    flex-direction: column;
    align-items: center;
    width:100%;
}
h1{
    margin:0;
    font-size: 40px;
    font-family: 'Caveat', cursive;
    font-weight: 700;

}
.description{
    padding:20px 30px 5px 30px;
    display:inline-block;
    font-family: 'Cuprum', sans-serif;
}
.description div{
    margin:0;
}
.description>div{
    margin:15px;
}
.description p{
    margin-top:25px;
}
.description span{
    margin-right:25px;
}
.players{
    display:block;
}
.player{
    width:60px;
    height: 60px;
    margin:25px;
    border-radius: 100%;
    background: green;
    border: 3px solid #fff;
    font-family: 'Cuprum', sans-serif;
    color:white;

}
.player:hover{
    transition:0.2s;
    height:70px;
    width: 70px;
    color:white;
    font-size:15px;
    background:darkred;
    font-weight:700;


}
.player:focus{
    outline:none;
}
.start-box{
    flex-direction: column;
    align-items:center;
    display:none;
}
#password, #answer{
    height: 58px;
    border-top:none;
    border-right:none;
    border-left:none;
    border-bottom: 1px solid #704161;
    font-size:35px;
    width:300px;
    background: transparent;
    outline:none;
}
input{
    font-family: 'Caveat', cursive;
    letter-spacing: 2px;
    text-transform: uppercase;
}
input::placeholder{
    font-family: 'Caveat', cursive;
    color: #704161;
    font-size:26px;
    text-transform: none;
}
span{

    font-family: 'Cuprum', sans-serif;

}

.start-box>span{
    margin:5px;
}
.btn.start{
    height:150px;
    width: 150px;
    font-size:25px;
    border:10px solid white;
    transition: 0.2s;
    margin:10px 0 10px 0;

}
.start:hover{
    background:darkred;
    border:2px solid #8b0740;
    font-size:35px;
    outline:none;
}
.start:focus{
    outline:none;
}

.restart{
    display:none;
    height: 72px;
    width:72px;
    border-radius: 100%;
    font-family: 'Cuprum', sans-serif;
    text-align: center;
    font-size: 17px;
    color:white;
    border:3px solid white;
    background:darkred;
    transition:0.4s;
    font-weight:700;
}
.restart:hover{
    background: green;
    border: 3px solid #fff;
    transition:0.2s;
    font-weight: 700;
    outline:none;
}
.check{
    height:72px;
    width: 72px;
    margin:10px 0 10px 0;
    font-size:15px;
    transition:0.4s;
}
 .check:hover{
     background:darkred;
     font-weight:700;
 }


.btn{
    background: green;
    border: 3px solid #fff;
    border-radius: 100%;
    color:white;
    font-family: 'Cuprum', sans-serif;
}
.btn:focus{
    outline: none;
}
.answer-box{
    padding:30px 0 10px 0;
    display:none;
    align-items: center;
    flex-direction: column;
    min-height: 650px;
    width:100%;
}
.answers{
    list-style-type: none;
    display:block;
    min-height: 400px;
}
.answers li{
    margin-bottom: 5px;
    height: 50px;
}
#inf{
    font-family: 'Cuprum', sans-serif;
    margin-bottom: 10px;
}
.word{
    font-size:30px;
    font-family: 'Caveat', cursive;
}
.word, .dots{
    float:left;
    width:200px;
    display:inline-block;
}
.dots{
    width:200px;
    height:50px;
}
.green, .white{
    width:20px;
    height: 20px;
    border-radius:50%;
    float:left;
    justify-content: center;
    margin:5px 5px 0 5px;
    border: 2px solid black;
    align-items: center;
}

.green{
    background: green;
    border: 3px solid #fff;
    border-radius: 100%;
}
.white{
    background: white;
}
.black{
    margin-left: -75px;
}
.timer-btn{
    width:32px;
    height:32px;
    border-radius: 100%;
    border: 2px solid rgba(0, 0, 0, 0.85);
    background:white;
}
.timer-btn:hover, .return:hover{
    border: 3px solid white;
    background: green;
    transition:0.2s;
    color: white;

}
.timer-btn:focus{
    outline:none;
}
.timer-set{
    display:none;
    margin-top:20px;
}

.min-sec-set{
    display:inline-block;
}
.min-sec-set>span{
    margin-top:5px;
    font-family: 'Cuprum', sans-serif;
}
.timer{
    font-size: 25px;
}
.inner-time{
    font-weight: bold;
    color: #212121;
    width: 120px;
    height: 25px;
    font-family: 'Cuprum', sans-serif;
    font-size:20px;

}
.min, .sec{
    display:flex;
    flex-direction: row;
    width:150px;
}
.up-min, .up-sec, .down-min, .down-sec{
    height:40px;
    width:40px;
    border-radius: 50%;
    color: white;
    cursor:pointer;
    border: 2px solid white;
}
.up-min, .up-sec, .down-min, .down-sec, .min-value, .sec-value{
    display:inline-block;
    float:left;
    font-size: 32px;

}
.up-min:focus, .up-sec:focus, .down-min:focus, .down-sec:focus, .min-value:focus, .sec-value:focus{
    outline:none;
}

.up-min, .up-sec{
    background: rgba(0, 128, 0, 0.82);
}
.up-min:active, .up-sec:active{
    border-color:rgba(0, 128, 0, 0.82);
}
.down-min:active, .down-sec:active{
    border-color:rgba(255, 0, 0, 0.77);
}
.down-min, .down-sec{
    background: rgba(255, 0, 0, 0.77);
}
.min-value, .sec-value{
    text-align: center;
    width:60px;
}
.win{
    height: 180px;
    width: 300px;
    background: rgb(86, 177, 184);
    display:none;
    position: absolute;
    top:400px;
    border-radius: 5px;
    justify-content: center;
    flex-direction: column;
    align-items: center;

}
.win span{
    font-size:1.5rem;
    font-family: 'Cuprum', sans-serif;
    margin-bottom: 10px;
}
.answer-input-btn{
    position: relative;
}
#answer{
    margin-top:0;
}
.return{
    width:55px;
    height: 55px;
    border-radius: 100%;
    font-family: 'Cuprum', sans-serif;
    color:black;
    background: white;
    border:2px solid black;
}