.content {
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}


.section {
    background: black;
    padding: 1em;
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    max-width: 100%;
    top: 50%;
    z-index: 0;
    opacity: 0;
    transition: 0.8s opacity, 0.3s z-index;
    display: none;
    transform: translate(-50%, -50%);
}

@media (min-width: 992px) {
    .section {
        width: 992px;
        height: 992px;
    }
}

.section.active {
    z-index: 1;
    opacity: 1;
    display: block;
}


.section[data-section="1"] {
    text-align: center;
}



.intro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 700px;
    width: 90%;
    margin: 0 auto;
}

.intro a {
    color: white;
}

.hidden {
    display: none;
}

.chessboard {
    max-width: 340px;
    max-height: 400px;
    width: 340px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 1em;
}


.chessboard > div {
    width: 39px;
    min-height: 39px;
    height: auto;
    margin: 0;
    background: #6b6b6b;
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    margin-left: -4px;
}

.chessboard > div img {
    position: relative;
    top: 6px;
    width: 100%;
    max-width: 25px;
}

.chessboard > div:nth-child(2),
.chessboard > div:nth-child(4),
.chessboard > div:nth-child(6),
.chessboard > div:nth-child(8),
.chessboard > div:nth-child(9),
.chessboard > div:nth-child(11),
.chessboard > div:nth-child(13),
.chessboard > div:nth-child(15),
.chessboard > div:nth-child(18),
.chessboard > div:nth-child(20),
.chessboard > div:nth-child(22),
.chessboard > div:nth-child(24),
.chessboard > div:nth-child(25),
.chessboard > div:nth-child(27),
.chessboard > div:nth-child(29),
.chessboard > div:nth-child(31),
.chessboard > div:nth-child(34),
.chessboard > div:nth-child(36),
.chessboard > div:nth-child(38),
.chessboard > div:nth-child(40),
.chessboard > div:nth-child(41),
.chessboard > div:nth-child(43),
.chessboard > div:nth-child(45),
.chessboard > div:nth-child(47),
.chessboard > div:nth-child(50),
.chessboard > div:nth-child(52),
.chessboard > div:nth-child(54),
.chessboard > div:nth-child(56),
.chessboard > div:nth-child(57),
.chessboard > div:nth-child(59),
.chessboard > div:nth-child(61),
.chessboard > div:nth-child(63) {
    background: #b69eff;
}

.pawn.active,
.queen.active,
.bishop.active {
    background: #1f1f1f!important;
}