/* Fonts */

@font-face {
    font-family: alte;
    src: url(../fonts/alte-haas-grotesk.regular.ttf);
}

@font-face {
    font-family: alte-bold;
    src: url(../fonts/alte-haas-grotesk.bold.ttf);
}

@font-face {
    font-family: bowlby;
    src: url(../fonts/bowlby.otf);
}


/* HTML ELEMENTS */


body{
    background-color: #000004;
    color: #777777;
    font-family: alte;
}

p, label {
    font-family: alte;
    color: #fff;
}

a {
    color: #05a000;
    font-family: alte-bold;
}

h1, h2, h3, h4, h5, h6 {
    color: #777777;
    font-family: bowlby;
}

/* FOUNDATION OVERRIDES */

.button{
    border: 2px solid #ffa700;
    border-radius: 0px 0px 25px 25px;
    background-color: #000004;
    color: #ffff00;
    font-family: alte-bold;
    margin: 10px;
}

.button:hover, .button:focus {
    background-color: #005ac2;
    color: #ffff00;
}

.small {
    border-radius: 22px 22px 0px 0px;
    margin: 5px;
    font-family: alte;
}


.callout {
    border: 2px solid #ffa700;
    background-color: transparent;
}

.primary {
    color: #000004!important;
    border: 2px solid #005ac2;
}

.primary p {
    color: #000004!important;
}

/* CUSTOM CLASSES & IDS */

.door_sign {
    border: 4px solid green;
    border-radius: 999px;
    padding: 7px;
    color:#fff;
}

.loser {
    background-color: #c40000;
}

#chosen {
    background-color: #005ac2;
}

#winner {
    background-color: #05a000;
}

.score, .score_num{
    font-family: bowlby;
}

#instructions {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #ffa700;
}

#instructions_container {
    width: 500px;
    margin: auto;

    @media (max-width: 550px) {
        width: 100%;
    }
}

#stats_container {
    width: 500px;
    margin: auto;

    @media (max-width: 550px) {
        width: 100%;
    }
}

.normal_pointer {
    cursor: default;
}

.uline {
    text-decoration: underline;
}

.centerer {
    text-align: center;
}

.righter{
    text-align: right;
}

.hover_door:hover{
    cursor: crosshair;
}

.orange {
    color: #ffa700;
}

.green {
    color: #05a000;
}

.red {
    color: #c40000;
}

.blue{
    color: #005ac2;
}

/**  COLORS

black:      000004
borders:    ffa700 (orange)
yellow:     ffff00
red:        c40000
green:      05a000
blue:       005ac2
white:      ffffff
gray:       878787

*/