:root {
    --background: #D83F31;
    --boards: #EE9322;
    --buttons: #E9B824;
    --link-background: #219C90;
    --text: #fff;
}

body {
    background-color: var(--background);

    margin: 0;
    padding: 0;

    color: var(--text);
}

.title {
    text-align: center;
    font-size: 40px;
    font-family: sans-serif;
}

.counter button {
    font-size: 50px;
    position: absolute;

    height: 100px;
    width: 15%;

    color: var(--text);
}

.counter {
    background-color: var(--boards);

    text-align: center;
    font-size: 75px;
    font-family: sans-serif;

    height: 208px;

    margin: 20px;
    
    border-radius: 8px;
}

.b-left {
    left: 20px;
}

.b-rigth {
    right: 20px;
}

button {
    font-size: 100px;
    font-family: sans-serif;

    border: none;
    border-radius: 8px;

    background-color: var(--buttons);
}

h3 {
    font-size: 50px;
}

.buttons {
    margin: 20px;
    height: 143px;
}

.buttons button {
    width: 30%;
    height: 100%;

    font-size: 100px;

    color: var(--text);
}

.button {
    margin: 20px;
    height: 143px;
}

.button button {
    width: 100%;
    height: 100%;

    font-size: 100px;

    color: var(--text);
}


#links {
    height: 100%;
    background-color: var(--link-background);
    padding: 5px;

    color: var(--text);
    text-decoration: none;
    list-style-type: none;
    font-size: 50px;
    font-family: sans-serif;
    text-transform: uppercase;

    text-align: center;
}

#links a {
    color: var(--text);
    text-decoration: none;
}

#links li {
    list-style-type: none;
    margin: 10px;
}

.nameButton {
    position: absolute;
    left: 20px;
}