@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
:root {
  --white: white;
  --black: black;

  --blue950: #0d192c;
  --blue900: #15263f;
  --blue800: #2e405a;
  --blue500: #8bacd9;

  --cyan400: rgb(0, 255, 248);
  --cyan400-t: rgba(0, 255, 248, 0.4);

  --spacing-0: 0px;
  --spacing-100: 8px;
  --spacing-200: 16px;
  --spacing-250: 20px;
  --spacing-300: 24px;
}
* {
  box-sizing: border-box;
}
.textPreset1 {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
}
.textPreset2 {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: 18px;
  line-height: 145%;
}
.textPreset3-semiBold {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}
.textPreset3-regular {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: 16px;
}
.textPreset1,
.textPreset3-regular,
.textPreset3-semiBold {
  line-height: 125%;
}
.textPreset1,
.textPreset2,
.textPreset3-regular,
.textPreset3-semiBold {
  letter-spacing: 0px;
}
body {
  background-color: var(--blue950);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.card {
  width: 350px;
  height: 596px;
  padding: var(--spacing-300);
  background-color: var(--blue900);
  border-radius: 15px;
}
img {
  height: 302px;
  width: 302px;
  border-radius: 8px;
}
.card-minusImage {
  width: 191px;
  height: 166px;
}
h1 {
  color: var(--white);
}
.cost {
  color: var(--cyan400);
  display: inline-flex;
  align-items: center;
}
.cost::before {
  content: "";
  background-image: url("../images/icon-ethereum.svg");
  padding-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  width: 11px;
  height: 18px;
}
.cost-time {
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--spacing-300);
}
h1,
p,
.cost-time {
  width: 302px;
}
.border {
  width: 302px;
  border-bottom: 1px solid var(--blue800);
}
.avatar {
  height: 33px;
  width: 33px;
  border: 1px solid var(--white);
  border-radius: 50%;
}
.time,
.author,
p {
  color: var(--blue500);
}
.time {
  display: inline-flex;
  align-items: center;
}
.time::before {
  content: "";
  background-image: url("../images/icon-clock.svg");
  padding-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  width: 11px;
  height: 18px;
}
strong {
  color: var(--white);
}
.attribution {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 231px;
  height: 33px;
  padding-top: calc(var(--spacing-300) + 16px);
}
.card:hover h1 {
  color: var(--cyan400);
}
.card:hover strong {
  color: var(--cyan400);
}

.card:hover .image-container {
  position: relative;
  display: inline-block;
}
.card:hover .image-container img {
  width: 100%;
  display: block;
}
.card:hover .image-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--cyan400-t);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
.overlay-img {
  display: none;
}
.overlay-img img {
  width: 48px;
  height: 48px;
}
.card:hover .overlay-img {
  display: initial;
}