* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'basteleur';
}

::-webkit-scrollbar {
  display: none;
}

@font-face {
  font-family: 'basteleur';
  src: url('./fonts/basteleur-bold.ttf');
  font-weight: 300;
}

body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
}

/* NAV */
nav {
  position: fixed;
  flex-direction: column;
  align-items: flex-end;
  top: 30px;
  right: 35px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

nav button {
  display: block;
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  border-bottom: solid 2px transparent;
  text-transform: capitalize;
}

nav button.active {
  border-bottom: solid 2px black;
}

nav button:hover {
  border-bottom: solid 2px black;
}

/* TITLE */
h1 {
  top: 30px;
  width: 100%;
  font-size: 25px;
  text-align: center;
  position: fixed;
  z-index: 10;
}

header img {
  cursor: pointer;
}

/*********************************/
/*********** MODE INDEX **********/
/*********************************/

/* DIVS */
body.mode-playground div#wall,
body.mode-index div#wall {
  display: none;
}

body.mode-wall div#playground,
body.mode-index div#playground {
  display: none;
}

body.mode-wall div#index-modal,
body.mode-playground div#index-modal {
  display: none;
}

/* HEADER */
body.mode-index header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5.5vw;
  width: 100%;
  padding: 15vw 7vw 7vw 7vw;
}

body.mode-index header img {
  width: 100%;
}

body.mode-index header img:hover {
  outline: solid 1px grey;
}

body.mode-index div#index-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
}

body.mode-index div#index-modal img {
  height: 70%;
}

/*********************************/
/******** MODE PLAYGROUND ********/
/*********************************/

/* PLAYGROUND */
div#playground {
  flex: 2;
  z-index: 1;
}

/*********************************/
/*********** MODE WALL ***********/
/*********************************/

/* WALL */
div#wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7.5vw;
  flex: 2;
  align-items: center;
  padding: 3.5vw 13vw 0 13vw;
}

div#wall div {
  display: flex;
  align-items: center;
  justify-content: center;
}

div#wall div img:hover {
  cursor: grab;
}

div#wall div img {
  width: 100%;
}

div#wall div img:hover {
  outline: solid 1px rgba(0, 0, 0, 0.5);
}

div#wall div img.selected {
  outline: solid 1.5px black;
}

div#wall div:has(img.selected):after {
  content: '';
  position: absolute;
  background: black;
  align-self: flex-end;
  border-radius: 100%;
  margin-bottom: -40px;
  display: block;
  height: 14px;
  width: 14px;
}

div#wall div.drop-before:before {
  content: '';
  position: absolute;
  margin-left: -7.5vw;
  display: block;
  height: 100%;
  width: 100%;
  border-left: solid 1.5px black;
}

div#wall div.drop-after:before {
  content: '';
  position: absolute;
  margin-right: -7.5vw;
  display: block;
  height: 100%;
  width: 100%;
  border-right: solid 1.5px black;
}

body.mode-wall div.grabbable,
body.mode-wall div.grabbable img {
  position: relative;
}

div#wall div.grabbable:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

/* HEADER */
body.mode-wall header,
body.mode-playground header {
  background: white;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  gap: 30px;
  width: 100vw;
  overflow-x: scroll;
  padding: 30px 30px 20px 30px;
  scrollbar-color: grey transparent;
  scrollbar-width: thin;
  border: solid 1px rgb(220, 220, 220);
}

body.mode-playground header img,
body.mode-wall header img {
  width: 60px;
}

body.mode-playground header img:hover,
body.mode-wall header img:hover {
  outline: solid 1px grey;
}

body.mode-playground img,
body.mode-wall img {
  cursor: pointer;
}

/*********************************/
/*********** RESPONSIVE ***********/
/*********************************/
@media (max-width: 700px) {
  h1 {
    font-size: 22px;
  }

  nav {
    display: none;
  }

  body.mode-index header {
    gap: 7.5vw;
    padding: 30vw 12vw 12vw 12vw;
  }

  body.mode-index div#index-modal img {
    height: auto;
    width: 70%;
  }

  body.mode-index header {
    grid-template-columns: repeat(2, 1fr);
    overflow: scroll;
  }
}