.App{text-align:center;background-color:#000}.App-header{background-color:#282c34;display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;color:#fff;padding:20px}@media (max-width: 600px){.movie-card{width:100%}#search-and-sort{flex-direction:column;align-items:center}select{margin:none}}#search-bar-container{margin-left:7rem}#search-and-clear{display:flex}header{display:flex;background-color:#888;justify-content:center;align-items:center}select{display:flex;margin-right:6rem}#search-and-sort{display:flex;align-items:center;padding:1rem;background-color:#888;justify-content:space-between}#clear-btn,#wrapper{display:flex}#side-bar{display:flex;flex-direction:column;background-color:#000;width:5rem;border-right:solid #888}.nav-btns{display:flex;flex-direction:column;color:#fff;background-color:#000;border-right:solid #888;margin-top:none;gap:2rem}.search-movie-list{display:flex}.movie-list{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;width:100%;height:100%;gap:.5rem;background-color:#000}#load-more-container{display:flex;justify-content:center;background-color:#000;margin-bottom:.6rem}#load-more{background-color:#fff;border:solid#888;color:#000}.movie-card{position:relative;margin:20px;display:flex;height:30.5rem;width:14rem;align-items:center;flex-direction:column;box-sizing:border-box;border:solid #888;border-radius:1.4rem;cursor:pointer}.movie-card:hover{border:none;box-shadow:10px 5px 5px #888;transition:box-shadow .15s}.watched{position:absolute;top:8px;right:8px;font-size:1.2rem;font-weight:900;cursor:pointer;color:#fff;z-index:1;background-color:transparent}#modal{display:flex;position:fixed;z-index:2;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#8c878766;justify-content:center;align-items:center;border-radius:10px}#modal-content{display:flex;flex-direction:column;gap:.9rem;padding:.3rem;max-width:100%;max-height:100%;object-fit:contain}.image-container{max-width:100%;max-height:100%;object-fit:contain;border:none}.movie-image{border-radius:1.35rem;object-fit:contain;max-width:100%;max-height:100%}.movie-info{display:flex;flex-direction:column;align-items:center;max-width:fit-content;max-height:fit-content}h2{display:flex;font-size:1rem;color:#f8f8f8}.movie-rating{color:#f8f8f8}#modal-movie-image-container{display:flex;justify-content:center;height:13rem;border:none}#modal-movie-image{border-radius:1.35rem;object-fit:contain}#modal-content-container{display:flex;z-index:1;flex-direction:column;background-color:#000;margin:45% auto;color:#f8f8f8;padding:20px;border:1px solid #888;position:relative;height:40rem;width:55rem;border-radius:4rem;overflow:scroll;gap:2rem;justify-content:center}#trailer{display:flex;justify-content:center}footer{display:flex;background-color:#888;color:#000;border-top:solid #888;font-weight:900;font-size:2rem;justify-content:center}body{margin:0;font-family:Arial,sans-serif;background-color:#f4f4f4}button{background-color:#282c34;color:#fff;cursor:pointer;font-size:16px;font-weight:700;transition:background-color .3s ease}button:hover{background-color:#777;color:#fff}