*{box-sizing:border-box}html,body{margin:0;padding:0;overflow-x:hidden}:root{--main-clr: #0178fe}.main-page{width:100%;height:100vh;box-sizing:border-box;display:grid;grid-template-columns:1fr;grid-template-rows:220px auto;grid-template-areas:"header" "content";min-width:300px}.header{grid-area:header;position:relative;display:flex;flex-direction:column;box-shadow:0 4px 10px #0000004d}.header-container{padding:0 4em;display:flex;flex-grow:1;justify-content:space-between;align-items:center}#watch-link{display:flex;gap:10px;padding:.5em 2em;border-radius:.5em;background:#0078ff;color:#fff}#watch-link:hover{background:#005bb5}.header-border{height:40px;background-color:red;background:url(/assets/movietape4-DymESy9i.jpg) repeat-x;background-size:auto 190%;background-position:center;box-shadow:0 4px 8px #0003}.search-info{margin:0;padding:3em 0;position:relative}.content{grid-area:content;background:linear-gradient(#ffffffe6,#ffffffb3),url(https://images.pexels.com/photos/57043/pexels-photo-57043.jpeg) no-repeat,linear-gradient(#b9e0f9cc,#b9e0f9cc);background-size:cover;background-blend-mode:saturation}.search-bar{position:absolute;width:550px;height:40px;left:50%;top:0;transform:translate(-50%,50%);display:flex;min-width:max-content;border:2px #e6e6e6 solid;border-radius:1em;overflow:hidden;box-shadow:4px 4px 8px #0003}.search-bar i{background:#fff;width:40px;border:none;display:flex;justify-content:center;align-items:center;padding:1em}.search-bar input{flex-grow:1;border:none;padding:1em;background:#fff}.search-bar button{padding:0 1em;border:none;min-width:max-content}button:focus,input:focus,a:focus{outline:none}h1,a{margin:0;padding:0;color:#fff;font-weight:800;text-decoration:none}.info-container{margin-top:3em;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#1c1c1c;gap:1em}.result-placeholder{height:max-content;display:grid;grid-gap:10px;text-align:center;font-size:20px;font-weight:600;margin:0;color:var(--main-clr)}.result-placeholder .main-icon{font-size:100px}.result-placeholder>*{margin:0;padding:0;height:max-content}.result-placeholder .subtext{color:var(--main-clr);font-size:15px}.film-block{height:250px;padding:25px;align-items:center;color:#000;box-shadow:1px 1px 8px #0003;background:#fff;border-radius:1em}.film-block,.film-block-row,.rating-block{display:flex}.film-block img{height:100%;width:140px;object-fit:fill;margin:0 20px 0 0}.film-block-row{max-width:500px;display:flex;justify-content:flex-start;align-items:center;margin:0}.film-block-title{margin:0}.film-block:not(:last-child){border-bottom:2px #e6e6e6 solid}.film-block-row:not(:last-child){margin-bottom:20px}.remove-btn,.add-btn{display:flex;padding:.5em 1em;border-radius:.5em;gap:.5em;background:none}.remove-btn{color:#f02659;border:#f02659 1px solid}.add-btn{color:#0040ba;border:#0040ba 1px solid}.rating-block{margin-left:10px;height:20px}.rating-block>*{margin:0;padding:0 3px}.film-block-row>*{margin:0 30px 0 0}button i,a i{pointer-events:none}.icon-container a{color:#000}.loading-bar{width:100%;background-color:#e0e0e0;padding:3px;border-radius:5px;position:relative;display:none}.loading-bar-progress{height:20px;background-color:#007bff;width:0%;border-radius:2px;transition:width .6s ease}#particles-js{margin:0;position:absolute;width:100vw;height:100%;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#1c1c1c;z-index:-5}.hidden{display:none}@media (max-width: 768px){.search-page{grid-template-rows:auto auto}.header-container{padding:0 1em;flex-direction:column;align-items:center;justify-content:center;text-align:center}#watch-link{margin-top:1em;padding:.5em 1em;font-size:.9em}.search-bar{position:static;width:90%;margin:-2em auto;transform:none}.info-container{padding:3em 1em;margin:0}.result-placeholder{width:100%;font-size:16px}.result-placeholder .main-icon{font-size:80px}.film-block{height:auto;max-width:500px;flex-direction:column;border-radius:1em;padding:1em}.film-block img{width:100%;height:auto;margin:0 0 1em}.film-block-row{flex-direction:column;padding:0 2em;align-items:center;justify-content:center}.film-block-row>*{margin:0}.film-block-row button{width:80%;margin-top:1em}.rating-block{margin:0;justify-content:center}}@media (max-width: 480px){h1{font-size:1.5em}#watch-link{font-size:.8em}.search-bar{height:3em}.film-block img{width:90%}}