/* Games dashboard */
.games-content-dashboard {
  --blue: #78ADC9;
  --darkblue: #018492;
  --grey: #E6E6E6;
  --coral: #FA7268;
  --black:  #313b3d;
  margin: auto;
  width: 1200px; 
  color: var(--darkblue);
/*  text-align: center;*/
  font-family: 'Indie Flower', 'Comic Sans', cursive;
  overflow: auto;
}
.games-content-dashboard .prez {
  padding: 15px 0;
  color: black;
  font-size: 1.2em;
}
.games-content-dashboard .prez h1 {
  color: var(--darkblue);
}
.games-content-dashboard .games {
  display: inline-block;
  width: 226px;
  margin: 5px;
}
.games-content-dashboard .card {
  border: 2px solid var(--grey);
  border-radius: 5px;
/*  width: 20%;*/
  padding: 15px;
}
.games-content-dashboard .card img {
  height: 200px;
  width: 100%;
  padding-bottom: 10px;
}

/* Tic tac toe */
.dark-mode {
  background-color: black;
  /*background-image: url("../images/nature.jpg");
  background-size: cover;
  background-repeat: no-repeat;*/
  color: var(--grey);
}
.dark-mode h1,
.dark-mode .th_list,
.dark-mode .td_list,
.dark-mode .links a,
.dark-mode .links,
.dark-mode .score,
.dark-mode .fa,
.dark-mode .level {
/*  color: var(--grey)!important;*/
}
.dark-mode .links a:hover,
.dark-mode .fa:hover {
   color: var(--coral)!important;
}
.dark-mode .td_game {
  border: 10px solid var(--grey)!important;
}
.games-content {
  --blue: #78ADC9;
  --darkblue: #018492;
  --grey: #E6E6E6;
  --coral: #FA7268;
  --black:  #313b3d;
/*  height: calc(100vh - 300px);*/
  margin: auto;
  width: 1120px; 
  color: var(--darkblue);
  text-align: center;
  font-family: 'Indie Flower', 'Comic Sans', cursive;
  font-size: 0.7em;
  overflow: auto;
}
.games-content #tic-tac-toeContiner {
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: linear;
  opacity: 0;
}
.games-content .tic-tac-toe .links, 
.games-content .maze .links,
.games-content .tetris .links,
.games-content .bricks .links {
  font-size: 1.5em;
  text-align: left;
  padding: 15px 15px 5px 15px;
}
.games-content .tic-tac-toe .links a:visited,  
.games-content .tic-tac-toe .links a:active,
.games-content .maze .links a:visited,
.games-content .maze .links a:active,
.games-content .tetris .links a:visited,
.games-content .tetris .links a:active,
.games-content .bricks .links a:visited,
.games-content .bricks .links a:active {
  color: var(--darkblue);
}
.games-content .tic-tac-toe .links a:hover,
.games-content .maze .links a:hover,
.games-content .tetris .links a:hover,
.games-content .bricks .links a:hover {
  color: var(--coral);
  text-decoration: underline;
}
.games-content .tic-tac-toe .opt {
  display: inline-block;
  padding-top: 10px;
}
.games-content .tic-tac-toe .score {
  font-size: 2em;
}
.games-content .tic-tac-toe .score i {
  padding: 5px 5px 5px 0;
}
.games-content .tic-tac-toe .score i::before {
  padding-right: 5px;
}
.games-content .tic-tac-toe h1,
.games-content .maze h1 {
  line-height: 1em;
  margin-bottom: 0;
  padding: 5px;
  font-size: 2.8em;
  font-weight: bold;
  color: var(--blue);
  font-family: 'Indie Flower', 'Comic Sans', cursive;
}
.games-content .tic-tac-toe .fa-volume-off,
.games-content .maze .fa-volume-off,
.games-content .tetris .fa-volume-off {
  padding-right: .7rem;
}
.games-content .tic-tac-toe h2 {
  font-size: 1.3em;
  font-weight: bold;
  padding: 0;
  margin: 0;
  font-family: 'Indie Flower', 'Comic Sans', cursive;
}
.games-content .tic-tac-toe .modal h3 {
/*  font-size: 1.1em;*/
/*  background-color: var(--blue);*/
  padding: 0;
  margin: 10px 0 2px 0;
  font-family: 'Indie Flower', 'Comic Sans', cursive;
  color: var(--coral);
}
.games-content .tic-tac-toe table {
    margin: 2% auto;
    border-collapse: collapse;
}
.games-content .tic-tac-toe #table_game {
  position: relative;
  font-size: 120px;
  margin: 1% auto;
  border-collapse: collapse;
}
.games-content .tic-tac-toe .td_game {
  border: 10px solid var(--darkblue);
  width: 90px;
  height: 90px;
  padding: 0;
  vertical-align: middle;
  text-align: center;
}
.games-content .tic-tac-toe .fixed {
  width: 100px;
  height: 100px;
  line-height: 100px;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
.games-content .tic-tac-toe .td_list {
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
}
.games-content .tic-tac-toe .th_list {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}
.games-content .tic-tac-toe #restart {
  font-size: 3em;
  width: 1em;
  height: 0.9em;
  cursor: pointer;
  margin: 0 auto;
  overflow: hidden;
}
.games-content .tic-tac-toe .x {
  color: darksalmon;
  position: relative;
  top: -14px;
  left: 2px;
  font-size: 1.2em;
  cursor: default;
}
.games-content .tic-tac-toe .o {
  color: #29a178;
  position: relative;
  top: -18px;
  left: 2px;
  font-size: 1.0em;
  cursor: default;
}

/* modal background */
.games-content .tic-tac-toe .modal,
.games-content .maze .modal,
.games-content .tetris .modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* enable scroll if needed */
/*  background-color: #181C14; /* fallback color */*/
  /*background-image: url("../images/nature.jpg");
  background-size: cover;
  background-repeat: no-repeat;*/
}

.games-content .tic-tac-toe #startDlg {
  display: block;
}

/* modal content */
.games-content .tic-tac-toe .modal-content,
.games-content .maze #Message-Container #message,
.games-content .tetris .modal-content {
  position: relative; /* or relative */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(240, 240, 240);
  color: rgb(32, 32, 32);
  font-size: 2em;
  font-weight: bold;
  padding: 20px;
  border: 2px solid black;
  border-radius: 10px;
  width: 380px;
  max-width: 75%;
  -webkit-box-shadow: 2px 5px 16px 0px #0B325E, 5px 5px 15px 5px rgba(0,0,0,0); 
  box-shadow: 2px 5px 16px 0px #0B325E, 5px 5px 15px 5px rgba(0,0,0,0);
}
.games-content .tic-tac-toe .modal-content img,
.games-content .maze #menu img {
  width: 100%;
  padding-bottom: 10px;
  max-height: 150px;
}
.games-content .tic-tac-toe .modal-content #score {
  display: flex;
  color: var(--coral);
  justify-content: center;
  align-items: center;
}
.games-content .tic-tac-toe .modal-content .endDlg {
  display: flex;
  color: var(--coral);
  justify-content: center;
  align-items: center;
}
.games-content .tic-tac-toe .modal-content .endDlg p {
  margin-top: -2px;
}
/*.games-content .tic-tac-toe .modal-content input[type=name] {
  border: 1px solid var(--darkblue);
  border-radius: 10px;
  margin: 10px auto;
  width: 200px;
  padding: 8px;
  font-size: 1em;
}*/
/* modal content for bigger display */
.games-content .tic-tac-toe .modal-content-big {
  position: relative; /* or relative */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(240, 240, 240);
  color: rgb(32, 32, 32);
  font-size: 1.5em;
  font-weight: bold;
  padding: 20px;
  border: 2px solid black;
  border-radius: 10px;
  width: 580px;
  max-width: 75%;
}
.games-content .tic-tac-toe .modal-content-big p {
  font-family: sans-serif;
  line-height: 1.3em;
  text-align: left;
  font-weight: 400;
}
.games-content .tic-tac-toe .modal-content-big h3 {
  font-family: sans-serif;
  line-height: 1.3em;
  text-align: left;
  color: var(--black);
}
.games-content .tic-tac-toe .modal-content-big .lable {
  text-align: left;
  padding: 10px 5px;
  font-family: sans-serif;
}
.games-content .tic-tac-toe .modal-content-big .play {
  text-align: center;
}
/* play button */
/*.games-content .tic-tac-toe .play {
  border: 1px solid var(--darkblue);
  border-radius: 40px;
  margin: 10px auto;
  width: 100px;
  padding: 7px 8px;
  cursor: pointer;
  background-color: var(--darkblue);
  color: white;
}*/
.games-content .tic-tac-toe .modal .play,
.games-content .maze .play
 {
  border: solid var(--darkblue);
  border-width: 1px 1px 5px 1px;
  border-radius: 10px;
  margin: 10px auto;
  width: 200px;
  padding: 5px 8px;
  cursor: pointer;
  background-color: #d2e2ed;
  font-family: 'Indie Flower', 'Comic Sans', cursive;
  font-weight: bold;
}
.games-content .tic-tac-toe .modal input[type=submit],
.games-content .tic-tac-toe .modal input[type=text],
.games-content .tic-tac-toe .modal input[type=password],
.games-content .maze #message input[type=submit],
.games-content .maze #message input[type=text] {
  font-size: 1em;
  border: 1px solid var(--darkblue);
  border-radius: 10px;
  margin: 10px auto;
  width: 220px;
  padding: 5px 8px;
  cursor: pointer;
  background-color: #d2e2ed;
  color: var(--black);
  font-family: 'Indie Flower', 'Comic Sans', cursive;
  font-weight: bold;
}
.games-content .tic-tac-toe .modal .quit,
.games-content .maze .quit
 {
  border: 1px solid var(--coral);
  border-radius: 10px;
  margin: 10px auto;
  width: 200px;
  padding: 5px 8px;
  cursor: pointer;
  background-color: #d2e2ed;
  color: black;
}
/*.games-content .tic-tac-toe .modal .quit a {
  color: black;
}
.games-content .tic-tac-toe .modal .quit a:hover {
  color: white;
}*/
.games-content .tic-tac-toe .quit:hover,
.games-content .maze .quit:hover {
  background-color: var(--coral);
  color: white;
  border: 1px solid var(--coral);
}
.games-content .tic-tac-toe .modal input[type=text],
.games-content .tic-tac-toe .modal input[type=password],
.games-content .maze #message input[type=text] {  
  background: transparent;
}
.games-content .tic-tac-toe .play:hover,
.games-content .maze .play:hover,
.games-content .tic-tac-toe .modal input[type=submit]:hover,
.games-content .maze #message input[type=submit]:hover {
  background-color: var(--blue);
  color: white;
/*  border: 1px solid var(--blue);*/
}
/*.games-content .fa-play-circle {
  padding-right: 5px;
  font-size: 1.2rem;
}
.games-content .tic-tac-toe .fa-play-circle::before {
  padding-right: 3px;
}*/

/* close button for modal dialog */
.games-content .tic-tac-toe .close {
    color: rgb(170, 170, 170);
    float: right;
    position: relative;
    top: -25px;
    right: -10px;
    font-size: 34px;
    font-weight: bold;
}
.games-content .tic-tac-toe .close:hover,
.games-content .tic-tac-toe .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.games-content .tic-tac-toe .win-color {
  background-color: var(--blue);
}

/*.games-content .game-header {
  display: flex;
  align-content: space-around;
  justify-content: center;
  align-items: flex-end;
}*/
/* audio button */
.games-content .tic-tac-toe .sound {
  cursor: pointer;
  display: inline-block;
  padding-right: 20px;
}
.games-content .tic-tac-toe .sun {
  cursor: pointer;
  display: inline-block;
}
.games-content .tic-tac-toe .sun:hover,
.games-content .tic-tac-toe .sound:hover {
  color: var(--coral);
}


/* Media query */
@media only screen and (max-width: 320px) {
  .games-content .tic-tac-toe .modal-content {
    transform: translate(-50%, -40%);
  }
}
@media only screen and (max-width: 767px) {
  .games-content {
    width: 100%;
  }
  .games-content-dashboard .games {
    margin: 10px auto;
  }
  .games-content-dashboard .card {
    padding: 10px;
    margin: auto;
  }
}
@media only screen and (min-width:767px) and (max-width: 999px) {
  
}
@media only screen and (max-width: 1224px) {
  .games-content-dashboard {
    width: auto;
    padding: 1rem 2rem;
  }
 .games-content {
/*    height: calc(100vh - 271px);*/
    width: 100%;
  }
  
}
@media only screen and (min-width:1024px) and (max-width: 1334px) {
  .games-content {
/*    height: calc(100vh - 285px);*/
  }
  
}