:root {
    --midnight-steel: #231F20;
    --flame-red: #C43C31;
    --sky-blue: #4C98D3;
    --steel-grey: #BDBDBD;
    --rusic-red: #7D261F;
    --flat-iron: #E29E98;
    --deep-ocean-blue: #2F6086;
    --clear-sky-blue: #A6CCE9;
    --midnight-blue: #19488D;
    --horizon-blue: #CCDEEA;
    --desert-sand: #ECE7DC;
    --cobalt-blue: #2365C6;
    --steel-blue: #729EBB;
    --stone: #BBB19B
}

.btn-primary {
    background-color: var(--sky-blue);
 }

.btn-secondary {
    font-size: 14px;
    font-weight: 700;
    font-family: "Lato", sans-serif;
}

input {
    background-color: var(--clear-sky-blue);
}

button,
a.btn {
    background-color: var(--sky-blue);
    color: white;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid var(--sky-blue);
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    border-color: var(--sky-blue);
    background-color: var(--sky-blue);
    color: white;
}

button:hover {
    background-color: var(--cobalt-blue);
    border: 1px solid var(--cobalt-blue);
}

.buttons button:active {
    transform: scale(0.97);
}

button {
    background-color: var(--sky-blue);
    color: white;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid var(--sky-blue);
}

button:hover {
    background-color: var(--cobalt-blue);
    border: 1px solid var(--cobalt-blue);
}

button:disabled {
    background: var(--steel-grey);
    border-color: var(--steel-grey);
}

button:disabled:hover {
    background: var(--steel-grey);
}