*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }

body {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #222;
  background-color: #151515;
  box-sizing: border-box;
  padding-bottom: 15rem; }

h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 2rem; }

h3 {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.2; }

#searchForm {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative; }
  @media only screen and (min-width: 43.75em) {
    #searchForm {
      width: 80%; } }
  @media only screen and (min-width: 56.25em) {
    #searchForm {
      width: 70%; } }
  @media only screen and (min-width: 94em) {
    #searchForm {
      width: 50%; } }
  #searchForm .search-icon {
    position: absolute;
    width: 2rem;
    left: 4rem;
    top: 1.4rem;
    fill: #222; }
    @media only screen and (min-width: 68.75em) {
      #searchForm .search-icon {
        left: 5.5rem; } }
    @media only screen and (min-width: 81em) {
      #searchForm .search-icon {
        left: 6.5rem; } }
  #searchForm input {
    height: 5rem;
    width: 70%;
    border-radius: 4px;
    padding-left: 6rem;
    padding-right: 3rem;
    border: none; }
    #searchForm input::placeholder {
      color: #222;
      font-weight: 100; }
  #searchForm button {
    background-color: white;
    color: #222;
    margin-left: 5px;
    width: 20%;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700; }

#results {
  padding: 0 4rem;
  transform: translateY(-13rem); }
  @media only screen and (min-width: 43.75em) {
    #results {
      display: flex;
      flex-wrap: wrap; } }

.search-results {
  width: 100%; }
  @media only screen and (min-width: 43.75em) {
    .search-results {
      width: 50%; } }
  @media only screen and (min-width: 56.25em) {
    .search-results {
      width: 33.33%; } }
  @media only screen and (min-width: 81em) {
    .search-results {
      width: 25%; } }
  .search-results:not(:last-child) {
    margin-bottom: 2rem; }
  .search-results .result-link {
    padding: 2rem;
    border-radius: 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 3fr;
    grid-template-areas: "img title" "img genre" "img rating"; }
    @media only screen and (min-width: 43.75em) {
      .search-results .result-link {
        grid-column-gap: 2rem; } }
    .search-results .result-link:hover {
      background-color: #252525;
      cursor: pointer; }
  .search-results .show-img {
    grid-area: img;
    height: 15rem;
    border-radius: 1rem; }
  .search-results h3 {
    grid-area: title;
    color: white; }
  .search-results .genre {
    grid-area: genre;
    color: white; }
  .search-results .rating {
    grid-area: rating; }
    .search-results .rating .rating-star {
      width: 2rem;
      display: inline-block; }
    .search-results .rating p {
      display: inline-block;
      color: white;
      padding-left: 1rem;
      transform: translateY(-3px); }

.header {
  background-color: transparent;
  display: flex;
  padding: 4rem 2rem;
  justify-content: center;
  z-index: 100; }
  .header nav {
    display: flex;
    background-color: white;
    color: #151515;
    border-radius: 2rem;
    z-index: inherit; }
    .header nav ul {
      display: inherit; }
      .header nav ul li {
        padding: 1rem 2rem;
        list-style: none;
        font-size: 1.4rem; }
        .header nav ul li a {
          text-decoration: none; }
          .header nav ul li a:visited {
            color: currentColor; }

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transform: translateY(-13rem);
  min-height: 60vh;
  background-image: linear-gradient(to bottom, rgba(21, 21, 21, 0.2), #151515), url("https://images.unsplash.com/photo-1503726876301-67e54d319b60?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2643&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }
  .home-hero h1 {
    color: white; }