@import url(<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet);*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif;-webkit-font-smoothing:antialising}body{background:linear-gradient(30deg,#4f4f4d,#14102f);background-attachment:fixed}*,button,input{border:0;outline:0}li{list-style:none}h1{margin:16px;color:#fff;text-align:center;font-weight:700}.image{width:200px;height:200px;margin:5vh 0;overflow:hidden;position:relative;box-shadow:0 0 6px rgba(0,0,0,.5);border:4px solid #fff;border-radius:50%;display:flex}.image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;align-self:center}header{display:flex;flex-direction:column;align-items:center;justify-content:center}main{width:95%;margin:auto}ul{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-items:center}.card{position:relative;height:440px;min-width:320px;width:250px;background-color:#223;padding:20px;margin:20px;box-shadow:inset 5px 5px 5px transparent,inset -5px -5px 15px hsla(0,0%,100%,.1),5px 5px 15px rgba(0,0,0,.3),-5px -5px 15px hsla(0,0%,100%,.1);border-radius:15px}.card .box{position:absolute;top:20px;left:20px;right:20px;bottom:20px;background:#2a2a2f;border:20x solid #1e1f23;border-radius:15px;box-shadow:0 20px 50px rgba(0,0,0,.5);transition:.2s}.card .box:hover{box-shadow:0 40px 70px rgba(0,0,0,.6);transform:translateY(-50px)}a{display:flex;flex-direction:column;align-items:center;justify-items:center;text-align:center;font-weight:500;font-size:16px;line-height:30px}img{width:250px;height:200px;border-radius:8px;margin:10px 0;-o-object-fit:cover;object-fit:cover}a{text-decoration:none;color:#fff;flex:1 1;line-height:32px}a:hover{opacity:.8}