:root {
    --shiny-font-color: #fcba03;
    --main-font-color: #bf8700;
    --footer-font-color: #c7c7c7;
    --border-color-bright: #dfc1ff;
    --border-color: #4900ac;
    --border-color-dark: #561da8;
    --shadow-color: #3b3b3b;
    --shadow-color-light: #666666;
    --lighter-background: #666666;
    --light-background: #5c5c5c;
    --medium-background: #4e4e4e;
    --dark-background: #2f2f2f;
    --player-badge-background: #c0bacb;
    --player-badge-background-highlight: #ffffff;
    --affirm: #008000;
    --affirm-disabled: #5a7b5a;
    --affirm-bright: #00e200;
    --affirm-bright-disabled: #a1d9a1;
    --deny: #800000;
    --deny-disabled: #7d5b5b;
    --deny-bright: #e20000;
    --deny-bright-disabled: #d9adad;
    --green-scribblings: #55e238;
    --purple-scribblings: #a454ff;
    --purple-scribblings-intense: #7700ff;
    --scribblings-glow: #fffb00;
    --highlight: #0043c9;
    --paper: #eee8e5;
    --paper-darker: #e0e0e0;
    --favorite: #e00000;
    --favorite-disabled: #ce7a7a;

    --notification-info-border: #00719c;
    --notification-info-background: #8fb7c6;
    --notification-info-text: #00719c;
    --notification-affirm-border: #138400;
    --notification-affirm-background: #9bc68f;
    --notification-affirm-text: #138400;
    --notification-warn-border: #a76400;
    --notification-warn-background: #c4a687;
    --notification-warn-text: #a76400;
    --notification-deny-border: #bb0000;
    --notification-deny-background: #c68f8f;
    --notification-deny-text: #bb0000;

    --button-affirm: #4caf50;
    --button-affirm-hover: #57cd5d;
    --button-affirm-disabled: #839985;

    --button-deny: #af4c4c;
    --button-deny-hover: #cd5757;
    --button-deny-disabled: #998383;
}

body {
    color: var(--shiny-font-color);
    text-shadow: 0 0 1px var(--shadow-color);
}

.header {
    box-shadow: 0 2px var(--border-color);
}

.title {
    font-family: Gayathri, sans-serif;
    font-size: 2em;
}

.title a {
    text-decoration: none;
    color: inherit;
}

.title small {
    font-size: 0.4em;
}

.toggle {
    cursor: pointer;
    padding: 5px;
}

.toggle.disabled {
    cursor: not-allowed;
}

.toggle .toggle-slider {
    display: inline-block;
    width: 40px;
    height: 10px;
    margin: 10px;
    box-shadow: inset 0 0 5px #000000;
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
    background-color: var(--deny);
}

.toggle.disabled .toggle-slider {
    background-color: var(--deny-disabled);
}

.toggle.active .toggle-slider {
    transition: background-color 0.2s ease-in-out;
    background-color: var(--affirm-bright);
}

.toggle.active.disabled .toggle-slider {
    background-color: var(--affirm-bright-disabled);
}

.toggle .toggle-slider>.toggle-pip {
    position: relative;
    top: -5px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 5px var(--shadow-color);
    transition: left 0.2s ease-in-out;
    left: 0;
}

.toggle.active > .toggle-slider>.toggle-pip {
    transition: left 0.2s ease-in-out;
    left: 20px;
}

.footer {
    box-shadow: 0 -2px var(--border-color);
    color: var(--footer-font-color);
}

.footer a {
    color: var(--footer-font-color);
}

.container {
    background-color: var(--light-background);
}

.content {
    background-color: var(--medium-background);
    background-image: url("bg.png");
}

.player_menu {
    padding: 10px;
}

.you {
    background-color: #717171;
}

.menu_header {
    font-size: 3em;
    font-family: Gayathri, sans-serif;
}

.text_heading {
    display: inline-block;
    font-size: 3em;
    font-family: Ubuntu, sans-serif;
}

.text_sub_heading {
    display: inline-block;
    font-size: 2em;
    font-family: Ubuntu, sans-serif;
}

.text {
    display: inline-block;
    padding-left: 30px;
    font-size: 1.2em;
    font-family: Ubuntu, sans-serif;
    line-height: 150%;
}

.text_list li {
    margin-top: 1em;
}

.button {
    display: inline-block;
    font-family: Ubuntu, sans-serif;
    cursor: pointer;
    border: none;
    margin: 5px;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    transition: 0.2s;
}

.button:hover {
    box-shadow: 2px 2px 2px var(--shadow-color);
}

.button:disabled {
    box-shadow: none;
    cursor: not-allowed;
}

.hero_button {
    display: inline-block;
    font-family: Ubuntu, sans-serif;
    cursor: pointer;
    border: none;
    margin: 5px;
    padding: 20px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 2em;
    font-weight: bold;
    transition: 0.2s;
}

.hero_button.hero_button_small {
    padding: 10px 15px;
    font-size: 1.5em;
}

.hero_button.hero_button_big {
    font-size: 3em;
}

.hero_button:hover {
    box-shadow: 5px 5px 5px var(--shadow-color);
}

.hero_button:disabled {
    box-shadow: none;
    cursor: not-allowed;
}

.button_affirm {
    background-color: var(--button-affirm);
    color: #ffffff;
}

.button_affirm:hover {
    background-color: var(--button-affirm-hover);
}

.button_affirm:disabled {
    background-color: var(--button-affirm-disabled);
    color: #e0e0e0;
}

.button_deny {
    background-color: var(--button-deny);
    color: #ffffff;
}

.button_deny:hover {
    background-color: var(--button-deny-hover);
}

.button_deny:disabled {
    background-color: var(--button-deny-disabled);
    color: #e0e0e0;
}

.player_badge {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    background-color: var(--player-badge-background);
    border-top: 2px solid var(--border-color);
    box-shadow: 2px 2px 1px var(--shadow-color);
}

.player_badge .disabled {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: not-allowed;
    background-image: repeating-linear-gradient(45deg, #aaaaaa 0 10px, black 10px 20px);
    opacity: 0.2;
}

.player_badge_story {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    background-color: var(--paper);
    font-family: Lora, serif;
    border-bottom: 2px solid var(--border-color);
    text-align: center;
    font-size: 1.2em;
}

.player_badge_player {
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
}

.player_badge_attribute_container {
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
    border-left: 2px solid var(--border-color);
}

.player_badge.highlight {
    box-shadow: 0 0 10px var(--border-color-bright);
}

.ready_indicator {
    display: block;
    width: 100%;
    height: 2px;
}

.ready_indicator.ready {
    box-shadow: 0 0 5px var(--affirm-bright);
    background-color: var(--affirm-bright);
}

.ready_indicator.not_ready {
    box-shadow: 0 0 5px var(--deny-bright);
    background-color: var(--deny-bright);
}

.player_badge_hover:hover {
    box-shadow: 0 0 10px var(--border-color);
    transition: box-shadow 0.5s ease-in-out;
}

@media only screen and (max-width: 800px) {
    .title {
        font-size: 1.5em;
    }

    .text_heading {
        font-size: 1.5em;
    }

    .text_sub_heading {
        font-size: 1.2em;
    }

    .text {
        padding-left: 10px;
        font-size: 1em;
    }

    .hero_button {
        padding: 10px 20px;
        font-size: 1.5em;
    }

    .hero_button.hero_button_big {
        font-size: 2em;
    }
}