*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: Arial, Helvetica, sans-serif;
}
#list > ul > li{
    list-style-type: none;
    font-size: 30px;
    margin: 25px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
#list > ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
}
.sections{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
.sec1{
    height: 1000px;
}
.sec2{
    height: 1150px;
}
.sec3{
    height: 1500px;
}
.chessImages{
    width: 400px;
    height: 400px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}
.texts{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 20px 0;
}
.explanationText{
    width: 400px;
    height: 100px;
    margin-top: 10px;
}
.kingMove{
    background-image: url("../images/kingMoveChess.png");
}
.queenMove{
    background-image: url("../images/queenMove.png");
}
.rookMove{
    background-image: url("../images/rookMove.png");
}
.knightMove{
    background-image: url("../images/knightMove.png");
}
.bishopMove{
    background-image: url("../images/bishopMove.png");
}
.pawnMove{
    background-image: url("../images/pawnMove.png");
}
.italianGame{
    background-image: url("../images/italianGame.png");
}
.queensGambit{
    background-image: url("../images/queensGambit.png");
}
.spanishOpening{
    background-image: url("../images/spanishOpening.png");
}
.londonOpening{
    background-image: url("../images/londonOpening.png");
}
.sicilianDefense{
    background-image: url("../images/sicilianDefense.png");
}
.frenchDefense{
    background-image: url("../images/frenchDefense.png");
}
.caroDefense{
    background-image: url("../images/caroDefense.png");
}
.indianDefense{
    background-image: url("../images/indianDefense.png");
}
.slavDefense{
    background-image: url("../images/slavDefense.png");
}
.castle{
    background-image: url("../images/castling.png");
}
.enPassant{
    background-image: url("../images/enPassant.png");
}
.pawnPromotion{
    background-image: url("../images/pawnPromotion.png");
}
.check{
    background-image: url("../images/checkPosition.png");
}
.checkmate{
    background-image: url("../images/checkmate.png");
}
.stalemate{
    background-image: url("../images/stalemate.png");
}
.repetition{
    background-image: url("../images/repetition.png");
}
.pin{
    background-image: url("../images/pin.png");
}
.skewer{
    background-image: url("../images/skewer.png");
}
.fork{
    background-image: url("../images/fork.png");
}
.discoverAttack{
    background-image: url("../images/discoverAttack.png");
}
.doubleCheck{
    background-image: url("../images/doubleCheck.png")
}
.deflection{
    background-image: url("../images/deflection.png");
}
.zwischenzug{
    background-image: url("../images/zwischenzug.png");
}
.overloading{
    background-image: url("../images/overloading.png");
}
.backRank{
    background-image: url("../images/backRank.png");
}


.hide{
    display: none;
}




/* @media (max-width: 768px) {

}
@media (min-width: 769px) and (max-width: 1024px) {

} */