@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);
#app, body, html{
  height: 100%;
  overflow: hidden;
}

.overlay_spinner {
  background: black;
  color: #666666;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 5000;
  top: 0;
  left: 0;
  float: left;
  text-align: center;
  opacity: .80;
  display:none;
  align-items: center;
  justify-content: center;
}

.overlay_spinner h2{
  color:#FFC648;
  font-size: 4.5rem !important;
}

#app {
  flex-direction: column;
  position: relative;
  min-height:500px;
  overflow-y: scroll;
}

body {
  margin: 0;
  background-color: #000;
  color: #fff;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  position: relative;
  font-family: Nunito, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

body:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: -1;
/*   background-image: url(../media/background.png);
  background-size: 100vw auto;
  background-repeat: no-repeat;
  background-position: center center; */
}

header{
  flex-direction: row;
  width: 100vw;
}
header img{
  max-width: 70%;
}

footer{
  flex-direction: row;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
}

footer img{
  max-height: 10vh;
}

#click_btn {
  max-width: 800px;
  transform: translate(20vw, 0);
  bottom:170px;
  position:absolute;
}

#click_btn img{
  width: 10vh;
  max-width: 180px;
  min-width: 100px;
}

#app, header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title{
  text-align: center;
  color: white;
  font-size: 3.5rem;
}

.pump-img {
  height: 0;
  flex-grow: 1;
  width: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  touch-action: manipulation;
  text-align: center;
 
}
.pump-img #score{
  font-family: 'Roboto Slab', serif;
  color: #000;
  -webkit-text-stroke: 3px #fff;
  font-weight: 700;
  font-size: 80px;
  word-wrap: break-word;
  letter-spacing: 1px;
}

.p {
  background-image: url(../media/popcat1.png);
}

.op {
  background-image: url(../media/popcat2.png);
}

.ranking-board{
  border-top: 8px solid gray;
  border-left: 8px solid gray;
  border-right: 8px solid gray;
  background: #fff;
  width: 100%;
  font-size: 1rem !important;
  position: absolute;
  bottom: 0;
  max-width: 50rem;
  margin: 0 auto;
  border-radius: 1rem 1rem 0 0;
  z-index: 1056;
  background-color:black;
  background-size:100% 50%; 
  background-repeat:no-repeat; 
  background-position:bottom;
  background-image: linear-gradient(to bottom, black, #997A48  180%);
}


.collapsible {
  background: none;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.2rem;
  text-align: center;
}

#content {
  padding: 0.5rem;
  padding-top: 0;
}
.rank_count img{
  height: 1.1rem;
  width: auto;
}

#ranks_list{
  padding: 0px 20px;
  color: white;
  font-size: 1rem;
  font-weight: 300;
  max-height: 30vh;
  overflow-y: scroll;
}

ol{
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 50rem;
  margin: 0 auto;
}

.bar{
  display: flex;
  flex-direction: row;
  cursor: pointer;
  padding: 1rem 0px;
  background-image: url(../media/leaderboard.png);
  background-size: 90% 100%;
  background-repeat: no-repeat;
  background-position: center;
  max-height:50px;
  height:12vh;
  transform: translate(0%, -60%);
}

.position { grid-area: position; color:#AA902F;}
.rank_count { grid-area: rank_count;   text-align: right;}
.rank_name { grid-area: rank_name; 
  width: 50vw;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .rank_name img{
  height:2rem;
  width:auto;
  margin-right: 2rem;
 }
ol li{
  padding: 0.5rem 0;
  display: grid;
  flex-direction: row;
  align-items: center;
  grid-template-areas: 'position rank_name rank_name rank_name rank_count';
}

ol li .position{
  min-width: 2rem;
  text-align: center;
  margin-right: 0.5rem;
}

.collapsible {
  padding: 0;
  display: inline-flex;
  justify-content:center;
  align-items: center;
}

.collapsible  h1{
  font-weight: 600 ;
  font-size: 2rem !important;
  color: white;
}
.setting_link{
  font-size: 0.7rem !important;
  text-align:right;
}
#result-score {
  text-align: center;
  font-family: 'Roboto Slab', serif;
  color: #fff;
  -webkit-text-stroke: 3px #000;
  font-weight: 700;
  font-size: 80px;
  word-wrap: break-word;
  letter-spacing: 1px;
}
.modal-content{
  border: 8px solid gray;
  background-image: linear-gradient(to bottom, black, #997A48  180%);
}
.btn{
  background-color: #B88E48;
}
.btn:hover{
  background-color: #997A48;
}

.flag img{
  height: 2rem;
  width: auto;
  margin:0.8rem;
}

#board-header h2 {

  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 500px)
{

  #board-header h2 {
    font-size: 1em;
  }
  .flag img{
    height: 1.2rem;
    margin:0.5rem;
  }

}
@media (min-width: 1000px)
{
  
  #ranks_list{
    font-size: 1.2rem;
  }
  
  .cat-img {
    font-size: 40px;
    -webkit-text-stroke-width: 1.5px;
  }
  
}
.cryptocurrency:nth-of-type(1n+21) {
  display: none !important;
}