body {
    background-image: url('images/background.png');
    background-repeat: no-repeat;
    background-size: 800px 400px;
    background-position: bottom;
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.pink {
    background-color: #fcceb4;
}
.primary {
    background-color: #1f3a7f;
}
.success {
    background-color: #5da63a;
}
.danger {
    background-color: #a94c2b;
}
.primary1 {
    background-color: #1f3a7f;
}
    .primary1:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

.warning1 {
    background-color: #d7b450;
}
    .warning1:hover {
        background-color: #edcd70;
        border-color: #0056b3;
    }

.warning-text {
    color: #d7b450;
}

.quicksand-light {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.quicksand-medium {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.quicksand-bold {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.rubik-italic {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-style: italic;
}

.rubik {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.rubik-medium {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.rubik-bold {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.orbitron {
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.legend-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}