.cards {
  • justify-content: space-evenly !important;
  • margin-top: 2em !important;
}

.card {
  • margin: 1em !important;
}

h1 {
  • color : #cc3333;
  • font-size : 72px;
  • font-style: italic;
}

h2 {

  • color : #2b5351;

}
.btn-warning, .btn-warning:hover, .btn-warning:active, .btn-warning:focus, .btn-warning:active:focus
{

  • border-color: #fff;
  • border: 2px white solid;
  • background: transparent;

}

/ checkbox settings 👇 /

.ui-checkbox {
  • -primary-color: #1677ff;
  • -secondary-color: #fff;
  • -primary-hover-color: #4096ff;
  • / checkbox /
  • -checkbox-diameter: 20px;
  • -checkbox-border-radius: 5px;
  • -checkbox-border-color: #d9d9d9;
  • -checkbox-border-width: 1px;
  • -checkbox-border-style: solid;
  • / checkmark /
  • -checkmark-size: 1.2;
}

.ui-checkbox,
.ui-checkbox , .ui-checkbox ::before,
.ui-checkbox
  • actions */

.ui-checkbox:hover {
  • border-color: var(--primary-color);
}

.ui-checkbox:checked {
  • background: var(--primary-color);
  • border-color: transparent;
}

.ui-checkbox:checked::before {
  • opacity: 1;
  • webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  • ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  • transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
  • webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  • o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  • transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.ui-checkbox:active:not(:checked)::after {
  • webkit-transition: none;
  • o-transition: none;
  • webkit-box-shadow: none;
  • box-shadow: none;
  • transition: none;
  • opacity: 1;
}