csssheet.css

body {
  background-color: #0d192b; /* this is fallback color */
  background-color: hsl(217, 54%, 11%);
  /* Older browsers such as Internet Explorer 8 and earlier, do not understand
  rgba(), hsl(), or hsla(), and as a result will drop any declarations containing them.

  To prevent this, you should always include a fallback color in either hexadecimal,
  named, or rgb() format.

  This fallback colour should always go before the new colour to ensure older browsers see
  and use it correctly, and that newer browsers continue on to use the newer colour format. */
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: hsl(216, 50%, 16%);
  box-shadow: 0 18px 5px 15px hsl(216, 50%, 10%);
  border-radius: 3%;
  width: 25%;
  padding: 20px;
  font-family: "Outfit", sans-serif;
}

/* -------- all fonts -----------*/
h4 {
  color: hsl(0, 0%, 100%);
  font-weight: 600;
}

p.description {
  color: hsl(215, 51%, 70%);
  font-weight: 300;
  font-size: 16px;
}

.dtext {
  font-weight: 400;
  font-size: 16px;
}

/* ------------------- Top image ------------------*/
.topimg {
  margin: 0;
  padding: 0;
  height: 100%;
  text-align: center;
  position: relative;
}

.featureimg {
  border-radius: 3%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.overlay {
  width: 100%;
  height: 100%;
  background-color: hsl(178, 100%, 50%);
  border-radius: 3%;
  position: absolute;
  top: 0;
  opacity: 0;
}

.viewicon {
  opacity: 0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 1;
}

/* ---------------------------------------------------*/
.description {
  margin-top: 12px;
  margin-bottom: 6px;
  padding: 0;
}

.details {
  margin: 8px 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detailsleft {
  color: hsl(178, 100%, 50%);
}

.detailright {
  color: #8bacd9;
}

.icon {
  padding-right: 3px;
}

.icon,
.dtext {
  vertical-align: middle;
}

hr {
  border: 1px solid hsl(215, 32%, 40%);
  margin-top: 8px;
}

.profileimg {
  width: 10%;
  margin-right: 10px;
  vertical-align: middle;
  border: 1px solid white;
  border-radius: 50%;
}

.footer {
  margin: 8px 0px;
}

.author {
  font-family: "Outfit", sans-serif;
  color: hsl(215, 51%, 70%);
  font-weight: 400;
  font-size: 15px;
}

.highlight {
  color: white;
}

/* ------------------- Responsive  view ------------------*/
@media only screen and (max-width: 950px) {
  .card {
    width: 40%;
  }
}

@media only screen and (max-width: 600px) {
  .card {
    width: 75%;
  }
}

/*--------------------- All hover effect ---------------------*/
.highlight:hover,
h4:hover {
  color: hsl(178, 100%, 50%);
  cursor: pointer;
}

.topimg:hover .overlay,
.topimg:hover .viewicon {
  opacity: 0.6;
  cursor: pointer;
}