html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}}

body p {
  font-size: 18px;
  font-weight: 200;
  margin-bottom: 3px;
}

#NumRow2 label {
  height: 60px;
}

#Scoreboard {
  display: flex;
  justify-content: space-between;
  width: 300px;
  height: 70px;
  margin: auto;
}

#Columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 200px;
    border:2px solid black;
    padding: 5px;
    font-size: 20px;
}

#Timer {
  display: flex;
  align-items: center;
  font-size: 40px;
  font-weight: bold;
  border:2px solid black;
  width: 100px;
}

#Player1_column {
    margin-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

#Player2_column {
  margin-top: auto;
  margin-bottom: auto;
}

#Player_Name_Div,
#Private_Setup {
  display: flex;
  flex-direction: row;
  font-weight: bold;
}

#Player_Name_Div img,
#Private_Setup img {
  height: 30px;
}
#Player_Name_Div label,
#Private_Setup label {
  margin-top: auto;
}

table.center,
#customise-settings div {
    margin-left: auto;
    margin-right: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


#row1 td,
#row2 td{
    border-bottom: 8px solid #000;
    overflow:hidden;
}
#row3 td {
  overflow:hidden;
}

.onetonine {
    font-size: 30px;
    font-weight: 700;
    word-spacing: 4px;
}

.vertical {
    border-left: 8px solid #000;
    border-right: 8px solid #000;
}

table.table {
    table-layout: fixed;
    max-width: 100%;
    width: 90%;
}

#Beta_text {
    position: absolute;
    margin-top: 5px;
    right: 5px;
    text-align: center;
}

#Beta_text h3 {
  font-size: 20px;
}

#Back_Button {
    position: absolute;
    left: 20px;
}

#Game_Board .icon {
  width: 52px;
}

#Banner .icon {
    height: 50px;
}

#Welcome_Screen .icon {
  width: 292px;
}

.small_icon {
    padding-top: 5px;
    height: 40px;
}

#Send_Results_div,
#Feedback_Div,
#Settings_Screen,
#New_Game_div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: Yantramanav, serif;
  width: 300px;
  margin: auto;
  text-align: center;
  font-size: 20px;
}

#Send_Results_div button,
#Send_Results_div input {
  margin: 5px;
  font-size: 20px;
  text-align: center;
}

#Settings_Buttons,
#New_Game_buttons {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   font-family: Yantramanav, serif;
   width: 300px;
   margin: auto;
   text-align: center;
}

#Settings_Buttons {
  margin-top: 10px;
}
#Settings_Buttons input {
  padding: 5px;
}

#Current_Role_Div {
  font-size: 25px;
  padding-top: 5px;
}

#Status_Update {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-bottom: 5px;
  font-size: 20px;
}

#CPU_Screen,
#PVP_Screen,
#Registration_div,
#How_To_Play_Divs,
#Commentary,
#Controls,
#Welcome_Screen,
#Grid
 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: Yantramanav, serif;
    width: 300px;
    margin: auto;
    text-align: center;
}

#Commentary {
  width: 300px;
}

h3 {
  font-weight: bold;
  font-size: 26px;
}

#NumRow1 {
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-top: 2px solid black;
}
#NumRow2 {
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}

#NumRow1,
#NumRow2 {
  width: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-between
}


#NumRow1 {
  margin-top: 10px;
}

#NumRow2 p,
#NumRow1 p {
  margin-bottom: 0px;
}



#Grid p {
  height: 86px;
  width: 86px;
  font-weight: bold;
  font-size: 70px;
  cursor: pointer;
  text-align: center;
}

#Controls p,
#Controls img {
  width: 56px;
  height: 56px;
}
#Controls img {
  width: 52px;
  height: 52px;
  padding: 2px;
}

#Controls {
  margin-bottom: 10px;
}

#PVP_Screen label > input,
#CPU_Screen label > input,
#Feedback_Div label > input,
#New_Game_div label > input,
#Welcome_Screen label > input,
#Controls label > input,
#Grid label > input { /* HIDE RADIO/CHECK */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}

#Set_Timer_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#Set_Timer_div p {
  padding: 5px;
}

#PVP_Screen label > input + img,
#CPU_Screen label > input + img,
#Welcome_Screen label > input + img {
  cursor:pointer;
}

#Feedback_Div label > input + p,
#CPU_Screen label > input + p,
#PVP_Screen label > input + p,
#Welcome_Screen label > input + p {
    margin-top: 10px;
    cursor:pointer;
    border:4px solid black;
    border-radius: 5px;
    font-size: 30px;
}

#AI_Difficulty {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

#AI_Difficulty .icon {
  width: 100px;
  height: 100px;
  margin: 10px;
}

#Beta_Message {
  margin-top: 10px;
}

#PVP_Screen h2 {
  padding: 5px;
}

#Welcome_Screen a + img {
  cursor:pointer;
  border:4px solid black;
  border-radius: 10px;
  margin-bottom: 10px;
}

#Welcome_Screen img {
  height: auto;
}



#Controls {
  border-collapse: collapse;
}

#Controls label > input + img,
#Controls label > input + p {
    cursor:pointer;
    border:2px solid black;
    border-collapse: collapse;
    font-size: 40px;
    font-weight: bold;
}

.bold {
  font-weight: bold;
}

.defender_wins {
  background: green;
}

.attacker_loses {
  background: red;
}

#Feedback_Div label > input + img,
#New_Game_div label > input + img,
#Player_Name_Div label > input + img,
#Private_Setup label > input + img {
  cursor:pointer;
  border:2px solid transparent;
  border-collapse: collapse;
  font-size: 40px;
  font-weight: bold;
}

#New_Game_Text {
  font-size: 20px;
  padding-top: 5px;
}

#Winning_Screen .right {
  text-align: right;
}

#Winning_Screen p {
    text-align: center;
}

#Code_Entry_div {
  font-size: 20px;
}

#Tutorial_Buttons {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#Tutorial_Buttons input {
  font-size: 20px;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: bold;
}

#How_To_Play_Divs p {
  padding-bottom: 5px;
}

#Help_5 h2 {
  font-size: 25px;
  font-weight: bold;
}

#Code_Entry_div label > input + p {
  cursor: pointer;
  border:2px solid black;
  width: 200px;
  justify-content:center;
  margin: auto;
  margin-top: 10px;
}


#Grid label > input:checked + p,
#Controls label > input:checked + p{ /* (RADIO CHECKED) IMAGE STYLES */
  background: yellow;
}

#Grid label > input:disabled + p {
  cursor: not-allowed;
}

#Controls label > input:disabled + p{ /* (RADIO CHECKED) IMAGE STYLES */
  background: grey;
  cursor: not-allowed;
}

.hide {
    display: none !important;
}

#Banner_Text {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 800px) {

    #Banner.header h1 {
        font-family: oswald,serif;
        font-weight: 500;
        font-size: 40px;
        color: white;
        text-align: center;
    }
    #Banner.header {
      flex-direction: column;
    }
    #Logo {
      display:flex;
      position:relative;
      margin: auto;
      padding: 0px;
    }
    #Beta_text {
      top: 0;
      right: 5px;

    }
    .hide_on_mobile {
        display:none !important;
    }
}

.loading_gif {
  width: 200px;
  height: 200px;
  align-self: center;
}

#Clues h1 {
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 35px;
    font-weight: 700;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

@media (max-width: 450px) {
    #Banner.header h1 {
        font-family: oswald,serif;
        font-weight: 500;
        font-size: 36px;
        color: white;
        text-align: center;
    }
    #Banner_Text {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .hide_on_smallest {
        display: none !important;
    }
}

.gap {
  padding-bottom: 12px;
}

#Clues_heading label {
  margin-left: auto;
}

@media (min-width: 800px) {
    #Clues label {
        text-align: left;
    }

    p {
      font-size: 20px;
    }

    #Clues h1 {
        padding-top: 5px;
        padding-bottom: 10px;
        font-size: 35px;
        font-weight: 700;
        text-align: left;
        padding-left: 10px;
        padding-right: 5px;
    }

    #Banner.header h1 {
        font-family: oswald,serif;
        font-weight: 500;
        font-size: 40px;
        color: white;
        text-align: center;
    }

    #Clues {
        position: absolute;
        display: flex;
        margin: auto;
        margin-left: 50%;
        max-width: 45%;

    }

    #Clues p {
      font-size: 20px;
      font-weight: 300;
    }

    .top {
        top: 85px;
    }
    .hide_on_pc {
        display: none !important;
    }
}

#Start_Game_div {
    margin-top: 20px;
}

.right {
  float: right;
}

#Login_form {
  height: 80px;
}

#Email_field,
#Password_field {
  width: 220px;
  padding: 5px;
  font-size: 16px;
  float: left;
}

#Registration_div input {
  font-size: 20px;
  padding: 5px;
  margin-top: 5px;
  width: 286px;
}

#Registration_div h1 {
  font-size: 30px;
  font-weight: bold;
}

#Password_field {
  margin-top: 5px;
}

#Login_submit {
  padding: 5px;
}

.left {
  float: left;
}

#Login_Div .text input {
  width: 200px;
}

#Login_Div form {
  display: flex;
  flex-direction: row;
}

#Login_Button_div {
  display: flex;
  align-items: center;
}



#Grid p.winning {
    background: yellow;
    opacity: 0.5;
}

#Timer.warning,
#Grid_Table.warning {
  background-color: #FF0000;
  animation-name: color;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes color {
  0% {
    background-color: #FF0000;
  }
  50% {
    background-color: #B22222;
  }
  100 {
    background-color: #FF0000;
  }
}

.add-button {
  position: absolute;
  bottom: -1000px;
}

#Add_to_homescreen_div {
  margin-top: 10px;
  padding: 5px;
  width: 286px;
  border:2px solid black;
}

#Add_to_homescreen_div h1 {
  font-size: 20px;
  font-weight: 700;
}

#Add_to_homescreen_div p {
  font-size: 18px;
  padding-top: 5px;
}

#Share_icon {
  height: 20px;
}

body {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}