* { box-sizing: border-box; }

body { background-color: #bdc3c7; font-family: 'Open Sans', sans-serif; }

.board { color: #ffeaa7; text-align: center; }

.btn { border-radius: 30%; font-weight: bold; background-color: #6c5ce7; color: #dfe6e9; }

.btn:hover { box-shadow: 2px 2px 2px #ffeaa7; }

.add-card { border-radius: 45%; font-size: 1.1em; margin-bottom: 5px; padding: 2%; }

.add-card:active { color: #74b9ff; }

.add-text:hover { color: #d35400; }

.btn-hide { display: none; }

.btn-archive:hover { color: #48dbfb; }

.btn-delete:hover { color: #d63031; }

.btn-restore:hover { color: #fbc531; }

.create-column { border-radius: 10%; font-size: 1.2em; margin-bottom: 20px; }

.create-column:active { box-shadow: 5px 5px 5px #6c5ce7; }

.column { background-color: #0984e3; border: 2px solid #2f3542; border-radius: 5px; float: left; min-height: 200px; width: 400px; }

.column ul { list-style-type: none; }

.column:hover .column-title { text-shadow: 1px 1px 2px black, 0 0 20px blue, 0 0 5px darkblue; }

.column-card-list { min-height: 50px; }

.card { background-color: #74b9ff; border: 2px solid #6c5ce7; border-radius: 10px; color: #2d3436; font-family: 'Indie Flower', cursive; font-weight: bold; font-size: 1.4em; margin: 0 10% 2% 1%; padding: 5px; text-align: left; }

.card:hover { box-shadow: 5px 5px 5px #ffeaa7; }

.card:active { box-shadow: 10px 10px 10px #6c5ce7; }

.tooltip { border-bottom: 1px dotted black; position: relative; }

.tooltip .tooltip-text { background-color: rgba(0, 0, 255, 0.5); border-radius: 6px; color: #fff; font-size: 1.2em; font-weight: bold; padding: 5px; position: absolute; left: 25px; text-align: center; top: 25px; width: 120px; visibility: hidden; z-index: 1; }

.tooltip:hover .tooltip-text { visibility: visible; }