:root{--primary-color: #ffbb00;--secondary-color: #ffce47;--dark-color: #000;--light-color: #f4f4f4;--dark-light-color: #bebdbd;--danger-color: #c52031;--success-color: #28a745}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;font-size:1rem;line-height:1.6;background-color:var(--dark-color);width:100%;height:100%;color:var(--light-color)}ul{list-style:none}a{text-decoration:none}img{width:100%}.container{max-width:1200px;margin:2rem auto 0;overflow:hidden;padding:0 2rem}header{text-align:center}.text-light{color:#fff}.text-primary{color:var(--primary-color)}.title{font-size:2.5rem}.btn{display:inline-block;background:var(--primary-color);color:#000;padding:.4rem 1.3rem;font-size:1rem;border:2px solid transparent;cursor:pointer;margin-right:.5rem;transition:opacity .2s ease-in;outline:none}.btn:hover{background-color:var(--secondary-color)}.btn-light:hover{background:var(--dark-light-color);color:#000}.search-form{padding:1rem;display:flex;justify-content:center}form{display:flex;justify-content:center;width:80%}label{width:50%}input{width:100%;padding:.5rem .4rem;font-size:1.2rem;border:1px solid #ccc;background-color:#ffffffe6}form button{margin-left:0;padding:.4rem 1rem;border:1px solid var(--primary-color);border-left:transparent;cursor:pointer;outline:none;font:inherit;background-color:var(--primary-color)}form button:hover{background-color:var(--secondary-color)}.results{display:grid;grid-template-columns:repeat(5,1fr);margin:1rem auto;max-width:1000px;position:relative}.card{width:180px;margin:10px;position:relative;display:flex;flex-direction:column;text-align:center}.card a:nth-of-type(2){color:var(--primary-color);text-decoration:underline}.card a:nth-of-type(2):hover{color:var(--secondary-color)}.details{margin-top:1rem}.details .btn{float:right}.details.error .btn{float:none;margin-top:1rem}.details h1{font-size:3rem}.details .info span{margin-right:1rem;border-right:1px solid grey;padding-right:1rem}.details .info span:last-of-type{border:none}.details .streaming{display:flex;flex-wrap:wrap}.details .streaming li{margin-right:1rem}.details .streaming li a{color:var(--primary-color);font-size:1.2rem;text-decoration:underline}.details .streaming li a:hover{color:var(--secondary-color)}.details .content{display:flex;margin-top:1rem}.details .content .poster{margin-right:1rem}.details .content .poster img{max-width:300px}.details .poster .ratings .rating img.imdb{width:40px}.details .poster .ratings .rating img.tomato,.details .poster .ratings .rating img.metacritic{width:20px}.details .poster .ratings .rating{display:flex;align-items:center;justify-content:space-between;padding:.2rem 1rem}.details .poster .ratings .rating span{margin-left:.75rem}.details .content .about{display:flex;flex-direction:column;margin-top:1rem}.details .content .about .plot{font-size:1.5rem}.details .content .about .credits{margin-top:2rem}.details .content .about .credits p{font-size:1.1rem}@media screen and (max-width: 1200px){.container{max-width:100%;padding:0 2rem}}@media screen and (max-width: 1000px){.results{grid-template-columns:repeat(4,1fr);max-width:780px}.card{width:175px}.details{margin:1rem 2rem}}@media screen and (max-width: 800px){.results{max-width:680px}.card{width:150px}}@media screen and (max-width: 768px){form{width:100%}.results{grid-template-columns:repeat(3,1fr);max-width:582px}.card{width:174px}.details .btn{float:none}}@media screen and (max-width: 600px){form{max-width:480px}label{width:100%}.container{padding:0}.results{max-width:480px}.card{width:140px}.details .content{display:flex;flex-direction:column}.details .content .poster{margin-right:0;display:flex}.details .content .poster img{max-width:200px}.details .content .about .plot{font-size:1.3rem}}@media screen and (max-width: 500px){form{max-width:100%}.results{display:flex;flex-wrap:wrap;max-width:100%;justify-content:center}.details h1{font-size:2.5rem}.details .content .poster{flex-direction:column;align-items:center}}