body {
  font-family: "Roboto", sans-serif;
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}

#header {
  align-items: center;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  color: #0e0e0e;
  display: flex;
  flex-direction: row;
  font-family: "Permanent Marker", cursive;
  justify-content: center;
  text-transform: uppercase;
}

#body {
  height: 100%;
}

.results {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.search-result {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 25px;
  max-width: 300px;
}

.search-result__poster {
  height: 450px;
  width: 300px;
}

.search-result__year {
  margin-top: 15px;
}

.search__container {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.search__label {
  display: none;
}

.search__input {
  border-color: #8fd3f4;
  height: 20px;
  width: 250px;
}

.search__input::after {
  content: "X";
}

.error {
  color: #b30000;
  display: flex;
  justify-content: center;
  margin-top: 25px;
}