*{padding:0;margin:0}body{font-family:Poppins,sans-serif;min-height:100vh;display:flex;flex-direction:column}.app-bar,body{background-color:#fff}.app-bar{padding:8px 16px;display:grid;grid-template-columns:auto 1fr auto;grid-gap:10px;gap:10px;position:-webkit-sticky;position:sticky;top:0;z-index:99;box-shadow:0 2px 4px 0 rgba(0,0,0,.2)}@media screen and (max-width:25em){.app-bar{grid-template-columns:1fr;grid-template-rows:auto auto;gap:0}}.app-bar .app-bar__menu{display:flex;align-items:center}.app-bar .app-bar__menu button{background-color:transparent;border:none;font-size:18px;padding:8px;cursor:pointer}.app-bar .app-bar__brand{display:flex;align-items:center}.app-bar .app-bar__brand h1{color:#db0000;text-transform:uppercase;font-size:22px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.app-bar .app-bar__navigation{display:inline-block;text-align:center;padding:8px;background-color:#fff;overflow:hidden}.app-bar .app-bar__navigation.open{left:0}.app-bar .app-bar__navigation ul li a{display:inline-block;text-decoration:none;color:#000;padding:8px;margin-bottom:5px;width:100%}main{padding:32px;flex:1 1}.content{margin:0 auto;min-height:100%}.content .content__heading{font-weight:400}.movies{display:grid;grid-template-columns:1fr;grid-gap:16px;gap:16px;margin:32px 0}.movie-item{width:100%;box-shadow:0 4px 8px 0 rgba(0,0,0,.2);border-radius:8px;overflow:hidden}.movie-item__header{position:relative}.movie-item .movie-item__header .movie-item__header__poster{width:100%}.movie-item .movie-item__header .movie-item__header__rating{position:absolute;padding:8px;bottom:20px;left:0;display:inline-block;background-color:#000;color:#fff}.movie-item .movie-item__header .movie-item__header__rating .movie-item__header__rating__score{margin-left:10px}.movie-item .movie-item__content{padding:16px}.movie-item .movie-item__content h3{margin:0 0 10px}.movie-item .movie-item__content h3 a{color:#db0000;text-decoration:none}.movie-item .movie-item__content p{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.movie{margin:0 auto;width:100%;max-width:800px;display:grid;grid-template-columns:1fr;grid-gap:18px 16px;gap:18px 16px}.movie .movie__poster{width:100%;max-width:400px}.movie .movie__info h4{margin:8px 0}footer{padding:16px}footer p{text-align:center;color:#aaa}footer p a{color:#db0000;text-decoration:none}@media screen and (min-width:650px){.app-bar{grid-template-columns:1fr auto;padding:8px 32px}.app-bar .app-bar__brand h1{font-size:1.5em}.app-bar .app-bar__menu{display:none}.app-bar .app-bar__navigation{position:static;width:100%}.app-bar .app-bar__navigation ul li{display:inline-block}.app-bar .app-bar__navigation ul li a{display:inline-block;width:120px;text-align:center;margin:0}.movies{grid-template-columns:1fr 1fr}.movie{grid-template-columns:auto 1fr}.movie .movie__overview,.movie .movie__title{grid-column-start:1;grid-column-end:3}}@media screen and (min-width:800px){.app-bar .app-bar__brand h1{font-size:2em}}@media screen and (min-width:850px){.movies{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:1200px){.movies{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width:1600px){.movies{grid-template-columns:repeat(5,1fr)}}