/* ****CONTENT**** */ .content { padding: 20px 20px 20px 20px; text-align: center; min-height: calc(100% - 242px); } .card { background-color: #D3DCE3; width: 300px; height: 500px; display: inline-block; vertical-align: top; margin: 1rem; border: 1px solid #aaa; border-radius: 3px; box-shadow: 1px 1px 2px #fff inset; } .card.dragging { opacity: 0.5; } /* FILLED CARD */ .card-content-wrapper { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* EMPTY CARD */ .add-btn { background-color: #235A81; width: 60px; height: 60px; border: 1px solid #235A81; border-radius: 30px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; text-align: center; align-items: center; text-decoration: none; color: #fff; text-shadow: 0.5px 0.5px 0.5px #444; font-size: 35px; } .add-btn:hover { background-color: #1f4f72; } .link { color: #235A81; }