:root {
  --color-1: #f1efe7; /* Sky / clouds */
  --color-2: #2e5b90; /* Ocean / water */
  --color-3: #b4875c; /* Earth / terrain */
  --color-4: #487447; /* Forest / greenery */
  --color-5: #c4cfd6; /* Snow / light sky */
  --color-6: #a1603d; /* Desert / sand */
  --color-7: #623c31; /* Building / brick tones */
  --color-8: #a0ab79; /* Grassland / natural areas */
}

body {
    background: #f0f0f0 url('./img/background.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}


@media (min-width: 992px) {
    .h1, h1 {
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 19px;
    }
}

body > nav {
  background-color: var(--color-2) !important;
  color: var(--color-5) !important !important;
}

.content {
    background-color: rgba(248, 249, 250, 0.95) !important;
}

.fa-bomb         {color: var(--color-7);}
.fa-earth-asia   {color: var(--color-2);}
.fa-face-smile   {color: var(--color-2);}
.fa-heart-crack  {color: var(--color-7);}
.fa-location-dot {color: var(--color-1);}
.fa-message      {color: var(--color-2);}

.invalid-feedback span {
    background-color: var(--color-7);
    color: var(--color-1);
    padding: 10px;
    border-radius: 5px;
    font-size: .8rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin-top: 4px;
    display: inline-block;
}

.btn-sm {
    background-color: var(--color-4);
    color: var(--color-1);
}

.btn-rainbow {
    /* background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); */
    background-position: 50% 50%; /* Static color when not pressed */
    background-color: var(--color-2);
    background-size: 400% 100%;
    color: white;
    color: var(--color-1);
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border: 1px solid var(--color-2);
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
}

.btn-rainbow:hover,
.btn-rainbow:focus {
    background: linear-gradient(90deg, #623c31, #a1603d, #b4875c, #a0ab79, #487447, #2e5b90, #c4cfd6, #f1efe7);
    background-position: 50% 50%;
    background-size: 400% 100%;
    color: white;
    color: var(--color-1);
    border: 1px solid var(--color-2);
    animation: rainbow-animation 5s linear infinite;
    transform: scale(1.05);
}
.btn-rainbow:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.btn-rainbow:active {
    animation: rainbow-animation 1s linear infinite;
    transform: scale(0.95);
}

@keyframes rainbow-animation {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}