@font-face {
  font-family: 'Edit Undo Line BRK';
  src: url('../../css/EditUndoLineBRK.woff2') format('woff2'),
  url('../../css/EditUndoLineBRK.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Visitor';
  src: url('../../css/VisitorTT1BRK.woff2') format('woff2'),
  url('../../css/VisitorTT1BRK.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Visitor TT2 BRK';
  src: url('../../css/VisitorTT1BRK.woff2') format('woff2'),
  url('../../css/VisitorTT1BRK.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ModeNine';
  src: url('../../css/ModeNine.woff2') format('woff2'),
  url('../../css/ModeNine.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


h1,h2,h3
{
  color:#1af7ff;
  font-family:  'Edit Undo Line BRK';
}

h2 {
  color:#FFFD34;
}

h3,h4,h5,h6
{
  color:#FFFD34;
  font-family: "ModeNine", Monaco, monospace;
  text-shadow: 0 0 10px #FFFD34;
}


h1 {
  font-size:5em;
  text-align: center;
  line-height: 1em;
  padding-left:20px;
  padding-right:20px;
}
h2 {
  font-size:2.5em;
  text-align: center;
}

h3 {
  font-size:2em;
  text-align: center;
}



/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

  header img
  {
    width:100px;
    height:100px;
  }

  h1 {
    font-size:2.5em;
  }
  h2 {
    font-size:2em;
  }

  h3 {
    font-size:1.5em;
  }

  h4 {
    font-size:1.2em;
  }

}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  h1 {
    font-size:2.5em;
    -ms-word-break: break-all;
    word-break: break-all;

    /* Non standard for WebKit */
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
  h2 {
    font-size:1.9em;
  }

  h3 {
    font-size:1.4em;
  }

  h4 {
    font-size:1.1em;
  }
}

.btn-answer {
  font-family:"ModeNine", Monaco, monospace !important;
  width: 100%;
  background: #EEEEEE;
  color: #000;
}

.creator-choice-input {
  font-family:"ModeNine", Monaco, monospace !important;
}
.freetext-answer {
  font-family:"ModeNine", Monaco, monospace !important;
  width: 100%;
  font-size:1.3em;
}

.image {
  display:flex;
  justify-content:space-around;
}

.image-column {
  flex:50%;
  text-align: center;
}

.answer-toggle[aria-pressed=false] {
    background: #AAAAAA;
    color: #000;
}

.answer-toggle[aria-pressed=true] {
    background: #ffe400;
    color: #000;
}

#player-list {
    border:4px solid #000000;
    margin: auto;
    text-align:center;
}

#my-score {
  text-align: right;
}



.smallBTN {
  font-size:1.2em;
  margin-left:2px;
  margin-right:2px;

}

.section {
  clear:left;
  margin-bottom:8px;
}

.player-answered {
  color:#FFFFFF;
}

.player-notsubmitted {
  color:#999999;
}

.player-reader {
  color:#FFFD34;
}

.freetext-answer:disabled {
    background:#AAAAAA;
    box-shadow:none;
}

#player-list {
  padding:10px;
  border: 8px solid #1af7ff;
  box-shadow: inset 4px 4px 0px 0px #000000;
}



.pscore {
  padding-left:10px;
  font-family: 'Visitor' !important;
  font-size:1.3em;
  color:#1af7ff;
}

.pscore-alt {
  padding-left:10px;
  font-family: 'Visitor' !important;
  font-size:1.3em;
  color:#FFFFFF;
}


.rank1 {
  padding-left:10px;
  font-family: 'Visitor' !important;
  font-size:1.3em;
  color:#1af7ff;
}

.player-row {
  cursor:pointer;
}


.choices-hidden, .choices-hidden h4
{
  color:#777777;
}

.answer-hidden, .answer-hidden h4
{
  color:#777777;
}

.answer-score-correct
{
  font-family: 'ModeNine' !important;
  font-size: 1.8em;
  background-color: #17a3a8;
  border: 4px solid #1af7ff;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1em;
  color:#FFFFFF;
  text-align: center;

}



.answer-score-incorrect
{
    font-family: 'ModeNine' !important;
    font-size: 1.8em;
    background-color: rgb(139, 42, 147);
    border: 4px solid rgb(66, 20, 70);
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1em;
    color: #000;
    text-align: center;
}

.external-link
{
  font-family: 'Visitor';
  font-size: 1.2em;
  background-color: #1af7ff;
  border: 4px solid #000000;
  box-shadow: inset 4px 4px 0px 0px #FFFFFF;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1em;
  color:#000000;
}

img.imgClue {
    max-width: 100%;
    max-height: 500px;
}


img.imgClueHost {
    max-width: 100%;
    max-height: 125px;
    margin-bottom:8px;
}

.radio-toolbar {
  margin: 10px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar label {

    font-family: 'ModeNine' !important;
    font-size:1em;
    border:4px solid #000000;
    box-shadow: inset 4px 4px 0px 0px #FFFFFF;
    padding-left:12px;
    padding-right:12px;
    padding-top:2px;
    padding-bottom:2px;
    background: #AAAAAA;
    color: #000;
}

.radio-toolbar label:hover {
  background: #BBBBBB;
  color: #000;
}

.radio-toolbar input[type="radio"]:focus + label {
    /*border: 2px solid #444;*/
}

.radio-toolbar input[type="radio"]:checked + label {
  background: #ffe400;
}

.creator-question-row {
  background-color: rgba(255, 255,255, 0.15);
  margin-bottom: 12px;
}

textarea {
    border: 4px solid #150639;
    background-color: #fffd34;
    box-shadow: inset 4px 4px 0px 0px #BfBd14;
    color: #150639;
    padding-left: 8px;
}



select, option {
  font-family: 'ModeNine' !important;
    font-size:26px;
    border: 4px solid #150639;
    background-color: #fffd34;
    box-shadow: inset 4px 4px 0px 0px #BfBd14;
    color: #150639;
}

select
{
  margin-bottom: 8px;
}

.freetext-answer
{
  margin-bottom: 8px;
}

label
{
  margin-bottom:0px;
}

body {
  font-family:"ModeNine", Monaco, monospace;
}

.miniBTN {
  font-size:1.1em;
  padding:4px;
  padding-left:8px;
  font-family:"Lucida Console", Monaco, monospace;
}

.clickable
{
  cursor:pointer;
}

.focus-border
{
  border: 12px dashed #fffd34;
  padding: 12px;
}

.info-text
{
  color: #fffd34;
}

span.player-row:hover + i
{ /* when icon is hovered select i */
  visibility: visible;
}


span.player-row + i { /* in all other case hide it */
  visibility: hidden;
}



header {
    display: flex;
    justify-content: center;
    align-items: center;
    height:120px;
}
header a img {
  display: flex;
  height:100%;
  object-fit: cover;
  maring-right:1em;

}

header a {
  display: flex;
  height:100%;
}


div.textarea {
    border: 4px solid #150639;
    background-color: #fffd34;
    box-shadow: inset 4px 4px 0px 0px #BfBd14;
    color: #150639;
}

.accordion-header {
  background:none;
  border:none;
  outline:none;
  padding:0px !important;
}


.accordion-content {
  background:none;
  border:none;
  outline:none;
  padding:0px !important;
}


.creator-choice
{
  width:50%;float:left;display:flex;padding-right:16px;margin-bottom: 8px;
}

.creator-choice-input
{
   flex-grow:1;
}

#next-question {
  margin:8px;
}

#next-question-container {
  width:100%;
  text-align: right;
}

#answers {
  background-color: RGBA(0,0,0,0.2);
  padding:8px;
  font-family: "ModeNine", Monaco, monospace;
  color:#FFFD34;
  margin-top:12px;
  margin-bottom:12px;
  font-size:1.1em;
  text-align: center;
}

input[type=text] {
    padding-left: 8px;
}

input[type=text] {
    padding-left: 8px;
}


/*** custom checkboxes ***/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + span:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size:1.5em;
  color:#1af7ff;
}

input[type=checkbox] + span:after { content: "\f0c8"; } /* unchecked icon */
input[type=checkbox] + span:after { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + span:after { content: "\f14a"; } /* checked icon */
input[type=checkbox]:checked + span:after { letter-spacing: 10px; } /* allow space for check mark */


@media (max-width: 758px)
{
  header {
    height:80px;
  }

  .smallBTN {
    width:auto;
  }


  a.button,button {
    width: 95%;
    left: 2.5%;
    position: relative;
    margin-bottom: 8px;
  }

  .answer-word-buttons
  {
    width:95%;
    text-align: center;
  }

  #answer-word {
    width:100%!important;
    line-height:10vw!important;
    font-size:10vw!important;

  }
}


@media (max-width: 400px)
{
  header  {
    height:50px;
  }

  .smallBTN {
    width:auto;
  }
}


#fixed-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0,0, 0.5);
  padding:8px;
}

#pizza {
  background: transparent url('../img/pizza-4x.png') no-repeat center;
  width:90%;
  left:5%;
  max-height:60vh;
  height:720px;
  background-size:contain;
  position:relative;
}

.pizza-letter {
  height:70px;
  width:70px;
  position:absolute;
  color:black;
  font-size:8vh;
  font-family: 'ModeNine';
  text-align:center;
  vertical-align:middle;
  line-height: :8vh;
  text-shadow: 0 0 5px #000000;
  cursor:pointer;
  -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;

}

#answer-word-container {
  font-size:5vh;
  font-family: 'ModeNine';
  border: 8px solid #1af7ff;
  box-shadow: inset 4px 4px 0px 0px #000000;
  margin-bottom: 8px;
}



button.inheritSize {
  font-size:inherit;
  /*line-height:inherit;*/
  width:auto;
}

.spin
{
    transition        : 1s ease-in-out;
    color             : red;
    -webkit-transform : rotate(720deg);
}

#pizza-bottom
{
  text-align:right;position:relative;padding-right:8px;padding-left:8px;
}


#last-answer
{
  text-align:right;position:relative;
}


.team-result {
  background-color: rgba(255,255,255, 0.1);
  padding:8px;
  margin-bottom:4px;
  text-align: left;
}

/*
.team-result-row {
  text-align: left;
  display:flex;
  justify-content: space-around;
  align-items: center;
  font-size:1.3em;
}
*/



table.results
{
  font-size:1.5em;
  width:100%;
  border-spacing:0px 4px;
  border-collapse:separate;
}


/*mobile*/
@media (max-width: 1000px) {

  table.results
  {
    font-size:4vw;
  }
}


.team-result-row
{
  background-color: rgba(255,255,255, 0.1);
}

.team-result-row td
{
  vertical-align: middle;
  font-size:100%;
}

.team-result-header th
{
  vertical-align: bottom;
  font-size:75%;
}



.team-name
{
  font-family: 'Visitor' !important;
  color:#FFFD34;
  font-size:100%;
}


.team-mvp
{
  font-size:75%;
  font-family: 'Visitor' !important;
  color:#FFFFFF;
}

.tscore {
  padding-left:10px;
  font-family: 'Visitor' !important;
  font-size:100%;

  color:#1af7ff;
}

.tscore-alt {
  padding-left:10px;
  font-family: 'Visitor' !important;
  font-size:100%;
  color:#FFFFFF;
}

.big-words {
  font-size:75%;
}

#intermission-timer{
    font-size:150%;
}