/* 100vh and 100vw mean 100% of viewport height and width*/
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  margin: 0%;
  overflow-x: hidden;
}
.translucent {
  opacity: 0.5;
}
.leftcol {
  height: 100%;
  width: 50%;
  display: flex;
}

.rightcol {
  height: 100%;
  width: 50%;
}
.stretch {
  height: 100%;
  width: 100%;
  background-image: url("images/mainJack.webp"); /* The image used */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.rows {
  height: 33.33%;
  width: 100%;
}
.rowsx {
  height: 18.34%;
  width: 100%;
  display: flex;
}
.rowxs {
  height: 81.66%;
  width: 100%;
}
.box {
  display: block;
}
.rightright {
  height: 100%;
  width: 50%;
}
.leftleft {
  height: 100%;
  width: 50%;
}
.boxd {
  height: 100%;
  width: 50%;
}
.center-content {
  justify-content: center;
  align-items: center;
  display: flex;
}
img {
  max-width: 85%;
  max-height: 85%;
}

.clickable {
  filter: brightness(85%) drop-shadow(2px 8px 3px);
}

.translucent {
  opacity: 0.3;
}
/* classes to specify color */
.green {
  background-color: #008d24;
}
.blue {
  background-color: #0b69c0;
}
.purple {
  background-color: #3a246d;
}
.red {
  background-color: #ca1b22;
}
.orange {
  background-color: #ea6626;
}
.lilac {
  background-color: #c28cae;
}
.lightlilac {
  background-color: #f49fb6;
}
.gray {
  background-color: #808080;
}
.black {
  background-color: #030301;
}

@media only screen and (max-width: 600px) {
  body {
    display: block;
  }

  .leftcol {
    height: 100%;
    width: 100%;
    display: flex;
  }
  .midcol {
    height: 100%;
    width: 100%;
    display: block;
  }

  .rightcol {
    height: 100%;
    width: 100%;
    display: block;
  }
  img {
    max-width: 65%;
    max-height: 65%;
  }
}

/* suggest the element is clickable */
.clickable:hover {
  cursor: pointer;
  filter: brightness(100%) drop-shadow(2px 8px 3px);
}

/* add satisfaction to click */
.clickable:active {
  filter: drop-shadow(0px 0px 3px);
  transform: scale(1.01);
}