*,
*::after,
*::before {
  margin: 0;
  padding: 0;
}
:root {
  --Soft-blue: hsl(215, 51%, 70%);
  --Cyan: hsl(178, 100%, 50%);
  --Very-dark-blue-one: hsl(217, 54%, 11%);
  --Very-dark-blu: hsl(216, 50%, 16%);
  --Very-d-ark-bl: hsl(215, 32%, 27%);
  --White: hsl(0, 0%, 100%);
  --Outfit-font: "Outfit", sans-serif;
}
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: var(--Very-dark-blue-one);
}
.main-card {
  display: flex;
  flex-direction: column;
  background-color: var(--Very-dark-blu);
  border-radius: 15px;
  width: 300px;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 30px;
  box-shadow: -5px 5px 6px 5px hsl(216, 52%, 12%),
    5px 5px 5px 4px hsl(216, 63%, 6%);
}
.top-img {
  height: 285px;
  width: 280px;
  border-radius: 10px;
}
h1 {
  font-family: var(--Outfit-font);
  font-weight: 600;
  color: var(--White);
  font-size: 19px;
  letter-spacing: 0.5px;
  margin: 25px 0 20px 0;
  opacity: 0.9;
}
p {
  font-size: 18px;
  font-family: var(--Outfit-font);
  color: var(--Soft-blue);
  opacity: 0.6;
  margin-bottom: 29px;
}
.justify-section {
  display: flex;
  flex-direction: row;
  font-family: var(--Outfit-font);
  margin-bottom: 20px;
}
.f33f {
  color: var(--Cyan);
  padding-right: 90px;
  font-weight: 600;
  font-size: 15px;
}
.time {
  color: var(--Soft-blue);
  font-weight: 400;
  font-size: 15px;
}
hr {
  width: 280px;
  opacity: 0.1;
}
.footer {
  display: flex;
  margin-top: 20px;
}
.footer img {
  width: 25px;
  height: 25px;
  margin-right: 20px;
  border: 1px solid var(--White);
  border-radius: 50%;
}
h3 {
  font-size: 16px;
  font-family: var(--Outfit-font);
  color: var(--Soft-blue);
  margin-top: 5px;
  font-size: 15px;
}
span {
  color: var(--White);
  font-family: var(--Outfit-font);
  margin-left: 9px;
  margin-top: 5px;
  font-size: 15px;
}
.time img {
  margin-top: 0px;
}