@import url('https://fonts.googleapis.com/css2?family=Graduate&display=swap');


/*ENTIRE PAGE - DEFAULTS*/
* {
  box-sizing: border-box;
  font-family: 'Graduate', cursive;
  margin: 0;
  padding: 0;
  font-weight: bolder;
  font-size: 1.3rem;
}

h4 {
  font-family: 'Arial';
}
body {
  height: 100vh;
  background-image: url(../img/background.jpg);
  background-size: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  cursor: none;
}

#view {
  height: 95%;
  
  flex-direction: column;
  justify-content: space-around;
}



.wager-title{
  margin-top:0;
}
.question-container .question{
  word-wrap: break-word;
  padding-bottom:10px;
  line-height: 32px;
}
.point-value{
  margin-bottom:20px;
}
.question-container,
.wager-container{
  margin-top: 0px !important;
  padding:20px;
  min-width: 60%;
  max-width: 400px;
  margin:auto;
  text-align: center;
  color:whitesmoke;
  background:#243441b5;
 
}
.wager-max::before{
  content:'Max:';
}
.ans-neg-box{
  margin-bottom: 30px;
}

#wager-amount{
  border-radius: 10px;
  color:crimson;
  width:50px;
}
.wager-min::before{
  content: 'Min:';
}


.answer{
  background:rgb(86, 86, 86);
  padding:.5rem;

  margin:7px;
  display: inline-block;

  text-align: center;
  width:100%;
  word-wrap: break-word;
  padding-left: 25px;
}
#quit {
  border-radius: 50%;
  padding: 30px;
  position: absolute;
  bottom: -15px;
  right: -15px;
  background: crimson;
}

#start-btn {
  position: relative;
  color:rgb(255, 51, 0);
  height: 75px;
  width: 200px;
  margin-top: 40px;

  animation: infinite 1400ms breath;
}
.number:hover,
.answer:hover,
#quit,
button:hover{
  cursor: pointer;
  background-color: rgb(116, 90, 80);
}

.number:hover{
  color:crimson;
}
#wager-amount:hover{
  background: crimson;
  color:whitesmoke;
  border: 1px solid crimson;
}

#player-area {
  width: 100%;
  text-align: center;
  margin: 20px auto 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#current-player {
  color: white;
  border-radius: 10px;
  padding: 10px;
  border-color:rgb(165, 0, 0);
}
/* #current-player::before{
  content:'.:'
}
#current-player::after{
  content:':.'
} */

.in-game-profile-picture{
height:40px;
width:40px;

}

.cloud-1 {
  position: absolute;
  animation: 85s infinite cloudsForward;
  top:0;
  left: 0px;
  z-index: -1;
}

.cloud-2 {
  position: absolute;
  animation: 55s infinite cloudsReverse;
  right: 0px;
  top: 200px;
  z-index: -2;
}

.cloud-3 {
  position: absolute;
  animation: 65s infinite cloudsForward;
  left: 400px;
  top: 300px;
  z-index: -1;
}

@keyframes cloudsForward {

  0%,
  100% {}

  50% {
    left: calc(100vw);
  }
}

@keyframes cloudsReverse {

  0%,
  100% {}

  50% {
    right: calc(100vw);
  }
}

.birds {
  position: absolute;
  z-index: -1;
  animation: 3s infinite fly;
}

@keyframes fly {

  0%,
  100% {
    left: 40%;
    top: 30%;
  }

  50% {
    left: 30%;
    top: 20%;
  }
}

#title span {
  font-size: 4rem;
}

#title span {
  position: relative;
  left: 100px;
  color: crimson; 
  margin:10px;
}

.profile-picture {
  padding-top: 24px;
    width: 38px;
    top: 8px;
    position: relative;
}

.profile-picture:hover {
  /* border: 1px solid white; */
}

/* input {
  border-radius: 5px;
  height: 2rem;
  width: 30%;
  margin: 5%;
  border: 1px lightblue solid;
  transition: 2s;
  animation: infinite 1400ms rotate-color;
} */

/* @keyframes rotate-color {

  0%,
  100% {
    color: rgb(255, 4, 0);
  }

  50% {
    height:1.95rem;
    color: rgb(38, 0, 252);
  }
} */

#loading-screen {
  height: 100vh;
  object-fit: cover;
}

/*CLUE BOXES*/
#game-board {
  margin-top: 0px!important;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 60%;
  margin: auto;
  overflow-y: scroll;
  overflow-x: hidden;
height: 700px;
}

.clue {
  text-align: center;
  line-height: -15px;
  min-height: 3rem;
  height: 126px;
  border-radius: 5px;
  padding: 15% 2%;
  margin: 9% 1%;
  background-color: #1236528a;

  color: whitesmoke;
}

.clue:nth-child(1) {
  background: rgb(59, 59, 59);
  line-height: -5px;
  padding: 10% 2%;
  height: 4rem;
}

.article.clue:hover {
  padding: 10% 2%;
 background-color: #bbb80057;
}

.clue td:nth-child(2){
  background: red;
}

[id=1] {
 color: blue;
}

.cluegreen {
  text-align: center;
  line-height: -15px;
  min-height: 3rem;
  height: 126px;
  border-radius: 5px;
  padding: 15% 2%;
  margin: 9% 1%;
  background-color: #5197008a;

  color: whitesmoke;
}

.cluegreen:hover {
  text-align: center;
  background-color: rgb(83, 185, 0);
  line-height: -15px;
  min-height: 3rem;
  height: 126px;
  border-radius: 5px;
  padding: 15% 2%;
  margin: 9% 1%;
 

  color: whitesmoke;
}

.clueyellow {
  text-align: center;
  line-height: -15px;
  min-height: 3rem;
  height: 126px;
  border-radius: 5px;
  padding: 15% 2%;
  margin: 9% 1%;
  background-color: #d3c5008a;

  color: whitesmoke;
}

.clueyellow:hover {
  text-align: center;
  background-color: rgb(173, 185, 0);
  line-height: -15px;
  min-height: 3rem;
  height: 126px;
  border-radius: 5px;
  padding: 15% 2%;
  margin: 9% 1%;
  color: whitesmoke;
}

.cluered {
  text-align: center;
  line-height: -15px;
  min-height: 3rem;
  height: 126px;
  border-radius: 5px;
  padding: 15% 2%;
  margin: 9% 1%;
  background-color: #d300008a;
  color: whitesmoke;
}

.cluered:hover {
  text-align: center;
  background-color: rgb(185, 22, 0);
  line-height: -15px;
  min-height: 3rem;
  height: 126px;
  border-radius: 5px;
  padding: 15% 2%;
  margin: 9% 1%;
  color: whitesmoke;
}

.cluecaffe {
  text-align: center;
  line-height: -15px;
  min-height: 3rem;
  height: 126px;
  border-radius: 5px;
  padding: 15% 2%;
  margin: 9% 1%;
  background-color: #3d1a028a;
  color: whitesmoke;
}

.cluecaffe:hover {
  text-align: center;
  background-color: rgb(56, 23, 1);
  line-height: -15px;
  min-height: 3rem;
  height: 126px;
  border-radius: 5px;
  padding: 15% 2%;
  margin: 9% 1%;
  color: whitesmoke;
}



.number {
  padding:10px;
} 
.results{
  width: 50%;
  display: block;
}
#wager-amount{
  margin: 0 20px;
}


.setplayername {
  height: 20px;
  margin: 50px;
  padding: 20px;
}

span.index {
  position: relative;
    /* display: block; */
    /* height: 32px; */
    /* z-index: 20; */
    /* top: -49px; */
    height: 0px;
    display: block;
    /* padding-bottom: 21px; */
    /* margin-bottom: 31px; */
    /* top: revert; */
    width: 10%;
    top: -50px;
    left: -30px;
    color: #00d0ff;
}

.nameplayers {
  text-align: center;
  margin: auto;
    width: 50%;
 
    padding: 10px;
}

.category {
  font-family: 'Arial';
}

.point-value {
  font-family: 'Arial';
}

.question {
  font-family: 'Arial';
}

.player-0 {
  position: absolute;
    margin-top: 60px;
    left: 15px;
    background-color: #ff000066;
    border-radius: 10px 10px 10px 10px;
    padding: 10px;
}

.player-1 {
  position: absolute;
  margin-top: 260px;
  left: 15px;
  /* background-color: #2b2b2b73; */
  border-radius: 10px 10px 10px 10px;
  padding: 10px;
}

.player-2 {
  position: absolute;
  margin-top: 470px;
  left: 30px;
}


.player-3 {
  position: absolute;
  margin-top: 470px;
  right: 30px;
}

.player-4 {
  position: absolute;
  margin-top: 260px;
  right: 30px;
}

.player-5 {
  position: absolute;
  margin-top: 60px;
  right: 30px;
}

.WinnerCups {

}

.bar-left {
  position: absolute;
  background-image: url(../img/lateral_izquierdo.png);
  height: 920px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 0px;
  width: 100%;
  z-index: 0;
  background-position: left;
  pointer-events: none;
}

.bar-right {
  position: absolute;
  pointer-events: none;
  height: 920px;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  z-index: 0;
  background-position: right;
  background-image: url(../img/lateral_derecho.png);
}

::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(193, 224, 13); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

.bar-points {
height: 40px;
padding-bottom: 20px;
background-color: rgb(20, 20, 20);
color: white;
width: 200px;

}


.bar-name {
  height: 67px;
  padding-bottom: 20px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  width: 200px;
  
  }
 
.plus {
  width: 100px;
  background-color: green;
    border: none;
}

.minus {
  width: 100px;
  background-color: red;
  border: none;
}

.bar-bottom {
  
  width: 200px;
}

.pts {
  font-size: 20px;
  left: 90px;
  top: -50px;
  position: relative;
}

.textpoint{
position: relative;
font-size: 4rem;
margin: 0px;
top: -30px;
}

#info{

  color:rgb(248, 248, 248);
  text-align: center;
  position: relative;
  z-index: 1;
  margin: auto;
  font-size: 50px;
  width: 75%;

  padding: 10px;
}

#cursor{
  position:absolute;  
  z-index: 9999;
}

#winner{
  font-size: 3.2rem;
  text-align: center;
  padding-top: 540px;
  color: crimson;
  margin: auto;
  /* margin: 0 auto; */
  background-image: url(../img/podio.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 1000px;
  position: relative;
  z-index: 0;
  /* vertical-align: middle; */
  /* display: inline-block; */
  top: -50px;
}

#segundo {
  position: relative;
  font-size: 2rem;
  left: 6%;

  text-align: center;
  z-index: 9999;
  width: 450px;
  top: -350px;

}

#tercero {
  font-size: 2rem;
  position: relative;
  left: 70%;

  z-index: 9999;
  width: 450px;
  text-align: center;
  top: -480px;
}



@media (min-width: 768px) {

  span.index {
    left: -20px !important;
  }

  .pts {
    font-size: 20px;
    left: 70px;
    top: -50px;
    position: relative;
  }
}


#logout_form input[type="submit"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 font-size:16px;
 background:none;
 border:2px solid white;
 color:white;
}
#signin_frm
{
 margin-top:200px;
 background-color:white;
 width:350px;
 margin-left:310px;
 padding:20px;
 box-sizing:border-box;
 box-shadow:0px 0px 10px 0px #3B240B;
}
#signin_frm h1
{
 margin:0px;
 font-size:25px;
 color:#8A4B08;
}
#signin_frm input[type="password"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 padding-left:10px;
 font-size:16px;
}
#signin_frm input[type="submit"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 font-size:16px;
 background-color:#8A4B08;
 border:none;
 box-shadow:0px 4px 0px 0px #61380B;
 color:white;
 border-radius:3px;
}
#signin_frm p
{
 margin:0px;
 margin-top:15px;
 color:#8A4B08;
 font-size:17px;
 font-weight:bold;
}

.protect_login {
    text-align: center;
    padding-top: 150px;
    color: white;
    margin: 0 auto;
    width: 995px;
    
}