body{font-family:Arial,sans-serif;background-color:#f2f2f2}header{background:linear-gradient(to top,rgba(0,0,0,.25),rgba(0,0,0,.62)),url(/img/clouds.jpeg) no-repeat center center/cover;color:#fff;padding:1rem;text-align:center}header h1{font-size:2rem;font-weight:700}main{display:flex;flex-direction:column;gap:.2rem;padding:1rem;max-width:1200px;margin:0 auto}section{background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);border-radius:.5rem;padding:1rem}.section-title{font-size:1.5rem;margin-bottom:1rem}.videos-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1.2rem;gap:1.2rem}.video{position:relative}.video img{height:auto;width:100%;-o-object-fit:cover;object-fit:cover;border-radius:.4rem}.video a{display:block;padding:1rem;color:#484848;text-decoration:none;background-color:rgba(242,242,242,.5);transition:box-shadow .1s ease-in-out;transition:transform .1s ease-in-out;border-radius:1rem;max-width:30rem}.video a:hover{box-shadow:1px 0 8px rgba(164,164,164,.3137254902);transition:transform .1s ease-in;transform:scale(1.05)}.video h3{margin-top:1rem;font-size:1rem;font-weight:700;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.video span{display:block;font-size:.8rem;margin-top:.5rem;color:#484848}.livenow{width:16px;display:inline-block;margin:0;padding-bottom:1.1rem;padding-left:.4rem}.livenow>div{vertical-align:middle;width:16px;height:16px;border-radius:100%;position:absolute;margin:0 auto;border:3px solid #ff6464;animation:live 1.6s infinite ease-in-out;animation-fill-mode:both}.livenow>div:nth-child(1){background-color:rgba(255,100,100,.3);background-color:#ff6464;animation-delay:-.1s}.livenow>div:nth-child(2){animation-delay:.16s}.livenow>div:nth-child(3){animation-delay:.42s;border:3px solid rgba(255,100,100,.5)}.livenow>div:nth-child(4){border:3px solid #ff6464;animation-delay:-.42s}@keyframes live{0%,100%,80%{transform:scale(.6);-webkit-transform:scale(.6)}40%{transform:scale(1);-webkit-transform:scale(1)}}footer{position:relative;bottom:0;left:0;right:0;text-align:center;color:#202020;padding:1rem;text-align:center}footer a{position:relative;display:inline-block;color:#202020;text-decoration:none;transition:color .2s ease-in-out}footer a::after,footer a::before{content:"";position:absolute;width:0;height:2px;bottom:-2px;transition:width .2s ease-in-out}footer a::before{left:50%;background-color:#42b885}footer a::after{right:50%;background-color:#42b885}footer a:hover::before{width:50%}footer a:hover::after{width:50%}footer a:hover{color:#42b885}