@import url("https://fonts.googleapis.com/css?family=Lato:400,900");
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 12px;
  min-height: 100vh;
  font-family: "Lato", sans-serif;
  background-color: whitesmoke;
}

h1, h2, p, ul {
  line-height: 1.2;
}
h1:not(:last-child), h2:not(:last-child), p:not(:last-child), ul:not(:last-child) {
  margin-bottom: 12px;
}

p, li {
  font-size: 0.9em;
  line-height: 1.5;
}

p + ul {
  margin-top: -10px;
}

h1, h2, strong {
  font-weight: 900;
}

input {
  padding: 6px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  border: 1px solid gainsboro;
  border-radius: 2px;
  -webkit-appearance: none;
}

.list--inline li {
  display: inline-block;
}
.list--inline li:not(:last-child) {
  margin-right: 12px;
}

.movie {
  position: relative;
  overflow: hidden;
  margin: 12px auto;
  width: 100%;
  max-width: 800px;
  background-color: white;
  border-radius: 0.8em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 30px 18px -24px;
          box-shadow: rgba(0, 0, 0, 0.2) 0 30px 18px -24px;
}
.movie__data {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 400px;
}
@media (min-width: 600px) {
  .movie__data {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.movie__search {
  position: absolute;
  top: 24px;
  right: 24px;
  margin: auto;
  width: calc(100% - (12px * 4));
}
@media (min-width: 400px) {
  .movie__search {
    max-width: 200px;
  }
}
.movie__tags {
  font-size: 0.75em;
  color: darkgray;
}
.movie__poster {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
@media (min-width: 600px) {
  .movie__poster {
    margin-right: 12px;
    width: 200px;
  }
}
.movie__poster--fill {
  position: absolute;
  overflow: hidden;
  top: -80%;
  bottom: -20%;
  left: -20%;
  width: 150%;
  height: 150%;
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
}
@media (min-width: 600px) {
  .movie__poster--fill {
    top: -20%;
    width: 100%;
  }
}
.movie__poster--fill img {
  -webkit-filter: blur(6px);
          filter: blur(6px);
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1.4);
          transform: scale(1.4);
}
.movie__poster--featured {
  position: relative;
  -ms-flex-item-align: center;
      align-self: center;
  overflow: hidden;
  margin-top: 84px;
  margin-left: 24px;
  width: 140px;
  background-color: gainsboro;
  border-radius: 2px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 6px 12px -6px;
          box-shadow: rgba(0, 0, 0, 0.6) 0 6px 12px -6px;
  z-index: 1;
}
@media (min-width: 600px) {
  .movie__poster--featured {
    left: 56px;
    margin: auto;
  }
}
.movie__poster--featured img {
  width: 140px;
  vertical-align: middle;
}
.movie__poster--featured img[src="N/A"] {
  min-height: 206px;
  opacity: 0;
}
.movie__details {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 24px;
}
@media (min-width: 600px) {
  .movie__details {
    padding: 72px;
  }
}
.movie__title {
  font-family: "Lato", sans-serif;
  font-size: 2em;
}
.movie__no-results {
  -ms-flex-item-align: center;
      align-self: center;
  justify-self: center;
  width: 100%;
  text-align: center;
}