html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: rgb(131, 129, 129);
}

.esquerda {
    width: 45%;
    height: 100vh;
    min-height: 100vh;
    float: left;
    background-color: aqua;
    color: aliceblue;
    overflow-x: hidden;
}

.norte {
    height: 50%;
    background-color: brown;
    overflow: hidden;
}

.sul {
    height: 50%;
    background-color: brown;
    overflow: hidden;
}

.label-norte {
    height: 12%;
    text-align: center;
    font-size: 1em;
}

.label-sul {
    height: 12%;
    text-align: center;
    font-size: 1em;
}

.pecas-norte {
    width: 98%;
    height: 88%;
    background-color: aqua;
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pecas-sul {
    width: 98%;
    height: 88%;
    background-color: aqua;
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.slot-board {
    display: inline-flex;
    min-width: 11%;
    height: 42%;
    align-items: center;
    justify-content: center;
    background-color: blueviolet;
    margin: auto;
    border: solid 1px black;
    border-radius: 7%;
}

.central {
    width: 28%;
    height: 100vh;
    min-height: 100vh;
    float: left;
    background-color: rgb(46, 100, 100);
    color: aliceblue;
    overflow-x: hidden;
}

.slot-centro {
    display: inline-flex;
    width: 46%;
    min-height: 32%;
    align-items: center;
    justify-content: center;
    background-color: blueviolet;
    margin: 1px;
    border: solid 1px black;
    border-radius: 7%;
}

.slot-sobre {
    min-height: 2%;
}

.direita {
    width: 27%;
    height: 100vh;
    min-height: 100vh;
    float: right;
    background-color: rgb(47, 48, 49);
    color: aliceblue;
    overflow: hidden;
}

.label-zona {
    height: 4%;
    text-align: center;
}

.batalha {
    width: 100%;
    min-height: 100vh;
    background-color: rgb(1, 43, 43);
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    padding: 1%;
}

.zona-tropical-norte {
    width: 100%;
    height: 43vh;
    background-color: brown;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1%;
}

.zona-tropical-sul {
    width: 100%;
    height: 43vh;
    background-color: brown;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1%;
}

.slot-zona {
    display: grid;
    width: 16%;
    height: 40%;
    align-items: center;
    justify-content: center;
    background-color: blueviolet;
    margin: 2px;
    border: solid 1px black;
    border-radius: 7%; 
}