:root {
	--myWhite: #f3f3f3;
	--myBlack: #131313;
}



body, .score-container, .title-container, .scorePlayer, button {
    margin: 0 auto;
}

body, nav, .scorePlayer {
    display: grid;
}

nav div, .score {
    display: flex;
}

.score-container, .title-container {
    width: 50%;
}

.score, .scorePlayer {
    align-items: center;
    justify-content: center;
}

button, .player {    
    font-size: 24px;
    font-weight: 900;
}


button, .scorePlayer {
    width: 11rem;
}

html {
    height: 100%;
}

body {
    background: linear-gradient(to right, rgb(89, 99, 243), rgb(26, 29, 71));      
    width: 100%;
    text-align: center;    
    min-height: 100%;
}

nav {
    justify-content: flex-end;
    align-items: center;
    height: 80px;
}

nav div {
    background-color: var(--myWhite);
    border-radius: 50px;
    width: 80px;
    margin: 0 50px;
}

nav img {    
    width: 30px;
    margin: 5px;
    transition: 400ms;
    cursor: pointer;
}

nav img:hover {
    filter: brightness(70%);
}

.scorePlayer {
    width: 11rem;
    height: 11rem;        
    border-radius: 10px;    
    background-color: var(--myBlack);
    color: var(--myWhite);
}

.scorePlayer h2{
    font-size: 100px;
}

.max-point {
    margin: 0 10px;
}