.container .card:hover .face.face1{background:#ff0057}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:#893733;cursor:pointer;font:inherit;font-weight:800;line-height:1;width:200px;height:30px;margin-top:10px;position:relative;transition:filter var(--motion-duration)}button:hover{filter:brightness(1.1)}button:active{filter:brightness(.9)}button>span{display:block;position:relative;transition:transform var(--motion-duration) var(--motion-ease);z-index:1}button:hover>span{transform:scale(1.05)}button:active>span{transform:scale(.95)}button>svg{fill:#f7c657;position:absolute;top:-5%;left:-5%;width:110%;height:110%}button>svg>path{transition:var(--motion-duration) var(--motion-ease)}button:hover>svg>path{d:path("M0,0 C0,-5 100,-5 100,0 C105,0 105,100 100,100 C100,105 0,105 0,100 C-5,100 -5,0 0,0")}button:active>svg>path{d:path("M0,0 C30,10 70,10 100,0 C95,30 95,70 100,100 C70,90 30,90 0,100 C5,70 5,30 0,0")}.body{margin:0;padding:0;min-height:100vh;background:#f5f2e9;justify-content:center;align-items:center;font-family:consolas}.body,.container{width:100%;display:flex}.container{position:relative;justify-content:space-around}.container .card{position:relative;cursor:pointer}.container .card .face{width:300px;height:350px;transition:.5s}.container .card .face.face1{position:relative;background:#f5f2e9;display:flex;justify-content:center;box-shadow:0 -15px 15px 0 rgba(0,0,0,.2);border-top-left-radius:20px;border-top-right-radius:20px;align-items:center;z-index:1;transform:translateY(120px)}.container .card:hover .face.face1{background:#f5f2e9;transform:translateY(0)}.container .card .face.face1 .content{opacity:.1;transition:.5s;display:none}.container .card:hover .face.face1 .content{opacity:1;display:block}.container .card .face.face1 .content img{max-width:100px}.container .card .face.face1 .content h3{padding:0;color:#fff;text-align:center;font-size:1.5em}.container .card .face.face2{position:relative;background:#f5f2e9;display:flex;justify-content:center;align-items:center;box-sizing:border-box;box-shadow:0 0 15px 0 rgba(0,0,0,.2);border-bottom-left-radius:20px;border-bottom-right-radius:20px;transform:translateY(-120px)}.container .card .face.face2 .content{display:none}.container .card:hover .face.face2 .content{display:block}.container .card:hover .face.face2{transform:translateY(0)}.container .card .face.face2 .content p{margin:0;padding:0}.container .card .face.face2 .content a{margin:15px 0 0;display:inline-block;text-decoration:none;font-weight:900;color:#333;padding:5px;border:1px solid #333}.button{display:flex;width:200px;background-color:#f7c657;justify-content:center;align-items:center;margin-top:10px;height:40px;border-radius:50px;font-weight:700;color:#ad2b22}.button:hover{background-color:#f5f2e9;border:1px solid #000}.container .card .face.face2 .content a:hover{background:#333;color:#fff}