@import"https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap";*{padding:0;margin:0;font-family:Cal Sans,sans-serif;font-weight:300}body{background-color:#202026}.app{color:#a69581;height:100%;display:flex;justify-content:center}.input{display:flex;justify-content:center;flex-direction:column;gap:15px;padding:10px;align-items:center}.input>h1{font-size:2.5em;text-align:center}.input>input{width:400px;height:30px;padding-left:10px;font-size:1.3em;border:solid 1px #A69581;border-radius:5px;transition:box-shadow .5s ease-in-out,border .5s ease-in-out;color:#202026}.input input:focus{outline:none;border:#A69581 solid 1px;box-shadow:0 0 10px #a69581cc}.input>button{width:150px;height:30px;font-size:1.3em;background-color:#a69581;border:none;border-radius:5px;transition:box-shadow .3s ease-in-out,background-color .3s ease-in-out;color:#202026;cursor:pointer}.input>button:hover{background-color:#f2e0d0;box-shadow:0 0 10px #a69581cc}.movies{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.movie{display:flex;flex-direction:row;align-items:flex-start;width:600px;gap:1rem;background-color:#2a2a31;padding:1rem;border-radius:8px}.movie img{height:160px;border-radius:4px}.movie .info{display:flex;flex-direction:column;justify-content:center;gap:1rem;font-size:1.2em}.movie button{width:150px;height:30px;font-size:1em;background-color:#a69581;border:none;border-radius:5px;transition:box-shadow .3s ease-in-out,background-color .3s ease-in-out;color:#202026;cursor:pointer}.movie button:hover{background-color:#f2e0d0;box-shadow:0 0 10px #a69581cc}@media (max-width: 660px){.movie{width:90%}.input>input{width:90vw}}.details-container{height:100vh;box-sizing:border-box;display:flex;justify-content:center;align-items:center;padding:2rem;color:#a69581;overflow:hidden}.movie-details{display:flex;gap:2rem;max-width:800px;align-items:flex-start}.movie-details img{height:400px;border-radius:8px;box-shadow:0 0 10px #f2e0d048}.movie-details .info{display:flex;flex-direction:column;gap:1rem}.sinopse{height:200px;overflow-y:auto;padding-right:.5rem}.info button{width:150px;height:30px;font-size:1em;background-color:#a69581;border:none;border-radius:5px;transition:box-shadow .3s ease-in-out,background-color .3s ease-in-out;color:#202026;cursor:pointer}.info button:hover{background-color:#f2e0d0;box-shadow:0 0 10px #a69581cc}@media (max-width: 660px){.movie-details img{height:200px}}
