body {
  background-color: #203849;
  color: white;
  font-family: Arial, sans-serif;
  margin: 20px;
}

header {
  text-align: center;
  border: 4px double gray;
  background-color: #222222;
  padding: 12px;
  margin-bottom: 15px;
}

h1 {
  color: yellowgreen;
  text-transform: uppercase;
  margin-bottom: 5px;
}

header p {
  color: yellow;
  letter-spacing: 5px;
  font-size: 14px;
}

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.card {
  border: 2px solid hotpink;
  background-color: #263f52;
  padding: 12px;
  min-height: 155px;
}

.card h2 {
  color: yellow;
  margin-top: 0;
  font-size: 20px;
}

.card p {
  font-size: 15px;
}

/* hover and transition */
.hoverBox {
  background-color: purple;
  transition: 0.5s;
}

.hoverBox:hover {
  background-color: orange;
}

/* rounded corners */
.roundBox {
  width: 140px;
  height: 65px;
  background-color: lightblue;
  border-radius: 18px;
  margin: 10px auto;
}

/* box shadow */
.shadowBox {
  width: 140px;
  height: 65px;
  background-color: black;
  box-shadow: 5px 5px 15px white;
  margin: 10px auto;
}

/* z-index is so easy but i have no clue how to get creative with it also im confused why I cant just position 2 boxes at the same point. what is the use of this*/
.zbox {
  position: relative;
}

.box {
  width: 70px;
  height: 70px;
  position: absolute;
}

.red {
  background-color: red;
  left: 45px;
  top: 85px;
  z-index: 1;
}

.blue {
  background-color: blue;
  left: 85px;
  top: 105px;
  z-index: 2;
}

/* font */
.fontTest {
  font-family: Georgia, serif;
  font-size: 18px;
}

/* position */
.posBox {
  position: relative;
}

.posBox span {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: yellow;
  font-weight: bold;
}

/* extra credit part 03 all next 3 */
.textShadow {
  font-size: 89px;
  text-shadow: 10px 10px 18px black;
}


/* I hate opacity, it feels useless */
.opacityWrap {
  position: relative;
  width: 140px;
  height: 80px;
  margin: 10px auto; 
}

/* back one */
.behindBox {
  width: 120px;
  height: 60px;
  background-color: red;
  position: absolute;
  top: 20px;
  left: 20px;
}

/* fron one */
.opacityBox {
  width: 120px;
  height: 60px;
  background-color: lime;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
}

/* Remember Useful ! */
.rotateBox {
  width: 120px;
  height: 60px;
  background-color: coral;
  transform: rotate(20deg);
  margin: 20px auto;
}

footer {
  text-align: center;
  margin-top: 25px;
}

a {
  background-color: #d5ffc5;
  color: black;
  border: 3px solid green;
  padding: 8px 12px;
  text-decoration: none;
}

a:hover {
  background-color: #6ff88d;
}