.movie-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;width:100%;box-sizing:border-box;padding:16px;list-style-type:none}.movie-card{position:relative;height:100%;text-align:center;border:1px solid #ddd;border-radius:10px;padding:2px;max-width:100%}.movie-card:hover{background-color:#d3d3d3}.movie-card:hover .icon-container{display:flex}.movie-card img{max-width:100%;border-radius:10px}.icon-container{display:none;position:absolute;top:8px;right:8px;flex-direction:column;gap:8px}.icon-button{background-color:#ffffffe6;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px #0003;transition:background-color .2s,color .2s;padding:0}.icon-button svg{width:16px;height:16px;color:#606770}.icon-button.favorite svg{color:#e0245e;fill:#e02453}.icon-button.watched svg{color:#17bf63}body.active-modal{overflow-y:hidden}.btn-modal{padding:10px 20px;display:block;margin:auto}.modal,.overlay{width:100vw;height:100vh;top:0;left:0;right:0;bottom:0;position:fixed}.overlay{background:#313131cc}.modal{z-index:99!important}.modal-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;max-height:70vh;overflow-y:auto;background:#fff;box-shadow:0 2px 10px #0003;padding:24px;border-radius:8px}.close-modal{position:absolute;top:10px;right:10px;padding:5px 7px}.modal img{width:12vw;height:20vw}.search-form{display:flex;justify-content:center;padding-bottom:20px;gap:10px}.search-input{padding:10px;border:1px solid #ddd;border-radius:4px;outline:none;box-shadow:inset 0 1px 2px #0000001a;transition:border-color .2s;font-size:1em}.search-input:focus{border-color:#3498db}li{display:flex;align-items:center;width:100%;text-align:left;padding:.75rem;border-radius:.5rem}.view-button.active{background-color:#0891b2;color:#fff;font-weight:600}.view-button.active:hover{background-color:0891b2}.navbar li button.active{background-color:#e7f3ff;color:#0d65d9;font-weight:600}.navbar button{width:85px}.App{text-align:center}.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-bar{flex-direction:column;gap:10px}.search-bar form{flex-direction:column}}.main-container{display:flex;flex-direction:row}.content-area{flex-grow:1;max-width:90%}footer{margin:20px}.banner-section{background-image:linear-gradient(to right,#356ee9,#6b1cf1);color:#fff;padding-top:3rem;padding-bottom:3rem;margin-bottom:3rem;border:10rem}body{margin:0;font-family:Arial,sans-serif;background-color:#f4f4f4}button{padding:10px 15px;background-color:#3498db;color:#000;border:none;border-radius:4px;cursor:pointer;box-shadow:0 2px 4px #0003;transition:background-color .2s,box-shadow .2s}button:hover{background-color:#2980b9;box-shadow:0 4px 8px #0000004d}button:active{background-color:#2471a3;box-shadow:0 2px 4px #0003}