*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;background-color:gray}.App{display:flex;height:100vh;background-color:gray;flex-direction:row;align-items:center;justify-content:center;align-content:center;flex-wrap:wrap}.controls-wrapper{display:flex;margin-top:20px;flex-direction:column;max-height:30rem;height:100%;max-width:30rem;width:100%;padding:20px;border:1px solid #ccc;border-radius:5px;background-color:#fff;box-shadow:0 2px 8px #0000001a;flex-wrap:wrap;align-items:stretch}.controls-wrapper input{margin-bottom:10px;padding:10px;border-radius:5px;border:1px solid #ccc}.controls-wrapper input:focus{outline:none;border-color:#007bff}.indicator-wrapper{position:relative}.indicator-rating{position:absolute;top:-24px;left:0;background:#007bff;color:#fff;padding:2px 4px;border-radius:4px;font-size:12px;white-space:nowrap;max-width:15px;min-width:15px}.controls-wrapper textarea{margin-bottom:10px;padding:10px;border-radius:5px;border:1px solid #ccc;height:10rem;width:100%;resize:none}.controls-wrapper textarea:focus{outline:none;border-color:#007bff}.clear-movie-btn{margin-top:10px;padding:10px;border-radius:5px;border:1px solid #ccc;width:100%;background-color:#f4f4f4;cursor:pointer}.clear-movie-bt n:hover{background-color:#e4e4e4}.add-movie-btn{margin-top:10px;padding:10px;border-radius:5px;border:1px solid #007bff;width:100%;background-color:#007bff;color:#fff;cursor:pointer}.add-movie-btn:hover{background-color:#0056b3}.controls-wrapper button:hover{background-color:#e4e4e4}.controls-wrapper button:active{background-color:#d4d4d4}.controls-wrapper button:disabled{background-color:#f4f4f4;cursor:not-allowed}.controls-wrapper button:disabled:hover{background-color:#f4f4f4}.movie-list{display:flex;flex-wrap:nowrap;position:relative;top:10px;padding:10px;gap:20px;margin:auto 1rem;max-height:30rem;height:100%;overflow-y:auto;background-color:#fff;border:1px solid #ccc;border-radius:5px;box-shadow:0 2px 8px #0000001a;flex-direction:column}.movie-list::-webkit-scrollbar{width:.5rem}.movie-list::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:5px}.movie-list::-webkit-scrollbar-thumb:hover{background-color:#bbb}.movie-list::-webkit-scrollbar-track{background-color:#f4f4f4;border-radius:5px}.movie-list::-webkit-scrollbar-track:hover{background-color:#e4e4e4}.movie-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;width:30rem;padding:20px;border:1px solid #ccc;border-radius:5px;background-color:#fff;box-shadow:0 2px 8px #0000001a}.movie-card h2{margin-bottom:10px;font-size:1.5rem;color:#333}.movie-card p{margin-bottom:10px;font-size:1rem;color:#666;max-width:fit-content;overflow-wrap:break-word;text-overflow:ellipsis}.movie-card button{padding:10px;border-radius:5px;border:1px solid #ccc;background-color:#f4f4f4;cursor:pointer}.movie-card button:hover{background-color:#e4e4e4}.movie-card button:focus{outline:none;border-color:#007bff}