html {
  padding: 0.5rem;
}

/* Navigation bar styling */
#MyNavigationBar {
  border-left: 2px solid rgb(93, 93, 245);
  border-bottom: 2px solid rgb(93, 93, 245);
}

#MyNavigationBar a {
  color: rgb(93, 93, 245);
}

/* - */

/* Styling of About Me section */
#HeroSection {
  border-left: 1px solid black;
  border-top: 1px solid black;
  background-color: rgb(138, 138, 235);
}

/* - */

/* Styling main content i.e. How To Play chess board */
#MainContent .active {
  background-color: rgb(138, 138, 235);
}

#ChessBoard {
  width: 480px;
  height: 480px;
  border: 0.5px solid black;
  box-sizing: content-box;
  display: flex;
  flex-wrap: wrap;
}

#ChessBoard>div>div {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* - */

/* Making and styling classes for JS to work with it */
/* Styling for each squares in a chess board i.e. 64 */
.square {
  width: 60px;
  height: 60px;
  position: relative;
}

/* - */

/* Inside each occupied squares we have chess pieces */
.ChessPiece {
  background-color: none;
  position: absolute;
  z-index: 20;
}

/* - */


.square svg {
  position: relative;
  z-index: 5;
}

.square path {
  position: relative;
  z-index: 0;
}

.periwinkle {
  background-color: rgb(138, 138, 235);
}

.white {
  background-color: white;
}

/* - */

/* Styling for footer content */
#FooterContent {
  border-left: 1px solid black;
  border-top: 1px solid black;
  background-color: rgb(138, 138, 235);
}

.FootAnchor {
  color: black;
  font-weight: 300;
}

.FootAnchor:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 0.25px !important;
  text-decoration-color: black !important;
}

/* - */

/* To change default sizes of displays */
.display-1 {
  font-size: 3.5rem;
}

.display-2 {
  font-size: 3rem;
}

.display-3 {
  font-size: 2.5rem;
}

.display-4 {
  font-size: 2rem;
}

.display-5 {
  font-size: 1.5rem;
}

.display-6 {
  font-size: 1.25rem;
}

/* - */