/* Start Custom Fonts CSS */

@font-face {
    font-family: 'Quincy';
    font-style: normal;
    font-weight: 600;
    font-display: auto;
    src: url('fonts/QuincyCF-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Quincy';
    font-style: italic;
    font-weight: 600;
    font-display: auto;
    src: url('fonts/QuincyCF-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Quincy';
    font-style: normal;
    font-weight: 700;
    font-display: auto;
    src: url('fonts/QuincyCF-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Pangram';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('fonts/Pangram-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Pangram';
    font-style: normal;
    font-weight: 600;
    font-display: auto;
    src: url('fonts/Pangram-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Pangram';
    font-style: normal;
    font-weight: 700;
    font-display: auto;
    src: url('fonts/Pangram-ExtraBold.ttf') format('truetype');
}
/* End Custom Fonts CSS */

body {
    background-color: #141818;
    color: rgb(232, 230, 221);
    font-family: Pangram, sans-serif;
    font-size: 18px;
    font-weight: 400;
    position: relative;
    margin: 0;
    padding-bottom: 6rem;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: underline;
}

a:hover {
    color: #FACB4B;
    text-decoration: none;
}

.header {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
}

.footer {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; /*height: 30px;*/
}

.btn-primary {
    color: #fff;
    background-color: transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
    text-transform: uppercase;
    padding: 12px 40px 12px 40px;
    border: 2px solid #fff;
    border-radius: 10px;
}
.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary {
    color: #5275E2;
    background-color: #fff;
    border-color: #fff;
}
#disc-table {
    width:100%;
}
.center {
    text-align:center;
}
.answer {
    margin:0px 10px;
}
.answer.btn {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 1rem;
    border-width: 2px;
    border-radius: 10px;
    /*text-shadow: 1px 1px 1px #000;*/
}

.answer.btn:hover, .answer.btn:focus {
    border: 2px solid #fff;
    background-color: #fff;
    color: #141818;
}

h1 {
    font-family: Quincy, sans-serif;
}

#question h3 {
    padding-bottom: 20px;
}
#question {
    text-align:center;
}
#disc-intro, #question, #results {
    padding:1px 20px 10px 20px;
}
span[data-answer='1'], span[data-answer='1']:hover {
    /*background:#3333cc;*/
    /*border-color:#3333cc;*/
    background:#cf2e2e;
    border-color:#cf2e2e;
}
span[data-answer='2'], span[data-answer='2']:hover {
    /*background:#6633cc;*/
    /*border-color:#6633cc;*/
    background:#9b51e0;
    border-color:#9b51e0;
}
span[data-answer='3'], span[data-answer='3']:hover {
    /*background:#996699;*/
    /*border-color:#996699;*/
    background:#0693e3;
    border-color:#0693e3;
}
span[data-answer='4'], span[data-answer='4']:hover {
    /*background:#d9864f;*/
    /*border-color:#d9864f;*/
    background:#fcb900;
    border-color:#fcb900;
    /*color: #000;*/
}
span[data-answer='5'], span[data-answer='5']:hover {
    /*background:#ff9933;*/
    /*border-color:#ff9933;*/
    background:#ff6900;
    border-color:#ff6900;
}

/* Add these styles after the existing CSS */

#resume-options {
    margin: 20px 0;
    padding: 20px;
}

#resume-options button {
    margin: 10px;
    min-width: 150px;
}

.btn {
    margin: 5px;
}

/* Update existing .btn-primary styles to include success and warning variants */
.btn-success {
    color: #fff;
    background-color: transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
    text-transform: uppercase;
    padding: 12px 40px 12px 40px;
    border: 2px solid #28a745;
    border-radius: 10px;
}

.btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .open>.dropdown-toggle.btn-success {
    color: #141818;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-warning {
    color: #fff;
    background-color: transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
    text-transform: uppercase;
    padding: 12px 40px 12px 40px;
    border: 2px solid #ffc107;
    border-radius: 10px;
}

.btn-warning.active, .btn-warning.focus, .btn-warning:active, .btn-warning:focus, .btn-warning:hover, .open>.dropdown-toggle.btn-warning {
    color: #141818;
    background-color: #ffc107;
    border-color: #ffc107;
}