body {
    height: 100vh;
    margin:0;
    padding:0;
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: 1rem;
    background: #37394a;
}

.wrappus{
    padding: 0vh 0;
    position: relative;
    max-width: 1054px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    background: #f2f4ff;
    background-image: url(../images/bg_chat2.png);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

#inside{
    margin: auto;
    width: 45%;
    height: 50%;
    border-radius: 25px;
    padding: 2vh 0;
}

header {
    padding: 0 20px 5px 20px;
}

#message {
    margin: 0 0 10px 0;
    color: #c6e7ff;
    border-bottom: 1px solid #fff;
    background-color: #5e647e;
    border-radius: 5px;
    height: 35px;
    background-image: url(../images/bg_game.png);
}

h1{
    font-size: 1.4rem !important;
    margin: 0vh 0;
}

hr{
    width: 50%;
}


#instruction{
    font-size: 1.5rem;
    margin-bottom: 0;
}

.img-weapon{
    max-width: 110px;
    height: auto
}

.bigbuttons{
    margin: auto;
}

#tlh{
    display: inline-block;
}

.timus, .levelus{
    margin-right:50px;
}


/* GAME */
.select-choice{
    display: inline-block;
    border: 5px solid #000000;
    border-radius: 80px;
    margin: 1rem;
    transition: all 0.6s ease;
}
#rock:hover, #paper:hover, #scissors:hover{
    background-color: #a6a6a6;
    cursor: pointer;
}

#rock{
    background-color: #FFEE88;
    box-shadow: 5px 7px 8px #888888;
}

#paper{
    background-color: #F40076;
    box-shadow: 5px 7px 8px #888888;
}

#scissors{
    background-color: #75C9C8;
    box-shadow: 5px 7px 8px #888888;
}

.result{
    font-size: 1.4rem;
    font-weight: 600;
}

.win-border {
    border: 5px solid #3bff00;
    box-shadow: 2px 2px 12px #3e3e3e;
}

.lose-border{
    border: 5px solid #ff0000;
    box-shadow: 2px 2px 12px #3e3e3e;
}

.tie-border{
    border: 5px solid #464647;
    box-shadow: 2px 2px 12px #3e3e3e;
}

.scores > p{
    font-size: 1.7rem;
    font-weight: 600;
    padding: 0.5rem;
    margin: 0;
}

#reset-button{
    display:inline-block;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5vh 1.5vw;
    color: #c6e7ff;
    border: 1px solid #fff;
    background-color: #5e647e;
    background-image: url("../images/bg_game.png");
    box-shadow: 0px 5px 0px 0px #a6a6a6;
    text-shadow: -1px 2px 3px #000000;
    border-radius: 5px;
    height: 35px;
}

#reset-button:active {
    color: #fff;
	position:relative;
	top:1px;
	text-shadow: none;
	/* text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa; */
}
/* END OF GAME CSS */

footer{
    font-size: 0.7rem;
    line-height: 0.3rem;
    padding-top: 2vh;
}

.fab {
    color: #000000;
    margin: 0 5px;
}

.icon {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    color: #0a0a0a;
}

a.icon {
    font-size: 24px;
    color: #000;
}

.designer-actions {
    position: relative;
    display: block;
    text-align: center;
    border-bottom: 1px solid transparent; 
    margin: 80px 0;    
    border-radius: 0 0 10px 10px;
    background: #d3d3d3;
}
h1 { text-align:center; margin-top:10px; font-size:24px;}
ol, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
ul {
    list-style: none;
}
ul.floating-menu[data-fm-floated="top"]:before {
    border-top: 9px solid #53576b;
}
/* MEDIA QUERIES */

/* Set the background color of body to tan */


@media screen and (max-width: 992px){

  #inside{
    width: 70%;
    /* height: 70%; */
  }

  .img-weapon{
    max-width: 95px;
    height: auto
  }

  .select-choice{
    margin: 1vh 1vw;
  }

}

@media (max-width: 768px){
  #inside{
    width: 80%;
    /* height: 80%; */
  }

  .img-weapon{
    max-width: 75px;
    height: auto
  }

  .select-choice{
    margin: 1vh 1vw;
  }
}

@media screen and (max-width: 600px){
  body {
    background-color: olive;
  }
  #inside{
    width: 90%;
    padding: 0;
  }

  h1 {
    font-size: 2.5rem;
  }

  #instruction{
    font-size: 1.3rem;
  }

  .scores > p{
    font-size: 1.1rem;
  }

  .img-weapon{
    max-width: 60px;
    height: auto
  }

  .select-choice{
    margin: 1vh 1vw;
  }
}
.informus{
    font-size: 30px !important;
    color: #53576b !important;
    border-radius: 50px !important;
    -webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 75%);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 75%);
}
.modal-header {
    padding: 0.5rem;
}
.modal-body {
    padding-top: 0px !important;
    margin-top: -10px;
}
.nav-tabs li {
    margin-right: 16px !important;
}
.nav-tabs li a{
    margin-right: 16px !important;
    color: #6c757d;
}
a.active.show {
    border-bottom: 3px solid #6c757d;
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    width:inherit;
 max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events:all;
}
.infus {
    position: absolute;
    right: 18px;
    background: #53586c;
    color: white !important;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50px;
}
.infus i{
    color:#fff;
}
.inf{

}


.floating-menu > li:nth-child(1){background:#556b2f32;}
.floating-menu > li:nth-child(2){background:#8b451332;}
.floating-menu > li:nth-child(3){background:#483d8b32;}
.floating-menu > li:nth-child(4){background:#3cb37132;}
.floating-menu > li:nth-child(5){background:#9acd3232;}
.floating-menu > li:nth-child(6){background:#00008b32;}
.floating-menu > li:nth-child(7){background:#8b008b32;}
.floating-menu > li:nth-child(8){background:#ff450032;}
.floating-menu > li:nth-child(9){background:#ffd70032;}
.floating-menu > li:nth-child(10){background:#7cfc0032;}
.floating-menu > li:nth-child(11){background:#00ff7f32;}
.floating-menu > li:nth-child(12){background:#dc143c32;}
.floating-menu > li:nth-child(13){background:#00ffff32;}
.floating-menu > li:nth-child(14){background:#00bfff32;}
.floating-menu > li:nth-child(15){background:#0000ff32;}
.floating-menu > li:nth-child(16){background:#ff00ff32;}