:root {
    --blue1: lightblue;
    --blue2: cornflowerblue;
    --blue3: rgba(0, 0, 255, 0.3);
    --grey: grey;
    --darkgrey: darkgrey;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    /*background-color: white;*/
    width: 100%;
    height: 100%;
    background: #222;
}


b {
    background-color: #fff3;
}

.panel
{
  display: block;
  padding: 10px 15px;
  margin: 10px 5px;
  margin-left: -5px;
  border: 2px solid black;
  -webkit-box-shadow: 0 0 0 5px #eee, 11px 13px 0 4px black;
  -moz-box-shadow: 0 0 0 5px #eee, 11px 13px 0 4px black;
  box-shadow: 0 0 0 5px #eee, 11px 13px 0 4px black;
  background: #eee;
  color: #999;
}

.panel b, .panel strong
{
  color: black;
}


.page {
    width: 100%;
    height: 100%;
    display: none;
    grid-template-rows: 100px 1fr 1fr 1fr 1fr 100px;
    grid-template-columns: 1fr 1fr 0.5fr;
    grid-template-areas: "status score side"
                         "main main side"
                         "main main side"
                         "main main side"
                         "bar bar side"
                         "breaking breaking side";
}

.page.active {
    display: grid;
}

/*** STATUS, SCORE ***/

#status, #score {
  padding: 20px 30px;
  font-size: 30px;
  text-align: center;
  line-height: 1.1;
  color: white;
}

/*** GRID ***/

.page.two-halves {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "main side";
}

#setup {
    grid-area: main;
    margin: 25px;
}

#rules {
    grid-area: side;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 25px;
    padding-left: 0;
}

/*** CONTENT ***/

.explanation {
    padding-bottom: 15px;
    font-weight: bold;
}

.how-many
{
  margin-bottom: 20px;
  color: black;
}
.politicians {
    /*border: 1px solid blue;*/
}

.politician {
  border: 2px solid;
  margin-bottom: -2px;
  padding: 5px;
  min-height: 70px;
}
.politician:last-child
{
  margin-bottom: 20px;
}

.politician.template {
    display: none;
}

img.portrait {
  float: left;
  height: 60px;
}

input.first-name
{
  width: 33%;
}

.which
{
  max-height: 400px;
  overflow-y: scroll;
}


/*** MAIN ***/

#main {
    grid-area: main;
    margin: 25px;
    overflow: hidden;
}

.chart_grid {
    width: 100%;
}

#chart {
    display: flex;
    flex-direction: row;
    float: left;
    height: 85%;
    align-items: flex-end;
}

.chart_bar {
    height: 100%;
    margin-left: 10px;
    margin-right: 10px;
    flex-grow: 1;
    transition: height 0.5s ease;
    height: 0%;
    background-color: white;
}

.chart_bar.green
{
  background-color: green;
}

.chart_bar.yellow
{
  background-color: yellow;
}

.chart_bar.red
{
  background-color: red;
}

/*.chart_bar:nth-child(4n+1) {
    background-color: #902525;
}

.chart_bar:nth-child(4n+2) {
    background-color: green;
}

.chart_bar:nth-child(4n+3) {
    background-color: blue;
}

.chart_bar:nth-child(4n+4) {
    background-color: orange;
}*/

#chart_x {
    background-color: var(--darkgrey);
    height: 15%;
    float: left;
    font-size: 2rem;
    display: flex;
    flex-direction: row;
}

.chart_bar_icon {
    flex-grow: 1;
    position: relative;
    color: white;
}

.chart_bar_icon span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*** SIDE ***/

#side {
    grid-area: side;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 25px;
    padding-left: 0;
}

#side .tweet {
    width: 100%;
    background-color: darkblue;
    min-height: 50px;
    margin-bottom: 15px;
    padding: 10px;
    color: white;
    animation: newtweet 3s;
}

#side .tweet:last-child {
    margin-bottom: 0;
}

#side .tweet span {
    display: inline;
}

#side .tweet .username {
    color: lightblue;
    text-decoration: underline;
}

#side .tweet .datetime {
    color: var(--grey);
}

/*** BAR ***/

button, input[type=button]
{
  cursor: pointer;
  /*border-radius: 20px;*/
}

.proceed
{
  width: 100% !important;
  /*margin: 20px 0 10px;*/
  height: 100px;
}

button.yes:hover {
    background-color: green;
}

button.no:hover {
    background-color: red;
}

#options {
    grid-area: bar;
    display: flex;
    flex-direction: column;
}

#options .slot {
    height: 120px;
    overflow-y: hidden;
}

#options .option {
    position: relative;
    height: inherit;
    flex-grow: 1;
    margin: 5px 25px;
    display: grid;
    grid-template-areas: "text button1 button2";
    grid-template-columns: 60% 20% 20%;
    color: black;
}

#options .option span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 2rem;
    color: white;
    text-shadow: 0 0 1px black;
}

#options .option_text {
    grid-area: text;
    padding: 25px;
}

#options .option:nth-child(1) {
    background-color: var(--blue1);
}

#options .option:nth-child(2) {
    background-color: var(--blue2);
}

#options .option:nth-child(3) {
    background-color: var(--blue3);
}

#options button {
    margin: 10px;
    margin-bottom: 20px;
    margin-right: 15px;
}

/*** BREAKING ***/

#breaking {
    grid-area: breaking;
    position: relative;
    padding: 25px;
}

#breaking #news {
    color: white;
    background-color: red;
    text-transform: uppercase;
    padding: 17px;
    padding-left: 140px;
    height: inherit;
    overflow: hidden;
    display: grid;
    grid-template-areas: "prefix text";
}

#breaking #news div {
    float: left;
    overflow: hidden;
}

#breaking #news div.scroll {
    padding-left: 15px;
}

#breaking_news_prefix {
    font-weight: bold;
    grid-area: prefix;
}

#breaking #breaking_news_text {
    margin-left: 20px;
    white-space: nowrap;
    grid-area: text;
}

#breaking #breaking_news_text p {
    margin: 0;
}

#breaking #clock {
    background-color: white;
    color: black;
    border: 5px solid red;
    width: 140px;
    overflow-x: hidden;
    height: inherit;
    position: absolute;
    text-align: center;
    padding: 12px;
}

/*** ANIMATIONS ***/

.scroll {
    animation: scroll-text 30s linear infinite;
    position: relative;
    display: inline-block;
}

@keyframes scroll-text {
    0% {transform: translateX(85%);}
    100% {transform: translateX(-120%);}
}

.blink {
    animation: blink 1s linear infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.fadein {
    animation: fadein 3s;
}

@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


@keyframes newtweet {
    0% {
        min-height: 0px;
        margin-bottom: 0px;
        padding: 0px 10px 0px 10px;
        height: 0px;
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    100% {
        min-height: 50px;
        margin-bottom: 15px;
        padding: 10px 10px 10px 10px;
        height: initial;
        opacity: 1;
    }
}

/* FINAL PAGE */

.outcome img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.removed-from-above, .removed-from-below {
    display: none;
}