/* Define a color variable */
:root {
    --dark-blue: #060CE9;
    --light-blue: #115ff4;
    --silver: #cccccc;
    --gold: #ffd700;
    --dark-gold: #cfb000;
    --stromboli: #2E5E4E;
    --bon-jour: #DBD3D8;
    --coral-reef:#C3B59C;
    --cascade: #93A6AA;
    --hit-gray: #A7B589;
    --nomad: #BBB6A5;
    --chestnut-rose: #CD6858;
}

.cusor-pointer {
    cursor: pointer;
}

.bg-dark-blue, .bg-dark-blue:hover, .bg-dark-blue:focus {
    background-color: var(--dark-blue);
}
.bg-light-blue, .bg-light-blue:hover {
    background-color: var(--light-blue);
}
.bg-silver, .bg-silver:hover {
    background-color: var(--silver);
}
.bg-dark-gold-hover {
    background-color: var(--dark-blue);
}
.bg-dark-gold {
    background-color: var(--dark-gold);
}
.bg-gold, .bg-gold:hover {
    background-color: var(--gold);
}
.bg-stromboli, .bg-stromboli:hover {
    background-color: var(--stromboli);
}
.bg-bon-jour, .bg-bon-jour:hover {
    background-color: var(--bon-jour);
}
.bg-coral-re, .bg-coral-re:hover {
    background-color: var(--coral-re);
}
.bg-cascade, .bg-cascade:hover {
    background-color: var(--cascade);
}
.bg-hit-gray, .bg-hit-gray:hover {
    background-color: var(--hit-gray);
}
.bg-nomad, .bg-nomad:hover {
    background-color: var(--nomad);
}
.bg-chestnut-rose, .bg-chestnut-rose:hover {
    background-color: var(--chestnut-rose);
}

#name_1::placeholder {
    color: var(--gold);
}
#name_2::placeholder {
    color: var(--gold);
}
#name_3::placeholder {
    color: var(--gold);
}

.border-dark-blue,.border-dark-blue-hover:hover {
    border-color: var(--dark-blue);
}
.border-light-blue,.border-light-blue-hover:hover {
    border-color: var(--light-blue);
}
.border-silver,.border-silver-hover:hover {
    border-color: var(--silver);
}
.border-gold,.border-gold-hover:hover, .border-gold:focus {
    border-color: var(--gold);
}
.border-stromboli,.border-stromboli-hover:hover {
    border-color: var(--stromboli);
}
.border-bon-jour,.border-bon-jour-hover:hover {
    border-color: var(--bon-jour);
}
.border-coral-re,.border-coral-re-hover:hover {
    border-color: var(--coral-re);
}
.border-cascade,.border-cascade-hover:hover {
    border-color: var(--cascade);
}
.border-hit-gray,.border-hit-gray-hover:hover {
    border-color: var(--hit-gray);
}
.border-nomad,.border-nomad-hover:hover {
    border-color: var(--nomad);
}
.border-chestnut-rose,.border-chestnut-rose-hover:hover {
    border-color: var(--chestnut-rose);
}

.btn-dark-blue,.btn-dark-blue-hover:hover {
    background-color: var(--dark-blue);
}
.btn-light-blue,.btn-light-blue-hover:hover {
    background-color: var(--light-blue);
}
.btn-silver,.btn-silver-hover:hover {
    background-color: var(--silver);
}
.btn-gold,.btn-gold-hover:hover {
    background-color: var(--gold);
}
.btn-stromboli,.btn-stromboli-hover:hover {
    background-color: var(--stromboli);
}
.btn-bon-jour,.btn-bon-jour-hover:hover {
    background-color: var(--bon-jour);
}
.btn-coral-re,.btn-coral-re-hover:hover {
    background-color: var(--coral-re);
}
.btn-cascade,.btn-cascade-hover:hover {
    background-color: var(--cascade);
}
.btn-hit-gray,.btn-hit-gray-hover:hover {
    background-color: var(--hit-gray);
}
.btn-nomad,.btn-nomad-hover:hover {
    background-color: var(--nomad);
}
.btn-chestnut-rose,.btn-chestnut-rose-hover:hover {
    background-color: var(--chestnut-rose);
}

/* 
    dark-blue
    light-blue
    silver
    gold
    stromboli
    bon-jour
    coral-re
    cascade
    hit-gray
    nomad
    chestnut-rose 
*/

    

.text-dark-blue,.text-dark-blue-hover:hover {color: var(--dark-blue);}
.text-light-blue,.text-light-blue-hover:hover {color: var(--light-blue);}
.text-silver,.text-silver-hover:hover {color: var(--silver);}
.text-gold,.text-gold-hover:hover {color: var(--gold);}
.text-stromboli,.text-stromboli-hover:hover {color: var(--stromboli);}
.text-bon-jour,.text-bon-jour-hover:hover {color: var(--bon-jour);}
.text-coral-re,.text-coral-re-hover:hover {color: var(--coral-re);}
.text-cascade,.text-cascade-hover:hover {color: var(--cascade);}
.text-hit-gray,.text-hit-gray-hover:hover {color: var(--hit-gray);}
.text-nomad,.text-nomad-hover:hover {color: var(--nomad);}
.text-chestnut-rose,.text-chestnut-rose-hover:hover {color: var(--chestnut-rose);}

.btn-jeopardy:hover {
    background-color: var(--light-blue);
    color: var(--silver);
    border: 2px solid var(--silver);
}
.btn-jeopardy {
    background-color: var(--dark-blue);
    color: var(--gold);
    border: 2px solid var(--gold);
}

.border-nomad {
    border-color: var(--nomad);
}
.no-click {
    pointer-events:none;
}
.text-gold {
    color: var(--gold);
}
.h-16 {
    height: 16%;
}

.btn-stromboli {
    background-color: var(--stromboli);
}
.btn-stromboli:hover {
    background-color: var(--cascade);
}
.body-nomad {
    background-color: var(--nomad);
}
.body-dark {
    background-color: #000;
}
.big-jeopardy {
    font-stretch: expanded;
    font-family: 'Jeopardy';
    font-size: 244pt;
    font-weight: normal;
    font-style: normal;
    color: var(--gold);
}

/* .mid-jeopardy {
    font-stretch: expanded;
    font-family: 'Jeopardy';
    font-size: 166pt;
    font-weight: normal;
    font-style: normal;
    color: var(--gold);
    white-space: nowrap;
    overflow: hidden;
} */

.jeopardy {
    /* font-stretch: expanded; */
    font-family: 'Jeopardy';
    /* font-size: 22pt; */
    font-size: 36pt;
    font-weight: normal;
    font-style: normal;
    color: var(--gold);
}

h3 {
    font-stretch: expanded;
    font-family: 'Jeopardy';
    font-size: 36pt;
    font-weight: normal;
    font-style: normal;
    color: var(--gold);
}

.text-korinna {
    font-stretch: expanded;
    font-family: Korinna;
    font-weight: normal;
    font-style: normal;
    color: var(--gold);
}

.border-gold {
    border: 1px solid gold;
}

@font-face {
    font-family: 'Jeopardy';
    src: url('../fonts/gyparody.woff2') format('woff2'),
         url('../fonts/gyparody.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Korinna';
    src: url('../fonts/OPTIKorinna-Agency.woff2') format('woff2'),
         url('../fonts/OPTIKorinna-Agency.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}