styles.css

/***************************************************/
/* GENERAL STYLING */
/* Please do not change ^_^ */
/***************************************************/

* {
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
  font-weight: normal;
}

h3 {
  font-weight: bold;
  margin-bottom: 4px;
  font-weight: bold;
}

.post-it {
  box-shadow: 0 8px 6px -6px black;
  list-style: none;
  text-align: center;
  padding: 10px;
  margin-bottom: 20px;
}

.dashboard-frame {
  background-image: url("wood-texture.jpeg");
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dashboard-area {
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  background: radial-gradient(#127658, #052821);
  box-shadow: inset 0 0 10px #000000;
  overflow: auto;
  display: grid;
  grid-template-rows: 0.5fr repeat(2, 1fr);
}

.dashboard--heading {
  margin-top: 30px;
  text-align: center;
  align-self: center;
  color: #fff;
  font-size: 3rem;
  transform: rotate(-2deg);
}

.dashboard--selectors,
.dashboard--properties,
.dashboard--layouts {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dashboard--selectors h2,
.dashboard--properties h2,
.dashboard--layouts h2 {
  color: #fff;
  border-bottom: 1px dashed #fff;
  width: 150px;
  padding: 0.5rem;
  font-size: 1.2rem;
  text-align: center;
  margin: 30px 0;
}

.dashboard--selectors h2 {
  transform: rotate(-2.5deg);
}

.dashboard--properties h2 {
  transform: rotate(3deg);
}

.dashboard--layouts h2 {
  transform: rotate(-1.5deg);
}

/***************************************************/
/* SELECTORS */
/***************************************************/
/* Put Selector post-it styles here! ↓ */

/***************************************************/
/* PROPERTIES */
/***************************************************/
/* Put Property post-it styles here! ↓ */

.post-it {
  background-color: #ff6f91;
  aspect-ratio: 1 / 1;
  height: 200px;
  transform: rotate(-5deg);
}

.post-it h3 {
  font-weight: bold;
}

/***************************************************/
/* LAYOUTS */
/***************************************************/
/* Put Layout post-it styles here! ↓ */
#sarah-moran {
  background-color: #0089ba;
  height: 200px;
  aspect-ratio: 1/1;
  rotate: 5deg;
}
#greg-cain {
  background-color: #0089ba;
  max-width: 200px;
  max-height: 200px;
  transform: rotate(10deg);
}

#tarndeep {
  width: 200px;
  height: 200px;
  border: 2px turquoise solid;
  background-color: #0089ba;
  transform: rotate(-5deg);
}

#tarndeep h3 {
  font-weight: bold;
}

/***************************************************/
/* MEDIA QUERIES TO ENSURE RESPONSIVENESS */
/* Please do not change ^_^ */
/***************************************************/

@media screen and (min-width: 768px) {
  .dashboard-area {
    display: grid;
    grid-template-rows: 0.5fr repeat(2, 1fr);
    grid-template-areas:
      "Heading Heading Heading"
      "Selectors Properties Layouts"
      "Selectors Properties Layouts";
  }

  .dashboard--heading {
    grid-area: Heading;
  }

  .dashboard--selectors {
    grid-area: Selectors;
  }

  .dashboard--properties {
    grid-area: Properties;
  }

  .dashboard--layouts {
    grid-area: Layouts;
  }
}