@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=Rouge+Script&family=Rubik+Dirt&display=swap");

.menu-bar {
  background-color: #981e92;
  box-sizing: border-box;
  font-family: "Rubik Dirt", system-ui;
}
.item {
  color: black;
  font-size: 20px;
  display: inline-block;
  padding: 20px 20px;
  font-weight: 500;
  text-decoration: none;
}
.item:hover {
  background-color: rgba(252, 7, 195, 0.548);
}
.name {
  font-size: 20px;
}
body {
  margin: 0;
}
.poster {
  height: 110vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(
    90deg,
    rgba(9, 12, 55, 1) 0%,
    rgba(104, 24, 109, 1) 67%
  );
}
.poster {
  background-image:
    linear-gradient(rgba(128, 128, 128, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 128, 128, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 12, 55, 1) 0%, rgba(104, 24, 109, 1) 67%);
  background-size:
    60px 60px,
    60px 60px,
    100%;
}
.cheer {
  background-image:
    linear-gradient(rgba(128, 128, 128, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 128, 128, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 12, 55, 1) 0%, rgba(104, 24, 109, 1) 67%) !important;
  background-size:
    60px 60px,
    60px 60px,
    100% !important;
}
.cake {
  font-size: 55px;
  font-weight: 500;
  font-family: "Rubik Dirt", system-ui;
}
.motivation {
  font-size: 80px;
  margin: 20px;
  font-family: "Pixelify Sans", sans-serif;
}
.ice {
  font-size: 55px;
  font-weight: 600;
  font-family: "Rouge Script", cursive;
}
.author {
  font-size: 40px;
  font-weight: 500;
  font-family: "Rubik Dirt", system-ui;
}
.cheer {
  background-image: linear-gradient(
    90deg,
    rgba(9, 12, 55, 1) 0%,
    rgba(104, 24, 109, 1) 67%
  );
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  font-size: 40px;
  font-weight: 400;
  font-family: "Rubik Dirt", system-ui;
}
.cheer img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 0 0 4px #981e92;
  border-radius: 8px;
  transition:
    box-shadow 0.3s ease,
    filter 0.3s ease,
    transform 0.3s ease;
}
.cheer img:hover {
  filter: brightness(1.2) saturate(1.2);
  box-shadow:
    0 0 0 4px #981e92,
    0 0 25px 8px rgba(252, 7, 195, 0.7);
  transform: scale(1.03);
}
.cake:hover,
.motivation:hover,
.ice:hover,
.name:hover,
.orange:hover,
.apple:hover,
.author:hover {
  color: rgba(252, 7, 195, 0.8);
}
body,
.item {
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'><polygon points='0,0 0,20 7,14 11,24 14,22 10,12 20,12' fill='%23981e92' stroke='white' stroke-width='1.5'/></svg>")
      0 0,
    auto;
}