body{
    background-color: black;
    font-family: 'Righteous', cursive;
    color: white;
    zoom: 90%;
}
img {
    border-radius: 10%;
  }

.center {
    margin: auto;
    width: fit-content;
    text-align: center;
  }

.left {
    margin: auto;
    width: fit-content;
    text-align: left;
  }

#table_suspect_time {
    font-size: 12px;
}

#time_selection {
    font-size: 32px;
}

#answer_suspect_time {
    font-size: 32px;
    vertical-align: middle;
}

#gameover_text {
    font-size: 32px;
    vertical-align: middle;
}

#gameover_scene {
    font-size: 32px;
    vertical-align: middle;
}

#game_info_text {
    font-size: 16px;
    vertical-align: middle;
}

#time_selection_text {
    font-size: 16px;
    vertical-align: middle;
}

#help_title {
    font-size: 32px;
    vertical-align: middle;
}

#help_content {
  font-size: 16px;
  vertical-align: middle;
}

#settings_title {
  font-size: 32px;
  vertical-align: middle;
}

#suspect_ratio_text {
  font-size: 16px;
  vertical-align: middle;
}

#suspect_ratio {
  font-size: 16px;
  vertical-align: middle;
}

#guilty_ratio_text {
  font-size: 16px;
  vertical-align: middle;
}

#guilty_ratio {
  font-size: 16px;
  vertical-align: middle;
}

#img_room_map_suspect_0 {
  position: relative;
  top: -230px;
  left: -230px;
  z-index: 2;
}

#img_room_map_suspect_1 {
  position: relative;
  top: -230px;
  left: -220px;
  z-index: 2;
}

#img_room_map_suspect_2 {
  position: relative;
  top: -190px;
  left: -270px;
  z-index: 2;
}

#img_room_map_suspect_3 {
  position: relative;
  top: -210px;
  left: -270px;
  z-index: 2;
}

#img_room_map_suspect_4 {
  position: relative;
  top: -190px;
  left: -275px;
  z-index: 2;
}

#img_room_map_diamond {
  position: relative;
  top: -20f0px;
  left: -230px;
  z-index: 3;
}

#suspects_movements {
  position: relative;
  top: -30px;
  left: 70px;
  z-index: 3;
}

#blink_text {

  font-size: 32px;
  animation-name: blinkingText; 
  animation-duration: 1.2s; 
  animation-iteration-count: infinite;
}

@keyframes blinkingText{ from {color: white;} to {color: transparent;} }

.btn_settings {
	box-shadow:inset 0px 1px 0px 0px #e184f3;
	background:linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
	background-color:#c123de;
	border-radius:6px;
	border:1px solid #a511c0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:10px;
	font-weight:bold;
	padding:6px 6px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9b14b3;
}
.btn_settings:hover {
	background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
	background-color:#a20dbd;
}
.btn_settings:active {
	position:relative;
	top:1px;
}

.myButton {
	box-shadow:inset 0px 1px 0px 0px #e184f3;
	background:linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
	background-color:#c123de;
	border-radius:6px;
	border:1px solid #a511c0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9b14b3;
}
.myButton:hover {
	background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
	background-color:#a20dbd;
}
.myButton:active {
	position:relative;
	top:1px;
}

div { 
    border: 5px solid black; 
    
}
.column {
    float: left;
  }
  
  .left, .right {
    width: 50%;
  }
  
  .middle {
    width: 40%;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 400px;
  background-color: white;
  color: black;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}