.pontos {

    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-direction: column;

    width: 200px;
    height: 350px;

}

.pontoEsquerda p {

    background: #FF2C2C;
    color: white;

    font-size: 2rem;
    font-family: 'Roboto';
    
    text-align: center;

    width: 100%;

    padding: 1rem 0;

}

.pontoDireita p {

    background: #120A8F;
    color: white;

    font-size: 2rem;
    font-family: 'Roboto';
    
    text-align: center;

    width: 100%;

    padding: 1rem 0;

}

.pontoEsquerda {

    margin-right:3rem;

}

.pontoDireita {

    margin-left: 3rem;

}

.pontos input {

    font-family: 'Roboto';
    font-size: 5rem;

    text-align: center;

    width: 100%;
    height: 200px;

    outline: none;

}

input::-webkit-inner-spin-button {

    display: none;

}

.pontos .buttons {
    
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.pontoEsquerda .buttons button {

    background: #E60000;
    color: white;

    font-family: 'Roboto';
    font-size: 3rem;
    
    width: 100px;
    height: 100px;

    border: 1px solid #CF0E0E;

    cursor: pointer;

    transition: 0.2s;

}

.pontoEsquerda .buttons button:hover {

    background: #790604;

    text-shadow: 0 0 10px black;

}

.pontoDireita .buttons button {

    background: #120A8F;
    color: white;

    font-family: 'Roboto';
    font-size: 3rem;
    
    width: 100px;
    height: 100px;

    border: 1px solid #081534;

    cursor: pointer;

    transition: 0.2s;

}

.pontoDireita .buttons button:hover {

    background: #040F16;

    text-shadow: 0 0 10px black;

}