:root {
    --meteorite-dark: #2f1c6a;
    --deep-blue: #1F1346;
    --primary-purple: #673de6;
    --primary-light: #ebe4ff;
    --gray-dark: #36344d;
    --gray-secondary: #727586;
    --gray-light: #f2f3f6;
    --warning: #ffcd35;
    --success: #00b090;
    --danger: #fc5185;
    --azure: #357df9;
    --white: #ffffff;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Lato:wght@400&family=Poppins:wght@300;400;700&display=swap');

body {
    font-family: 'Lato', sans-serif;
    color: var(--gray-dark);
    background-color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
}

button, .btn {
    font-family: 'Poppins', sans-serif;
}

header {
    background-color: transparent;
    color: var(--white);
}

footer {
    background-color: var(--meteorite-dark);
    color: var(--white);
}

a {
    color: var(--azure);
}

a:hover {
    color: var(--primary-purple);
}

.card {
    background-color: var(--white);
}

.btn-primary {
    background-color: var(--meteorite-dark);
    border-color: var(--meteorite-dark);
}

.btn-outline-primary {
    border-color: var(--meteorite-dark);
    color: var(--meteorite-dark);
}