:root {
    --whiteText: #d8d8d8;
    --tanText: #ffefc8;
    --grayBackground: #323639;
    --grayBackgroundTran: rgba(50, 54, 57, 0.691);
    --orangeText: #e29236;
    --blackBackground: #302f2f;
}

.choose {
    width: auto;
}

.chosen-with-drop {
    width: 100%;
}

.chosen-container {
    width: 100%;
}

select {
    padding: 5px;
}

a:not([href]):hover {
    color: var(--orangeText);
}

.chosen-container-single .chosen-single {
    color: var(--orangeText);
    background-color: var(--blackBackground);
    width: 100%;
}


p {
    word-wrap: break-word;
}

.md-space {
    margin-top: 10%;
}

.lg-space {
    margin-top: 20%;
}



.form-control {
    width: 50%;
    text-align: center;
    margin: 1em auto 1em auto;
    background-color: var(--blackBackground);
    color: var(--tanText);
    border-color: var(--orangeText);
}

.form-control:hover {
    background-color: var(--blackBackground);
    color: var(--orangeText);
}

.btn-group {
    width: 100%;
}

@media only screen and (max-width: 600px) {
    .form-control {
        width: 100%;
    }

    .btn-group {
        width: 100%;
    }
}

input {
    width: 3.5em;
    margin: 1em;
}

.btn {
    background-color: var(--blackBackground);
    color: var(--orangeText);
    border-style: solid;
    border-color: var(--orangeText);
}

.btn:hover {
    background-color: var(--orangeText);
    color: var(--blackBackground);
}

body {
    background-color: var(--blackBackground);
    color: var(--tanText);
}

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}

.vertical-center {
    min-height: 100%; /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
    display: flex;
    align-items: center;
}