h1{
    font-size: 70px;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 0px;
  }
  .playertable{
    width:100%;
    height: 20%;
    table-layout: fixed;
    border: 9px solid rgba(255,255,255,0.3);
  }
  .slidein{
    animation-duration: 0.5s;
    animation-name: slidein;
      animation-fill-mode: forwards;
    animation-direction:normal;
  }
  .slideout{
      animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-name: slideout;
    animation-direction:normal;
  }
  .rulebar{

  }
/*
position: fixed;
  top: 30px;
  right: 0px;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0.5;
  width: 120px;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  z-index: 1;
*/

/* The actual popup */
.popuptext {
position: fixed;
  top: 25px;
  right: 0px;
  display: inline-block;
  opacity: 0;
  width: 60px;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  z-index: 1;
  
}


/* Toggle this class - hide and show the popup */
 .show1 {
  -webkit-animation: fadeIn 0.8s;
  -webkit-animation-direction: linear forwards;
  animation: fadeIn 0.8s;
  animation-direction: linear forwards;
}
 .show2 {
  -webkit-animation: fadeIn 0.8s;
  -webkit-animation-direction: linear forwards;
  animation: fadeIn 0.8s;
  animation-direction: linear forwards;
}


/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  0%,100% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 1; }
}

@keyframes fadeIn {
  0%,100% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 1; }
}








  @keyframes slideout {
    from {width: 20%;}
    to { width: 0px;}
  }

  @keyframes slidein {
    from {width: 0px;}
    to {width: 20%;}
  }

  .tart {

      padding: 10px;
  }

  .row-hover:hover .child{
      color: #000;
  }
  .row-hover:hover{background-color:#ccc;color:#000;width: 100%;}


  .txt-box{
    background-color: rgba(255,255,255,0.3);

   }

   .btn-delete i {
     position: absolute;
     top: 15%;
     left: 26%;
     width: 10px;
     height: 10px;
     outline: none;
     -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    }
    .btn-delete:focus {
      outline: none;
    }
   .btn-delete {
     outline: none;
     background-color: transparent; /* Blue background */
     border-style: solid;
     border-width: 0px;
      border-color: white; /* Remove borders */
     color: white; /* White text */
     padding: 0px 0px; /* Some padding */
     font-size: 16px; /* Set a font size */
     cursor: pointer; /* Mouse pointer on hover */
     height:35px;
      width:35px;
      outline: none;
     -webkit-transform: scale(1.0);
     -moz-transform: scale(1.0);
     -o-transform: scale(1.0);

     -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
     -o-transition-duration: 0.5s;

   }

   /* Darker background on mouse-over */
   .btn-delete:hover {
     -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);



   }



      .bottomdiv{
        position: absolute;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
       }

    .tar {
      float:right;
  }

  .tbl-header{

    overflow-x:auto;
    text-align: center;
    background-color: rgba(255,255,255,0.3);

   }
   .tbl-content{
    display: inline-block;
       height:45vh;
      overflow-x:auto;
    text-align: center;
    margin-top: 0px;
    position: relative;
   }
  th{
    padding: 8px 8px;
    text-align: center;
    font-weight: 500;
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
  }
  .td{
    padding: 8px;
    text-align: center;

    font-weight: 300;
    font-size: 20px;
    color: #fff;
    border-bottom: solid 1px rgba(255,255,255,0.1);
  }

  .td:hover{
    color: #000;
  }

  .td1{
    padding: 0px;
    text-align: center;

    font-weight: 300;
    font-size: 20px;
    color: #fff;
    border-bottom: solid 1px rgba(255,255,255,0.1);
  }


      .bg1{
        overflow: auto;
      }

  /* demo styles */

  @import url(https://web.archive.org/web/20220219020803cs_/https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
  .bgteal{
    background: -webkit-linear-gradient(left, #25c481, #25b7c4);
    background: linear-gradient(to right, #25c481, #25b7c4);
    font-family: 'Roboto', sans-serif;
  }
  .bgred{
    background: -webkit-linear-gradient(left, #d42828, #d41c65);
    background: linear-gradient(to right, #d42828, #d41c65);
    font-family: 'Roboto', sans-serif;
  }



  .bgblue{
    background: -webkit-linear-gradient(left, #2492c9, #4671e8);
    background: linear-gradient(to right, #2492c9, #4671e8);
    font-family: 'Roboto', sans-serif;
  }

  .bggreendark{
    background: -webkit-linear-gradient(left, #346cc7, #244bc9);
    background: linear-gradient(to right, #346cc7, #244bc9);
    font-family: 'Roboto', sans-serif;
  }
  .bggreen{
    background: -webkit-linear-gradient(left, #6fc732, #25b342);
    background: linear-gradient(to right, #6fc732, #25b342);
    font-family: 'Roboto', sans-serif;
  }
  .bgpurple{
    background: -webkit-linear-gradient(left, #b827d9, #8846e3);
    background: linear-gradient(to right, #b827d9, #8846e3);
    font-family: 'Roboto', sans-serif;
  }
  .bgyellow{
    background: -webkit-linear-gradient(left, #e8db4a, #e89433);
    background: linear-gradient(to right, #e8db4a, #e89433);
    font-family: 'Roboto', sans-serif;
  }



  section{
    margin: 50px;
  }



  /* for custom scrollbar for webkit browser*/

  ::-webkit-scrollbar {
      width: 6px;
  }
  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  }
  ::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  }

body{
   touch-action: manipulation;
}
h1 {text-align:center;}
p {text-align:center;}


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

.label1 {
  position: fixed;
  left: 50%;
  top: 40%;
transform: translate(-50%, -50%);
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 300;
  text-align: center;

    font-size: 30px;
    font-size: calc(100% + 2.5vw);
}

::-webkit-input-placeholder {
   color: #f4f2ca;
   opacity: .8;
}

/* Input field that looks like a button */
.email-field {
  font-size: 18px;
	width: 150px;
	display: inline-block;
	color: #ffffff;
	text-align: center;
	background-color: #d8492e;
	padding: 0.7em 1.5em;
	border: none;
	cursor: pointer;
	outline: none;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	transition: all .1s linear;
}
.email-field:hover {
	background-color: #d0432a;
}

.hidden{
  animation-direction:reverse;
  display: none;
}


/* after button is clicked */
.email-field.active {
	width: 180px;
	outline: none;
	color: #efaa9d;
	text-align: left;
	cursor: inherit;
}

.btn-add i {
  position: relative;
  top: 10%;
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-transform: scale(2);
 -moz-transform: scale(2);
 -o-transform: scale(2);
}

.btn-add {
  outline: none;
  background-color: transparent; /* Blue background */
  border-style: solid;
  border-width: 0px;
  border-color: white; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  height:30px;
   width:35px;
  border-radius: 50%;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	transition: all .2s linear;
  display: none;
}

.btn-add:focus {
  outline: none;
}

.btn-drunk:hover {
  -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);

}



/* Darker background on mouse-over */
.btn-add:hover {
  -webkit-transform: scale(1.0);
 -moz-transform: scale(1.0);
 -o-transform: scale(1.0);

}
.btn-add.show {
	display: inline-block;
	background-size: 33px;
}

.btn-drunk.show {
	display: inline-block;
}
.rock{
  position: absolute;
    bottom: 2%;

}
.rockier{
  position: absolute;
    bottom: 12%;

}
.btn-addg2 i {
  position: relative;
  top: 50%;
  left: 40%;
  width: 20px;
  height: 20px;
  -webkit-transform: scale(1.7);
 -moz-transform: scale(1.7);
 -o-transform: scale(1.7);
}
.btn-addg i {
  position: relative;
  top: 50%;
  left: 40%;
  width: 20px;
  height: 20px;
  -webkit-transform: scale(1.7);
 -moz-transform: scale(1.7);
 -o-transform: scale(1.7);
}
.btn-addg2 {
  position: fixed;
  top: 4px;
  right: 25px;
  width: 100%;
  outline: none;
  border-style: solid;
  
  border-width: 0px;
  border-color: white; /* Remove borders */
  color: white; /* White text */
  font-size: 20px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  background-color: transparent;
  height:20px;
	width: 20px;
   border-radius: 6px;
   text-align: justify;
  -webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	transition: all 0.1s linear;

}
.btn-addg {
  position: fixed;
  top: 4px;
  right: 25px;
  width: 100%;
  outline: none;
  border-style: solid;
  
  border-width: 0px;
  border-color: white; /* Remove borders */
  color: white; /* White text */
  font-size: 20px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  background-color: transparent;
  height:20px;
	width: 20px;
   border-radius: 6px;
   text-align: justify;
  -webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	transition: all 0.1s linear;

}

.btn-next {
  position: static;
  top: 90%;
  width: 100%;
  margin-left: 10px;
  outline: none;
  border-style: solid;
  border-width: 0px;
  border-color: white; /* Remove borders */
  color: white; /* White text */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  background-color: #d8492e;
  height:50px;
	width: 150px;
   border-radius: 6px;
   text-align: justify;
  -webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	transition: all 0.1s linear;
}



.btn-next i {
  position: relative;
  top: 0%;
  left: 80%;
  width: 10px;
  height: 10px;
  -webkit-transform: scale(1.7);
 -moz-transform: scale(1.7);
 -o-transform: scale(1.7);
}
.btn-hover:hover {
  -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
}
.btn-next:active {
  -webkit-transform: scale(1.0);
 -moz-transform: scale(1.0);
 -o-transform: scale(1.0);
}

.btn-drunk {
  outline: none;
  background-color: transparent; /* Blue background */
  border-style: solid;
  border-width: 0px;
  border-color: white; /* Remove borders */
  color: white; /* White text */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  height:40px;
   width:0px;
   border-radius: 6px;

  -webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	transition: all 0.1s linear;

  font-size: 0px;
  display: none;
}

.btn-drunk:active {
  -webkit-transform: scale(1.0);
 -moz-transform: scale(1.0);
 -o-transform: scale(1.0);
}

.btn-drunk.active {
  background-color: #d8492e;
  height:50px;
	width: 300px;

	outline: none;
	color: #ffffff;
  font-size: 25px;
	cursor: pointer;
}

/*
     FILE ARCHIVED ON 02:08:03 Feb 19, 2022 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 11:04:28 Feb 26, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.314
  exclusion.robots: 0.01
  exclusion.robots.policy: 0.004
  esindex: 0.005
  cdx.remote: 63.814
  LoadShardBlock: 232.752 (3)
  PetaboxLoader3.datanode: 268.182 (4)
  PetaboxLoader3.resolve: 94.093 (2)
  load_resource: 137.208
*/