@import url(https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap);*{margin:0;padding:0;-moz-box-sizing:border-box;box-sizing:border-box}body{background:#00303f;line-height:1.5;font-family:Caveat,cursive}.App{text-align:center;padding:1rem;max-width:1100px;margin:auto}.App>h1{text-align:center;color:#fff;margin-bottom:2rem;font-size:2rem;text-transform:uppercase}.App>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));grid-gap:1.5rem;-webkit-justify-content:center;-moz-box-pack:center;justify-content:center;-webkit-align-items:center;-moz-box-align:center;align-items:center}.Card{width:12rem auto;background:#5bb0ca;color:#e4c439;padding:1rem;border-radius:10px;border-top:.5px solid #e4c439;border-bottom:.5px solid #e4c439;text-align:center;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);position:relative;overflow:hidden;cursor:pointer;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.Card:hover{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);transform:scale(1.05)}.Card--id{background:#e4c439;width:3rem;padding:.1rem;position:absolute;border-radius:0 0 10px 0;top:0;left:0}.Card--id,.Card--name{color:#fff;font-weight:700}.Card--name{text-transform:capitalize;font-size:2rem}.Card--image{width:150px;display:block;margin:auto}.Card--details{font-size:1.3rem;color:#e4c439}