@font-face {
    font-family: 'PoppinsMedium';
    src: url('/fonts/Poppins-Medium.otf');
}

@font-face {
    font-family: 'PoppinsRegular';
    src: url('/fonts/Poppins-Regular.otf');
}

:root {
    --color-background: #063033;
    --color-black: #212121;
    --color-text: #ededed;
    --color-text-out: #90908e;
    --color-primary: green;
    --color-primary-out: #a4ff6f;
    --color-secondary: #1d1a1ff7;
    --color-white: #ffffff;
    --color-red: #e74c3c;
    --color-green: #2ecc71;
    --color-separate: #cccccc;
    --color-input-out: #ececec;
    --color-hover: #0af702;

}

html, body {
    font-family: 'PoppinsRegular', 'Rubik', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
    font-size: 16px;
}

b {
    font-family: 'PoppinsMedium', 'Rubik', sans-serif;
}

.pr-0 {
    padding-right: 0px!important;
}

/* card ja tem no bootstrap mas aqui uma config pra ficar mais bonitinha */
.card {
    border-radius: 20px;
    padding: 15px 20px;
    font-size: 20px;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
}

/* botao padrao branco*/
.btn-white {
    border: none!important;
    background-color: var(--color-white);
    color: var(--color-black) !important;
    border-radius: 20px;
    padding: 15px 25px;
    font-size: 20px;
    box-shadow: var(--box-shadow);
}

.btn-white:hover, .btn-white.active {
    background-color: var(--color-primary);
}

/* botao menor | classe bootstrap */
.btn-sm {
    padding: 8px 13px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
}