/* ######################################## */
/* #              Main styling            # */
/* ######################################## */

html, body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #141414;
  font-family: 'Montserrat', sans-serif;
  color: white;
}

main {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 1fr auto;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

/* ######################################## */
/* #             Header styling           # */
/* ######################################## */

.header, .logs-label {
  display: flex;
  justify-content: center;
  color: yellow;
  align-items: flex-end;
}

.logs-label {
  margin: 0 20px 30px 10px;
}

/* ######################################## */
/* #              Logs styling            # */
/* ######################################## */

.logs-wrapper {
  border: 2px solid white;
  height: 100%;
  width: 20vw;
  margin-left: 4.5vw;
  position: relative;
}

.logs-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.logs-content::-webkit-scrollbar {
  width: 10px;
}
 
.logs-content::-webkit-scrollbar-track {
  background: #222;
}
 
.logs-content::-webkit-scrollbar-thumb {
  background: #ddd; 
}

/* ######################################## */
/* #             Boards styling           # */
/* ######################################## */

.content {
  width: 100%;
  display: flex;
  justify-content: center;
  grid-column: 1 / span 2
}

.boards {
  width: 70vw;
  height: 0;
  padding-top: 31.5%;
  position: relative;
}

.content canvas {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  width: 70vw;
}

#products {
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  width: 70vw;
  height: 100%;

  display: grid;
  grid-template-columns: repeat(20, 20fr);
  grid-template-rows: repeat(9, 9fr);
  justify-items: center;
  align-items: center;
}