:root{--primary-color:#002500}body,html{margin:0;padding:0}html{font-size:14px;font-family:Roboto Mono,monospace}body{color:#222}.wrap{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background:#fafafa;position:relative}.copyright{position:absolute;right:1px;bottom:1px;font-size:.7em}.card{width:8.3cm;height:5.5cm;box-shadow:2px 2px 5px 0 rgba(0,37,0,.3);color:var(--primary-color);transition:all .5s ease-out;transform:rotateY(0)}.card__back,.card__front{position:absolute;top:0;left:0;width:100%;height:100%;padding:30px}.card__front{transition:all .4s linear}.card__back{opacity:0;background-color:var(--primary-color);color:hsla(0,0%,98%,.9);display:flex;justify-content:center;align-items:center;flex-direction:column;padding:1.25em;transform:rotateY(.5turn);transition-delay:.17s}.card__back svg{flex-grow:1;fill:#fafafa;width:60px}.card__back p{width:100%;text-align:center;font-size:.6em}.card__title{font-size:1.5em;font-weight:700;border-bottom:3px solid var(--primary-color)}.card__content{position:relative}.card__heart{position:absolute;right:0;bottom:0;width:30px}.card__heart svg{fill:var(--primary-color)}.hover-wrapper-3d:hover .card{transform:rotateY(.5turn);box-shadow:-2px 2px 5px 2px rgba(0,37,0,.3)}.hover-wrapper-3d:hover .card .card__front{opacity:0}.hover-wrapper-3d:hover .card .card__back{opacity:1;transition-delay:.17s}*{box-sizing:border-box}p:last-child{margin-bottom:0}@font-face{font-family:Roboto Mono;src:url(fonts/RobotoMono-Regular.ttf)}@font-face{font-family:Roboto Mono;src:url(fonts/RobotoMono-Bold.ttf);font-weight:700}