:root {
    --gray1: #d0d0d0;
    --gray2: #a0a0a0;
    --gray3: #707070;
    --gray4: #404040;
    --gray5: #000000;

    --green1: #a3e4d7;
    --green2: #76d7c4;
    --green3: #48c9b0;
    --green4: #1abc9c;
    --green5: #17a589;
}

#body {
    position: relative;
    
    background-color: var(--gray1);
}

#main {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 30px;
    padding: 30px;

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

#section {
    position: relative;

    width: 300px;
    padding: 30px;

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

#box {
    position: relative;

    display: flex;

    justify-content: center;
    align-items: center;

    width: 100px;
    height: 100px;
    padding: 30px;

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

#circle {
    position: relative;

    width: 50px;
    height: 50px;

    background-color: var(--gray5);
    border-radius: 50%;
}

#buttons {
    display: flex;
    justify-content: space-evenly;

    width: 100%;

    margin-top: 20px;
}

#title {
    margin: 0;
    padding: 0;
}

span {
    font-size: 1.5rem;
    margin: 5px;
}

button {
    display: inline-block;
}

.body-hit {
    background-color: var(--green1) !important;
}

.main-hit {
    background-color: var(--green2) !important;
}

.section-hit {
    background-color: var(--green3) !important;
}

.box-hit {
    background-color: var(--green4) !important;
}

.circle-hit {
    background-color: var(--green5) !important;
}