@font-face {
  font-family: story_script;
  src: url(StoryScript-Regular.ttf);
}

html {
  background-color: hsla(204, 4%, 24%, 0.645);
  font-family: story_script;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: xx-large;
}

hr {
  width: stretch;
  border-color: black;
}

button {
  background-color: tan;
  padding: 15px;
  border-style: inset;
  border-color: rgb(142, 148, 144);
  border-width: 10px;
  border-radius: 8px;
  font-family: story_script;
  font-size: large;
}

button:hover {
  cursor: pointer;
  background-color: rgb(0, 255, 191);
}

.cool-result {
  background-image: url("gold.avif");
  background-size: 100% 100%;
  background-position: center;
  font-weight: bold;
  color: rgb(60, 25, 0);
  padding: 5px;
}

.row-container {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-direction: row;
}

#card-image {
  width: 226px;
}

#card-image2 {
  width: 226px;
}

#favorite-image {
  width: 226px;
}

#favorite-btn1,
#favorite-btn2 {
  background-color: gold;
  margin-top: 10px;
}

#favorite-btn1:hover,
#favorite-btn2:hover {
  background-color: orange;
}

#favorite-result {
  padding: 8px;
  border: 3px solid gold;
  border-radius: 8px;
}

.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}