:root{--background-color:linear-gradient(to left bottom,#d87a00,#f46246,#fa557c,#e75eaf,#bc74d7,#9487eb,#6197f4,#00a3f3,#00afed,#00b9e0,#00c0cf,#2ac6bc);--border-color:#1a65b131;--text-color:#34495e;--color1:#EC3E27;--color2:#fd79a8;--color3:#0984e3;--color4:#00b894;--color5:#fdcb6e;--color6:#e056fd;--color7:#F97F51;--color8:#BDC581;--a_border_color:#99bacc;--h2_border_color:#abc;--a_hover_background_color:#1a65b161;--font_color:#e8f6fd}
/**{margin:0;padding:0}*/
html{font-size:14px}
body{width:100vw;height:100vh;background-image:var(--background-color);background-size:200%;display:flex;justify-content:center;align-items:center;font-family:'Montserrat',sans-serif,Arial,'Microsoft Yahei';animation:bgAnimation 30s linear infinite}@keyframes bgAnimation{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.card{flex-shrink:0;flex-grow:0; float:left; position:relative;width:300px;height:450px;overflow:hidden;margin:20px;background-color:var(--border-color);border-radius:20px;display:flex;justify-content:flex-start;align-items:center;flex-direction:column;box-shadow:0 0 30px #2c2c2c;color:var(--font_color)}
.photo{position:absolute;width:100%;height:100%;top:0;border-radius:0;overflow:hidden;transition:.5s}
.photo::before{position:absolute;content:'';width:100%;height:100%;background-image:linear-gradient(to top,#292929e9,transparent)}
.card:hover .photo::before{display:none}
.photo img{width:100%;height:100%;object-fit:cover}
.card:hover .photo{width:120px;height:120px;top:30px;border-radius:50%;box-shadow:0 0 20px #111}h1{position:absolute;top:380px;transition:.5s}.card:hover h1{position:absolute;top:170px}
.card h2{margin-top:220px;width:80%;font-weight:normal;text-align:center;margin-bottom:20px;  color:#fff; padding-bottom:20px;border-bottom:1px solid #fff}
.card h1{color:#fff}
.card p{width:90%; color:#fff!important; text-indent:0em;font-size:12px;margin-bottom:10px;line-height:30px}
.card a{color:#fff;text-decoration:none;padding:12px 36px;border:1px solid #fff;border-radius:8px}
.card a:hover{color:#Fff;background-color:#1a65b161}