*{margin:0;padding:0;box-sizing:border-box}main{display:grid;place-items:center;min-height:100dvh;background:#0d192b}main .card{max-width:500px;background:#14253d;padding:2rem;margin:2rem;border-radius:2rem}main .card .img{position:relative;border-radius:1rem;overflow:hidden;cursor:pointer}main .card .img .logo{width:100%;aspect-ratio:1/1}main .card .img div{transition:500ms ease-in-out all;opacity:0;position:absolute;top:1px;left:1px;width:100%;height:100%;background:rgba(0,255,247,.307);display:grid;place-items:center}main .card .img:hover div{opacity:1}main .card h1{color:#fff;font-size:1.5rem;margin:1rem 0;transition:all 500ms ease-in-out;width:-moz-fit-content;width:fit-content;cursor:pointer}main .card h1:hover{color:#00fff7}main .card p{color:#8bacda;margin:0 0 1rem}main .card .info{display:flex;justify-content:space-between;align-items:center}main .card .info div{display:flex}main .card .info div:nth-child(1) p{color:#00fff7}main .card .info div p{width:80px}main .card .user{border-top:2px solid #2f415b;margin:1rem 0 0;padding:.75rem 0 0;display:flex;align-items:center}main .card .user img{height:50px;width:50px;-o-object-fit:contain;object-fit:contain}main .card .user p{margin:0 0 0 1rem;color:#2f415b}main .card .user p a{color:#fff;text-decoration:none;margin:0 0 0 .5rem;transition:all 500ms ease-in-out}main .card .user p a:hover{color:#00fff7}