body,html{font-size:16px}*,:before,:after{box-sizing:border-box}body,html,h1,h2,h3,h4,h5,h6,p,ol,ul{margin:0;padding:0}ol,ul{list-style-type:none}*{font-family:"Exo 2"}h1{color:#001858;font-size:2rem;font-weight:700}h2{color:#001858;font-size:1.25rem}h3{color:#001858;font-size:1rem}p{color:#172c66;font-size:.875rem;font-weight:400}button{width:125px;height:50px;cursor:pointer;border:none;border-radius:6px;font-size:1.25rem;font-weight:600}.btn--save{color:#001858;text-shadow:0 0 3px #8bd3dd;background-color:#f582ae;box-shadow:0 0 5px #f582ae}.btn--save:hover{color:#d9d9d9;background-color:#2f5cfe;box-shadow:0 0 5px #2f5cfe}.btn--save:focus-visible{color:#d9d9d9;background-color:#2f5cfe;box-shadow:0 0 5px #2f5cfe}.delete-all{text-align:center;margin-top:32px}.delete-all .btn--delete-all{color:#e22100;text-shadow:0 0 1px #e22100;background:0 0;font-weight:400}.delete-all .btn--delete-all:hover{color:#e22151;text-shadow:0 0 1px #e22151}.delete-all .btn--delete-all:focus-visible{color:#e22100;text-shadow:0 0 3px #e22100;box-shadow:0 0 5px #e22100}.btn--delete{width:24px;height:24px;background:0 0;place-content:center;place-self:center;animation-name:fadein;animation-duration:1s;display:grid;position:absolute;bottom:17px}.btn--delete svg{fill:#e22100;opacity:.6;position:relative}.btn--delete svg:hover{opacity:1}.btn--delete svg:focus-visible{opacity:1}@media (max-width:530px){.controller button{width:200px;margin:0 auto}.controller .delete-all .btn--delete-all{width:150px}}iframe{border-radius:15px 15px 0 0}.spinner{width:30px;height:30px;border:5px solid #f3d2c1;border-color:#f3d2c1 #8bd3dd #d9d9d9 #f582ae;border-radius:50%;margin:10px auto;animation:.5s linear infinite spin;position:relative}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}body{background-color:#fef6e4}body .container{max-width:1200px;width:100%;background-color:#f3d2c1;border-radius:10px;margin:0 auto}.hidden{display:none}footer p{text-align:center;padding:32px}footer p a{color:#001858;font-weight:600;text-decoration:none}footer a:hover{-webkit-text-decoration:underline double;text-decoration:underline double}.header{background-color:#8bd3dd;border-radius:10px 10px 0 0;grid-template-columns:1fr 1fr;place-items:center;padding:32px;display:grid;position:relative}.header .headline{width:100%;padding-bottom:8px}.header .tagline{width:80%;font-weight:600}.header .controller{width:100%;height:100%;flex-direction:column;margin:0 auto;display:flex;position:relative}.header .controller label{grid-template:"videoid videoid"max-content"input btn"max-content/max-content max-content;place-content:center;gap:8px;display:grid}.header .controller label h3{grid-area:videoid;font-weight:600}.header .controller label #video-id{border:2px solid #001858;border-radius:6px;grid-area:input}.header .controller label input{width:200px;color:#172c66;text-align:center;background-color:#fef6e4cc;border:none;outline:none;font-size:1.25rem;font-weight:600}.header .controller label input::placeholder{color:#172c66;opacity:.6;padding:0 16px;font-size:1rem}.header .controller label button{grid-area:btn}@media (max-width:768px){.header{grid-template-columns:1fr;gap:16px}.header .headline{text-align:center}.header .tagline{width:80%;margin:0 auto}}@media (max-width:530px){.header{place-content:center}.header .tagline{width:100%}.header .controller label{grid-template:"videoid""input"1fr"btn"1fr/1fr}.header .controller label input{margin:0 auto}.header .controller label h3{text-align:center}}.videocard-w{max-width:1200px;height:auto;grid-template-columns:repeat(auto-fit,320px);place-content:center;gap:16px;margin:0 auto;padding:32px;display:grid;position:relative}.videocard-w .videocard{width:320px;height:320px;background-color:#fef6e4;border-radius:15px;flex-direction:column;animation-name:slidein;animation-duration:.3s;display:flex;position:relative;box-shadow:0 4px 4px #00000040}@keyframes slidein{0%{opacity:0;translate:-200px}to{opacity:1;translate:0}}.videocard-w .videocard .videocard--img{width:320px;height:180px}.videocard-w .videocard .videocard--img img{cursor:pointer;border-radius:15px 15px 0 0;animation-name:fadein;animation-duration:1s}@keyframes fadein{0%{opacity:0}to{opacity:1}}.videocard-w .videocard .videocard--title{-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0 20px;font-weight:600;animation-name:fadein;animation-duration:1s;display:-webkit-box;position:absolute;bottom:87px;left:0;overflow:hidden}.videocard-w .videocard .videocard--channel-title{padding:0 20px;animation-name:fadein;animation-duration:1s;position:absolute;bottom:60px;left:0}.videocard-w .videocard .videocard--date{padding:0 20px;animation-name:fadein;animation-duration:1s;position:absolute;bottom:17px}.videocard-w .videocard .videocard--date svg{animation-name:fadein;animation-duration:1s;position:relative;bottom:0}.videocard-w .videocard .videocard--duration{padding:0 20px;animation-name:fadein;animation-duration:1s;position:absolute;bottom:17px;right:0}.videocard-w .videocard .videocard--duration svg{animation-name:fadein;animation-duration:1s;position:relative;bottom:0}
/*# sourceMappingURL=index.5dab3994.css.map */