style.css

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 5.5rem;

  /*============== CHESS BOARD COLORS =====================*/
  --green-board-light: #eeeed2;
  --green-board-dark: #769656;
  --brown-board-dark: #b58863;
  --brown-board-light: #f0d9b5;

  /*===================== COMPONENT COLORS ========================*/
  --dark-board-base-green: rgb(22, 101, 52);
  --dark-board-bi-green: rgba(101, 163, 13);
  --dark-board-hover-green: rgba(101, 163, 13, 0.8);
  --dark-board-darkest-green: #052e16;
  --dark-board-lightest-green: #f0fdf4;
  --dark-board-lighter-green: #dcfce7;
  --dark-board-lightest-green-opaque: rgb(240, 253, 244, 0.6);
  --light-board-darkest-brown: rgb(55, 38, 27);
  --light-board-dark-brown: rgb(158, 109, 64, 1);
  --light-board-acc-body-brown: rgba(240, 217, 181, 1);
  --eerie-black: hsla(60, 5%, 12%, 1);

  /*==============LIGHT/DARK MODE VARIABLES================= */
  --hover-light: rgb(158, 109, 64, 0.8);
  --background: var(--body-light);
  --body-light: url("wood.png");
  --light-color-board: var(--brown-board-light);
  --dark-color-board: var(--brown-board-dark);
  --header-background: rgba(240, 217, 181, 0.75);
  --tutorial-list-item: rgba(240, 217, 181, 0.6);
  --header-text: var(--light-board-darkest-brown);
  --acc-body-bkg: var(--light-board-acc-body-brown);
  --light-board-dropdown-bkg: rgba(240, 217, 181, 0.6);
  --accordion-not-collapsed-color: white;
  --accordion-not-collapsed-bg: rgb(158, 109, 64, 0.95);
  --grp-btn: var(--light-board-darkest-brown);
  --accordion-button: var(--light-board-dark-brown);
  --acc-body-color: var(--light-board-darkest-brown);
  --test-yourself: var(--accordion-not-collapsed-bg);
  --hover-btn-group: var(--darkest-brown-light-shade);
  --dropdown-hover: var(--brown-board-dark);
  /* --body-dark: var(--eerie-black); */

  --shadow-color: 24deg 52% 4%;
  --shadow-elevation-low: 0.1px 0.2px 0.2px hsl(var(--shadow-color) / 0.55),
    0.2px 0.4px 0.5px -1.4px hsl(var(--shadow-color) / 0.51),
    0.6px 1.1px 1.4px -2.7px hsl(var(--shadow-color) / 0.48);
  --shadow-elevation-medium: 0.1px 0.2px 0.2px hsl(var(--shadow-color) / 0.46),
    0.4px 0.7px 0.9px -0.7px hsl(var(--shadow-color) / 0.44),
    0.8px 1.4px 1.8px -1.4px hsl(var(--shadow-color) / 0.43),
    1.6px 2.9px 3.6px -2.1px hsl(var(--shadow-color) / 0.41),
    3.2px 5.7px 7.1px -2.7px hsl(var(--shadow-color) / 0.39);
  --shadow-elevation-high: 0.1px 0.2px 0.2px hsl(var(--shadow-color) / 0.47),
    0.9px 1.5px 1.9px -0.3px hsl(var(--shadow-color) / 0.46),
    1.6px 2.9px 3.6px -0.7px hsl(var(--shadow-color) / 0.45),
    2.6px 4.7px 5.8px -1px hsl(var(--shadow-color) / 0.44),
    4.1px 7.3px 9.1px -1.4px hsl(var(--shadow-color) / 0.43),
    6.3px 11.1px 13.9px -1.7px hsl(var(--shadow-color) / 0.43),
    9.3px 16.5px 20.6px -2.1px hsl(var(--shadow-color) / 0.42),
    13.5px 23.9px 29.9px -2.4px hsl(var(--shadow-color) / 0.41),
    19.1px 33.8px 42.2px -2.7px hsl(var(--shadow-color) / 0.4);
}

/*=============== BASE ===============*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ol,
ul,
dl {
  padding: 0rem;
  list-style: none;
  margin: 0rem;
}

/* Conversion of px to rem, 1rem = 10px */
html {
  font-size: 62.5%;
}

html,
body {
  height: 100%;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.nav__container {
  max-width: 1360px;
  margin-inline: auto;
  height: var(--header-height);
  box-shadow: var(--shadow-elevation-low);
}

.font-medium,
.accordion-button,
.accordion-body {
  font-size: 1.75rem;
  line-height: 2rem;
  letter-spacing: 0.1rem;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  transform: scale(1);
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url("wood.png"); */
    background: var(--background);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

body {
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  /* The text of the element and its sub-elements is not selectable. */
  user-select: none;
  /* background-image: var(--background);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; */
}

/*======================== HEADER ======================*/

.header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--header-background);
  color: var(--header-text);
  width: 100%;
  z-index: 100;
}

.title {
  letter-spacing: 1.5px;
  margin: 0;
  font-weight: 700;
  font-size: 3rem;
}

.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 100%; */
}

.nav__link {
  font-weight: 600;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s;
}

/*=============== DROPDOWN ===============*/
.dropdown__item {
  cursor: pointer;
}

.dropdown__arrow {
  font-size: 2.5rem;
  font-weight: initial;
  transition: transform 0.4s;
}

.dropdown__link {
  padding: 1.25rem 1.25rem 1rem 2.5rem;
  color: var(--header-text);
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  font-weight: 600;
  transition: background-color 0.3s;
}

.dropdown__menu button {
  border: none;
  width: 100%;
  color: var(--acc-body-color);
  background-color: var(--acc-body-bkg);
}

.dropdown__link:hover {
  background-color: var(--dropdown-hover);
}

.dropdown__menu,
body.hasTouch .dropdown__menu {
  background-color: var(--acc-body-bkg);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

/* Show dropdown menu */
body.hasHover .dropdown__item:hover .dropdown__menu,
body.hasTouch .active-menu {
  max-height: 1000px;
  transition: max-height 0.4s ease-in;
}

/* Rotate dropdown icon */
body.hasHover .dropdown__item:hover .dropdown__arrow,
body.hasTouch .active-arrow {
  transform: rotate(180deg);
}

.dropdown__menu .material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--acc-body-color);
}

.dropdown__menu .material-symbols-outlined-fill {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--acc-body-color);
}

.speed {
  transform: scaleX(-1);
}

.material-symbols-outlined {
  border: none;
  background: none;
}

.dark-mode-toggle {
  color: var(--foreground);
  border: 0.2rem solid currentColor;
  padding: 0.4rem;
  background: transparent;
  cursor: pointer;
  border-radius: 0.5rem;
  width: 3rem;
  height: 3rem;
}

.darkmode {
  --background: var(--eerie-black);
  --shadow-color: 145deg 100% 0%;

  --light-color-board: var(--green-board-light);
  --dark-color-board: var(--green-board-dark);
  --accordion-button: var(--dark-board-base-green);
  --accordion-not-collapsed-bg: var(--dark-board-base-green);
  --hover-light: var(--dark-board-hover-green);
  --grp-btn: var(--dark-board-bi-green);
  --header-background: var(--dark-board-darkest-green);
  --header-text: white;
  --hover-btn-group: rgba(101, 163, 13, 0.9);
  --tutorial-list-item: #dcfce7;
  --acc-body-bkg: var(--dark-board-lightest-green);
  --acc-body-color: var(--dark-board-darkest-green);
  --light-board-dropdown-bkg: var(--dark-board-lightest-green-opaque);
  --dropdown-hover: var(--dark-board-lighter-green);
  --test-yourself: var(--accordion-not-collapsed-bg);
}

/*================= MAIN =======================*/

dialog {
  z-index: 20;
  background: grey;
  border: none;
  border-radius: 1rem;
  /* font-size: 2rem; */
  color: white;
  margin: auto;
  padding: 1.5rem;
}

.dialog {
  user-select: none;
}

.mega-container {
  display: grid;
  grid-template-columns: minmax(30rem, 38rem) 42rem 34rem;
  grid-template-rows: 4rem 1fr;
  /* padding: 20rem 4rem 7rem 4rem; */
  column-gap: 7rem;
  row-gap: 3rem;
  position: relative;
  grid-template-areas:
    "btn board tutorial"
    "accordion  board tutorial";
  margin: 14.1rem auto 0rem auto;
  padding: 4rem;
  justify-content: center;
}

.choose-opening {
  grid-area: btn;
  min-width: 20rem;
  align-self: start;
  justify-self: start;
  border-style: none;
  box-shadow: var(--shadow-elevation-medium);
  padding: 1.25rem;
}

.accordion {
  grid-area: accordion;
  align-self: start;
  justify-self: center;
  min-width: 100%;
  /* box-shadow: var(--shadow-elevation-low); */
}

.accordion-body {
  background-color: var(--acc-body-bkg);
  color: var(--acc-body-color);
}

.accordion-button,
.choose-opening {
  background-color: var(--accordion-button);
  color: white;
}

.accordion-button:hover,
.btn.test-yourself:hover,
.btn.choose-opening:hover,
.accordion-button:active,
.btn.test-yourself:active,
.btn.choose-opening:active {
  background-color: var(--hover-light);
  color: white;
}

.accordion-item,
.choose-opening,
.h2-tutorial,
.btn.choose-opening:hover,
.btn.choose-opening:active {
  border: none;
  border-bottom: 0.2rem solid var(--acc-body-color);
}

.accordion-button:focus,
.choose-opening:focus,
.test-yourself:focus {
  box-shadow: var(--shadow-elevation-medium);
}

.accordion-button:not(.collapsed) {
  color: var(--accordion-not-collapsed-color);
  background-color: var(--accordion-not-collapsed-bg);
}

.extended-chess-board {
  grid-area: board;
  display: flex;
  flex-direction: column;
  align-self: start;
  justify-self: center;
  gap: 2rem;
  position: relative;
}

.chess-board {
  border-radius: 0.5rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(8, 5.25rem);
  grid-template-rows: repeat(8, 5.25rem);
  box-shadow: var(--shadow-elevation-medium);
}

.sq {
  width: 100%;
  height: 100%;
}

.sq-block {
  position: relative;
}

.sq-notation-white,
.sq-notation-black {
  position: absolute;
  font-size: 1.5em;
  font-weight: 700;
  color: var(--acc-body-color);
}

.rotate {
  rotate: 180deg;
}

.number {
  top: 1px;
  left: 1px;
}

.character {
  bottom: 1px;
  right: 1px;
}

.chess-board {
  background-color: var(--light-color-board);
}

.chess-board > :nth-child(n):nth-child(even):nth-child(-n + 8),
.chess-board > :nth-child(n + 9):nth-child(odd):nth-child(-n + 16),
.chess-board > :nth-child(n + 17):nth-child(even):nth-child(-n + 24),
.chess-board > :nth-child(n + 25):nth-child(odd):nth-child(-n + 32),
.chess-board > :nth-child(n + 33):nth-child(even):nth-child(-n + 40),
.chess-board > :nth-child(n + 41):nth-child(odd):nth-child(-n + 48),
.chess-board > :nth-child(n + 49):nth-child(even):nth-child(-n + 56),
.chess-board > :nth-child(n + 57):nth-child(odd):nth-child(-n + 64) {
  background-color: var(--dark-color-board);
}

img {
  width: 100%;
}

.container3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.play-controls {
  margin-right: 0.5rem;
  border: none;
}

.bi {
  color: var(--grp-btn);
  font-size: 5.25rem;
}

.bi:hover {
  color: var(--hover-btn-group);
}

.test-yourself,
.hint {
  width: 10rem;
  height: 7rem;
  box-shadow: var(--shadow-elevation-medium);
}

.hint {
  margin-left: 1.5rem;
}

.test-yourself {
  background-color: var(--test-yourself);
  color: white;
  border-style: none;
}

.btn.test-yourself:hover.add-color {
  background-color: var(--hover-light);
}

.btn.test-yourself.add-color,
.btn.test-yourself:focus.add-color,
.btn.test-yourself:active.add-color {
  background-color: var(--grp-btn);
  box-shadow: var(--shadow-elevation-medium);
}

.test-yourself[disabled] {
  background-color: var(--hover-light);
  color: white;
}

.tutorial {
  grid-area: tutorial;
  min-height: 100%;
  min-width: 100%;
  align-self: start;
  justify-self: center;
  background-color: #fff;
  box-shadow: var(--shadow-elevation-medium);
}

.h2-tutorial {
  text-align: center;
  background-color: var(--accordion-not-collapsed-bg);
  color: white;
  padding: 1rem;
  margin-bottom: 2rem;
}

.choose-opening,
.tutorial,
#accordionFlushExample .accordion-item {
  border-radius: 0.5rem;
  overflow: hidden;
}

.hidden {
  display: none;
}

.question {
  box-shadow: 0px 0px 0px 4px red inset;
}

.highlight {
  box-shadow: 0px 0px 0px 4px blue inset;
}

#tutorial-text {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  color: var(--acc-body-color);
  align-items: start;
}

.tutorial li {
  padding: 1rem 0 1rem 0rem;
  margin: 0 2rem;
}

.tutorial li:nth-child(even) {
  background-color: var(--tutorial-list-item);
}

/*=============== MEDIA QUERIES===================== */

/* Large screens which don't have hamburger */
@media screen and (min-width: 769px) {
  .nav__container {
    height: calc(var(--header-height) + 2rem);
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .nav-toggle {
    display: none;
  }

  .nav__list {
    height: 100%;
    display: flex;
    column-gap: 5rem;
  }

  .nav__link {
    height: 100%;
    padding: 0;
    justify-content: initial;
    column-gap: 0.25rem;
  }

  .dropdown__item {
    position: relative;
  }

  .dropdown__menu {
    max-height: initial;
    overflow: initial;
    position: absolute;
    left: 0;
    top: 6rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, top 0.3s;
  }

  .dropdown__link {
    padding-inline: 1rem 3.5rem;
  }

  /* Show dropdown menu */
  body.hasHover .dropdown__item:hover .dropdown__menu,
  body.hasTouch .active-menu {
    opacity: 1;
    top: 7.5rem;
    pointer-events: initial;
    transition: top 0.3s;
    z-index: 10;
  }

  .nav .hamburger {
    display: none;
  }
}

/* xxl */
@media (max-width: 1400px) {
  .nav__container {
    max-width: 1400px;
    margin-inline: 2.5rem;
  }
}

/* xl */
@media (max-width: 1280px) {
  .nav__container {
    max-width: 100%;
  }

  .mega-container {
    max-width: 100%;
    grid-template-columns: minmax(32rem, 48rem) 44rem;
    grid-template-rows: 4rem 1fr 40rem;
    grid-template-areas:
      "btn board"
      "accordion board"
      "tutorial tutorial";
    column-gap: 10rem;
    /* row-gap: 7rem; */
  }

  .chess-board {
    grid-template-columns: repeat(8, 5.5rem);
    grid-template-rows: repeat(8, 5.5rem);
  }

  .tutorial {
    min-width: 100%;
    min-height: 100%;
    grid-column-start: 2;
  }
}

/* lg */
@media (max-width: 1024px) {
  .nav__container {
    margin-inline: 2rem;
  }

  .mega-container {
    justify-content: center;
    grid-template-columns: minmax(27rem, 40rem) 36rem;
    grid-template-rows: 4rem 47rem 40rem;
    grid-template-areas:
      "btn board"
      "accordion board"
      "tutorial tutorial";
    /* gap: 5rem; */
  }

  .chess-board {
    grid-template-columns: repeat(8, 4.5rem);
    grid-template-rows: repeat(8, 4.5rem);
  }

  .title {
    font-size: 2.5rem;
  }

  .font-medium,
  .accordion-body,
  .accordion-button {
    font-size: 1.75rem;
  }
}

/* Hamburger origin */
/* medium */
@media (max-width: 768px) {
  .bar1,
  .bar2,
  .bar3 {
    background-color: currentColor;
    height: 4px;
    width: 36px;
    margin: 3px;
    border-radius: 10px;
  }

  .animateBar1 {
    animation: flipBar1 0.2s;
    animation-fill-mode: forwards;
  }
  .animateBar2 {
    animation: fadeBar2 0.2s;
    animation-fill-mode: forwards;
  }
  .animateBar3 {
    animation: flipBar3 0.2s;
    animation-fill-mode: forwards;
  }

  @keyframes flipBar1 {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(45deg) translate(4px, 10px);
    }
  }

  @keyframes fadeBar2 {
    from {
      transform: scaleX(1);
      opacity: 1;
    }
    to {
      transform: scaleX(0);
      opacity: 0;
    }
  }

  @keyframes flipBar3 {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(-45deg) translate(4px, -10px);
    }
  }

  .nav__link {
    color: var(--header-text);
    background-color: var(--header-background);
  }

  .nav__container {
    margin-inline: 1.5rem;
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .title {
    font-size: 2.5rem;
  }

  .font-medium,
  .accordion-button {
    font-size: 2rem;
  }

  .accordion-body {
    font-size: 1.75rem;
  }

  .mega-container {
    grid-template-columns: minmax(40rem, 50rem);
    grid-template-rows: 4em 1fr 62rem 50rem;
    grid-template-areas:
      "btn"
      "accordion "
      "board"
      "tutorial";
    row-gap: 3rem;
  }

  .tutorial {
    grid-column-start: 1;
    min-width: 40rem;
  }

  .chess-board {
    grid-template-columns: repeat(8, 5rem);
    grid-template-rows: repeat(8, 5rem);
  }

  .nav__menu {
    position: absolute;
    left: 0;
    top: 4.5rem;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    transition: top 0.4s, opacity 0.3s;
  }

  .extended-chess-board {
    margin-top: 4rem;
  }
}

/* Show menu */
.show-menu {
  opacity: 1;
  top: 5.5rem;
  pointer-events: initial;
}

/* sm */
@media only screen and (max-width: 480px) {
  .title {
    font-size: 2.5rem;
  }

  .font-medium,
  .accordion-button {
    font-size: 1.75rem;
  }

  .accordion-body {
    font-size: 1.5rem;
  }
  .mega-container {
    grid-template-columns: 34rem;
    grid-template-rows: 3.6rem 1fr 54rem 45rem;
    grid-template-areas:
      "btn"
      "accordion "
      "board"
      "tutorial";
  }

  .chess-board {
    grid-template-columns: repeat(8, 4.25rem);
    grid-template-rows: repeat(8, 4.25rem);
  }

  .sq-notation-white,
  .sq-notation-black {
    font-size: 1.25em;
  }

  .tutorial {
    min-width: 34rem;
  }
}

/* xs */
@media only screen and (max-width: 360px) {
  .mega-container {
    grid-template-columns: 30rem;
    grid-template-rows: 3.6rem 1fr 48rem 40rem;
    padding: 4rem 1rem;
  }

  .chess-board {
    grid-template-columns: repeat(8, 3.75rem);
    grid-template-rows: repeat(8, 3.75rem);
  }

  .title {
    font-size: 2.5rem;
  }

  .tutorial {
    min-width: 30rem;
  }

  .title {
    font-size: 2rem;
  }

  .font-medium,
  .accordion-button {
    font-size: 1.5rem;
  }

  .accordion-body {
    font-size: 1.25rem;
  }
}