:root {
    --btn-color-primary--bg: #006FE6;
    --btn-color-primary--text: #F5F9FF;
    --btn-color-primary--bg-light: #00c3ff;
    --btn-color-primary--bg-dark: #0004ff;

    --btn-color-secondary--bg: #646D73;
    --btn-color-secondary--text: #F5F9FF;
    --btn-color-secondary--bg-light: #C3C6CB;
    --btn-color-secondary--bg-dark: #222226;
    
    --btn-color-danger--bg: #FF8A8A;
    --btn-color-danger--text: #ffffff;
    --btn-color-danger--bg-light: #FFBDBD;
    --btn-color-danger--bg-dark: #ff0000;
}


.btn {
    font-size: large;
    padding: 0.3em;
    border-radius: 0.75em;
    border-width: 0em;
    box-sizing: content-box;
    transition: 0.4s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.2em;
    margin-left: 0.2em;
    height: 2.6em;
    outline-width: 0;
}

.btn.btn-inline {
    height: 2em;
    font-size: inherit;
    padding: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;

}

.btn:hover {
    cursor: pointer;
    transition: 0.4s;
}

.btn:focus {
    outline-width: 0.3em;
    outline-style: solid;
    transition: 0.4s;
}

.btn-primary {
    outline-color: var(--btn-color-primary--bg-light);
    background-color: var(--btn-color-primary--bg);
    color: var(--btn-color-primary--text);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--btn-color-primary--bg-dark);
}



.btn-secondary {
    background-color: var(--btn-color-secondary--bg);
    color: var(--btn-color-secondary--text);
    outline-color: var(--btn-color-secondary--bg);
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--btn-color-secondary--bg-dark);
}


.btn-danger {
    background-color: var(--btn-color-danger--bg);
    color: var(--btn-color-danger--text);
    outline-color: var(--btn-color-danger--bg);
}

.btn-danger:hover, .btn-danger:focus {
    background-color: var(--btn-color-danger--bg-dark);
}



.btn-logo-left img {
    width: 1.5em;
    margin-right: 0.5em;
}

.btn-logo-right img {
    width: 1.5em;
    margin-left: 0.5em;
}



.buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.buttons .btn {
    width: 100%;
}

.buttons a:has(.btn){
    margin:1em; /*the same as for .btn, */
}

a:has(.btn) {
    text-decoration: none;
    outline: none;
}

input:not([type=submit]),
textarea,
select {
    padding: 0.3em;
    font-size: 1em;
    background-color: var(--color-bg-3);
    border-radius: 0.5em;
    transition: 0.4s;
    border-width: 0.3em;
    border-style: solid;
    border-color: var(--color-bg-3-light)
}

input:focus:not([type=submit]),
textarea:focus,
select:focus {
    background-color: var(--color-bg-3-light);
    transition: 0.4s;
    border-color: var(--color-bg-3-dark);
    outline: none;
}

select[multiple] {
    max-height: 8em;
}