@font-face {
    font-family: Main;
    src: url(fonts/sans/SourceSansPro-Regular.ttf);
}

body{
    margin: 0px;
    padding: 0px;
}
.none{
    display: none !important;
}
p{
    font-family: Main;
    color: white;
    margin: 0px;
}
*{
    box-sizing: border-box;
}
button{
    font-family: Main;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    color: white;
}
strong{
    text-decoration: underline;
}
.bottom-nav{
    width:max-content !important

}
/* STYLES */

.red{
    background: linear-gradient(-45deg, #470d05,#7d1e09);
}
.yellow{
    background: linear-gradient(-45deg, #7d7a09,#9ea80c) !important;
}
.blue{
    background: linear-gradient(-45deg, #052247,#092c7d);
}
.green{
    background: linear-gradient(-45deg, #0a4705,#127d09);
}
.grey{
    background: linear-gradient(-45deg, #696860,#c0c0b8) !important;
}
.brown{
    background: linear-gradient(-45deg,#26170f, #4d2600);
}

/* lang*/

.lang{
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Main;
    cursor: pointer;
}
/* logo */

.logo-block{
    display: flex;
}
.logo-p-s{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.logo-name{
    font-style: italic;
}
.logo-auth{
    font-style: italic;
}

/* Header */

header{
    display: flex;
    background: linear-gradient(-45deg,#26170f, #4d2600);
    justify-content: space-between;
    align-items: center;
}

/* Main */

.main{
    background: linear-gradient(-45deg, #0a4705,#127d09);
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-wrap{
    background: rgba(255, 255, 255, 0.141);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content{
    display: flex;
    justify-content: center;
}

/* common */

.buttons{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.title-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title{
    display: flex;
    justify-content: center;
    align-items: center;
}
.page{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Type of game */

.choices{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.amount-players{
    display: flex;
    justify-content: space-between;
}
.rules{
    display:flex;
    flex-direction: column;
    justify-content: space-around;
}

/* score */

.choices-2{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* combinations */
    
/* Win */

.win-page{
    background: rgba(255, 255, 255, 0.141);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

/* Warn */

.warn{
    background: rgba(255, 255, 255, 0.141);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

/* footer */

footer{
    display: flex;
    background: linear-gradient(-45deg,#26170f, #4d2600);
    border-top: 10px solid rgb(23, 14, 9);
}

/* Game */

.game{
    display: flex;
}
.curr-plr{
    box-shadow: 0px 0px 50px rgb(222, 215, 19);
}
.plr-panel{
    background: rgba(255, 255, 255, 0.141);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.plr,.act,.stop{
    display: flex;
    justify-content: center;
    align-items: center;
}
.plr-score,.curr-score,.add{
    display: flex;
    justify-content: center;
    align-items: center;
}
.left-panel,.right-panel{
    display:flex;
    flex-direction: column;
}
.center-panel{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.top-center-panel{
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.141);
}
.bottom-center-panel{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}