:root {
    --white: #fff;
    --black: #000;

    /* Temperature colors */
    --purple-very-light: #b97fd6;   /* -40 */
    --purple-light: #a06fc2;        /* -35 */
    --purple-medium: #8a5ca9;       /* -30 */
    --purple-dark: #7a4c99;         /* -25 */
    --blue-very-dark: #305ec2;      /* -20 */
    --blue-dark: #3578ce;           /* -15 */
    --blue-medium: #1f8fff;         /* -10 */
    --blue: #1fc6fa;                /* -5 */
    --blue-light: #6fdef9;          /* 0 */
    --cyan: #b0f9f1;                /* 5 */
    --green: #80d781;               /* 10 */
    --lime: #a7f26e;                /* 15 */
    --yellow: #f9f364;              /* 20 */
    --orange: #ffc43f;              /* 25 */
    --red-light: #ec9446;           /* 30 */
    --red: #ff6f6f;                 /* 35 */
    --red-dark: #e65c5c;            /* 40 */
    --brown: #bb3939;               /* 45 */
    --black-extreme-chaleur: #7a7a7a; /* 50 */
}

body {
    font-family: 'Futura LT', sans-serif;
}

p {
    margin: 0;
}

.card {
    color: var(--white);
    margin: 1rem;
    padding: 1rem;
}

.card .card-body img {
    width: 100%;
    height: 2rem;
    object-fit: contain;
}

.mb-3 {
    margin-bottom: 1rem;
}

.text-right {
    text-align: right;
}

.title {
    font-size: 1.5rem;
}

.subtitle {
    font-size: .85rem;
}

.temperature {
    font-size: 2rem;
}

.button {
    background-color: lightskyblue;
    border: 1px solid lightskyblue;
    cursor: pointer;
    padding: .25rem 1rem;
}

.button:hover {
    background-color: rgb(89, 164, 210);
    border: 1px solid rgb(89, 164, 210);
}

.bg-1 {
    background-color: #A7C957;
}

.bg-2 {
    background-color: #6A994E;
}

.bg-3 {
    background-color: #386641;
}

/* [-40, -35, -30, -25, -20, -15, -10, -5, 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50] */
.bg-range-0 {
    background-color: var(--purple-very-light);
    color: var(--black);
}

.bg-range-1 {
    background-color: var(--purple-light);
    color: var(--white);
}

.bg-range-2 {
    background-color: var(--purple-medium);
    color: var(--white);
}

.bg-range-3 {
    background-color: var(--purple-dark);
    color: var(--white);
}

.bg-range-4 {
    background-color: var(--blue-very-dark);
    color: var(--white);
}

.bg-range-5 {
    background-color: var(--blue-dark);
    color: var(--white);
}

.bg-range-6 {
    background-color: var(--blue-medium);
    color: var(--white);
}

.bg-range-7 {
    background-color: var(--blue);
    color: var(--white);
}

.bg-range-8 {
    background-color: var(--blue-light);
    color: var(--black);
}

.bg-range-9 {
    background-color: var(--cyan);
    color: var(--black);
}

.bg-range-10 {
    background-color: var(--green);
    color: var(--black);
}

.bg-range-11 {
    background-color: var(--lime);
    color: var(--black);
}

.bg-range-12 {
    background-color: var(--yellow);
    color: var(--black);
}

.bg-range-13 {
    background-color: var(--orange);
    color: var(--black);
}

.bg-range-14 {
    background-color: var(--red-light);
    color: var(--white);
}

.bg-range-15 {
    background-color: var(--red);
    color: var(--white);
}

.bg-range-16 {
    background-color: var(--red-dark);
    color: var(--white);
}

.bg-range-17 {
    background-color: var(--brown);
    color: var(--white);
}

.bg-range-18 {
    background-color: var(--black-extreme-chaleur);
    color: var(--white);
}

.d-none {
    display: none !important;
}

table {
    border: 1px solid;
    border-collapse: collapse;
    margin: 2rem auto;
    color: black;
}

table tr th {
    border: 1px solid #444;
    padding: 4px 8px;
}

table tr td {
    padding: .25rem 1rem;
    border-top: 1px solid #444;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--white);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media screen and (min-width: 800px) {
    .container {
        display: flex;
        justify-content: space-between;
    }
    
    .card {
        width: 30%;
    }
}


@media screen and (min-width: 350px) {
    .card .card-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2rem;
    }
    
    .card .card-body {
        display: flex;
        align-content: center;
        justify-content: space-between;
        text-align: center;
    }
}