body {
    font-family: 'Orbitron', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    background-image: url('img/background_2.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.title {
    max-width: 805px;
    background: rgba(40, 40, 40, 0.648);
    margin: 0 auto;
    color: #ffffff;
    padding: 20px;
    font-family: 'Orbitron', sans-serif;
    border-radius: 15px !important;
    border: 3px solid #ffffffd0 !important;
}

.container {
    color: #ffffff;
    max-width: 805px;
    margin: 0 auto;
    background: rgba(55, 13, 59, 0.484);
    padding: 20px;
    border-radius: 15px !important;
    border: 3px solid #ab20e6 !important;
}

p {
    font-family: 'Orbitron', sans-serif;
    font-size: 1em;
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: bold;
}

h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2em;
    font-weight: 800;
    margin-bottom: 0px;
    margin-top: 0px;
}

h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.75em;
    margin-bottom: 5px;
    margin-top: 5px;
}

h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5em;
    margin-bottom: 5px;
    margin-top: 5px;
}

h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25em;
    margin-bottom: 5px;
    margin-top: 5px;
}

.hidden {
    display: none;
}

button {
    padding: 10px 10px;
    border-radius: 10px;
    border: 3px solid #fff;
    background: rgba(21, 33, 48, 0.764);
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    font-size: 1em;
    margin: 5px;
    cursor: pointer;
}

button:hover {
    background: rgba(36, 60, 90, 0.9);
}

#protocol-cards, #draft-actions {
    display: flex;
    flex-wrap: wrap;
    margin: 3px;
    color: #000;
}

#player1-pool,
#player2-pool {
    display: flex;
    flex-wrap: wrap;
    margin: 3px;
}

#results #start-over-button {
    width: auto;
    margin: 5px;
}

strong {
    font-weight: bold;
    font-size: 1.25em;
}

.protocol-card {
    font-family: 'Orbitron', sans-serif;
    color: #393939;
    border: 5px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px;
    width: 230px;
    margin: 3px;
    min-height: 33%;
    max-height: 33%;
    overflow: hidden;
    padding: 10px;
    font-size: 1em;
    background: #ffffff;
    cursor: pointer;
}

/* Enable hover effect during drafting (desktop only) */
@media (hover: hover) and (pointer: fine) {
    #draft-actions .protocol-card:hover {
        background: #c52dce71 !important;
        color: #ffffff !important;
    }
}

/* Ensure prompt text and protocol cards are displayed correctly */
#draft-actions p {
    color: #fff;
    width: 100%;
    margin-bottom: 10px;
}

/* Background Colors for Each Protocol */
/* These include colors for all protocols included in Main 01 and Aux 01 (MN01/AX01)
For new protocols, copy / paste the following code and modify as desired.

.protocolname {
    background-color: hsl(0, 0%, 66%) !important;
    --shadow-color: hsl(0, 0%, 46%);
    color: #ffffff !important;
}
*/

.apathy {
    background-color: hsl(0, 0%, 66%) !important;
    --shadow-color: hsl(0, 0%, 46%);
    color: #ffffff !important;
}

.assimilation{
    background-color: hsl(0, 0%, 50%) !important;
    --shadow-color: hsl(0, 0%, 30%);
    color: #ffffff !important;
}

.chaos {
    background-color: hsl(241, 73%, 19%) !important;
    --shadow-color: hsl(0, 0%, 20%);
    color: #ffffff !important;
}

.clarity {
    background-color: hsl(273, 68%, 38%) !important;
    --shadow-color: hsl(204, 100%, 16%);
    color: #ffffff !important;
}

.corruption {
    background-color: hsl(75, 100%, 27%) !important;
    --shadow-color: hsl(75, 100%, 7%);
    color: #ffffff !important;
}

.courage {
    background-color: hsl(34, 62%, 50%) !important;
    --shadow-color: hsl(0, 0%, 60%);
    color: #ffffff !important;
}

.darkness {
    background-color: hsl(54, 4%, 47%) !important;
    --shadow-color: hsl(54, 4%, 27%);
    color: #ffffff !important;
}

.death {
    background-color: hsl(229, 7%, 30%) !important;
    --shadow-color: hsl(229, 7%, 10%);
    color: #ffffff !important;
}

.diversity {
    background-color: hsl(56, 50%, 42%) !important;
    --shadow-color: hsl(0, 0%, 30%);
    color: #ffffff !important;
}

.fear{
    background-color: hsl(0, 78%, 45%) !important;
    --shadow-color: hsl(0, 0%, 30%);
    color: #ffffff !important;
}

.fire {
    background-color: hsl(30, 53%, 69%) !important;
    --shadow-color: hsl(30, 53%, 49%);
    color: #ffffff !important;
}

.gravity {
    background-color: hsl(325, 22%, 46%) !important;
    --shadow-color: hsl(325, 22%, 26%);
    color: #ffffff !important;
}

.hate {
    background-color: hsl(1, 42%, 46%) !important;
    --shadow-color: hsl(1, 42%, 26%);
    color: #ffffff !important;
}

.ice{
    background-color: hsl(200, 100%, 50%) !important;
    --shadow-color: hsl(200, 100%, 30%);
    color: #ffffff !important;
}

.life {
    background-color: hsl(58, 17%, 60%) !important;
    --shadow-color: hsl(58, 17%, 40%);
    color: #ffffff !important;
}

.light {
    background-color: hsl(35, 17%, 67%) !important;
    --shadow-color: hsl(35, 17%, 47%);
    color: #ffffff !important;
}

.love {
    background-color: hsl(352, 36%, 62%) !important;
    --shadow-color: hsl(352, 36%, 42%);
    color: #ffffff !important;
}

.luck{
    background-color: hsl(39, 77%, 41%) !important;
    --shadow-color: hsl(14, 85%, 29%);
    color: #ffffff !important;
}

.metal {
    background-color: hsl(18, 6%, 45%) !important;
    --shadow-color: hsl(18, 6%, 25%);
    color: #ffffff !important;
}

.mirror{
    background-color: hsl(276, 48%, 44%) !important;
    --shadow-color: hsl(0, 0%, 30%);
    color: #ffffff !important;
}

.peace{
    background-color: hsl(120, 57%, 39%) !important;
    --shadow-color: hsl(120, 100%, 55%);
    color: #ffffff !important;
}

.plague {
    background-color: hsl(95, 19%, 43%) !important;
    --shadow-color: hsl(95, 19%, 23%);
    color: #ffffff !important;
}

.psychic {
    background-color: hsl(266, 9%, 48%) !important;
    --shadow-color: hsl(266, 9%, 28%);
    color: #ffffff !important;
}

.smoke{
    background-color: hsl(0, 0%, 30%) !important;
    --shadow-color: hsl(0, 0%, 10%);
    color: #ffffff !important;
}

.speed {
    background-color: hsl(216, 14%, 62%) !important;
    --shadow-color: hsl(216, 14%, 42%);
    color: #ffffff !important;
}

.spirit {
    background-color: hsl(189, 26%, 36%) !important;
    --shadow-color: hsl(189, 26%, 16%);
    color: #ffffff !important;
}

.time{
    background-color: hsl(0, 85%, 28%) !important;
    --shadow-color: hsl(0, 0%, 30%);
    color: #ffffff !important;
}

.unity {
    background-color: hsl(268, 61%, 49%) !important;
    --shadow-color: hsl(0, 0%, 30%);
    color: #ffffff !important;
}

.war{
    background-color: hsl(348, 81%, 25%) !important;
    --shadow-color: hsl(348, 83%, 27%);
    color: #ffffff !important;
}

.water {
    background-color: hsl(180, 8%, 66%) !important;
    --shadow-color: hsl(180, 8%, 46%);
    color: #ffffff !important;
}