:root {
  --bg:skyblue;
  --fg:lightblue;
  --bdr:rgba(0,0,0,0.1);
}

@font-face {
  font-family: 'BebasNeue';
  src:url('./font/BebasNeue-Regular.woff') format('embedded-opentype'), /* IE */
      url('./font/BebasNeue-Regular.woff') format('woff2'),             /* Mozilla Chrome */
      url('./font/BebasNeue-Regular.woff') format('woff'),              /* Mozilla Chrome Edge? */
      url('./font/BebasNeue-Regular.woff') format('truetype'),          /* Safari, Android, iOS */
      url('./font/BebasNeue-Regular.woff') format('svg');               /* Old iOS */
}

@font-face {
  font-family: 'Roboto';
  src:url('./font/Roboto-Regular.ttf') format('embedded-opentype'), 
      url('./font/Roboto-Regular.ttf') format('woff2'),             
      url('./font/Roboto-Regular.ttf') format('woff'),              
      url('./font/Roboto-Regular.ttf') format('truetype'),         
      url('./font/Roboto-Regular.ttf') format('svg');               
}

@font-face {
  font-family: 'Quicksand';
  src:url('./font/Quicksand-VariableFont_wght.ttf') format('embedded-opentype'), 
      url('./font/Quicksand-VariableFont_wght.ttf') format('woff2'),             
      url('./font/Quicksand-VariableFont_wght.ttf') format('woff'),              
      url('./font/Quicksand-VariableFont_wght.ttf') format('truetype'),         
      url('./font/Quicksand-VariableFont_wght.ttf') format('svg');               
}

@font-face {
  font-family: 'LiquidCrystal';
  src:url('./font/LiquidCrystal-Normal.otf') format('embedded-opentype'), 
      url('./font/LiquidCrystal-Normal.otf') format('woff2'),             
      url('./font/LiquidCrystal-Normal.otf') format('woff'),              
      url('./font/LiquidCrystal-Normal.otf') format('truetype'),         
      url('./font/LiquidCrystal-Normal.otf') format('svg');               
}

/* Std */
.flex   { display:flex; }
.row    { flex-direction:row; }
.col    { flex-direction:column; }
.btw    { justify-content:space-between; }
.around { justify-content:space-around; }
.center { justify-content:center; }
.align  { align-items:center; }


body {
  margin:0;
  font-family:'Quicksand', sans-serif;
  background-color:rgba(200,200,200,1);
  text-align:center;
  background-image:radial-gradient(lightblue, skyblue);
  background-attachment:fixed;
  overflow:hidden;
}

a {
  color:black;
  text-decoration:none;
}



.header, .footer {
  margin:0;
  position:fixed;
  width:100%;
  height:12vh;
  background-color:rgba(220,220,220,0.8);
}

.header {
  top:0;
}

.footer {
  bottom: 0;
}

.title {
  font-size:36px;
  line-height:36px;
  letter-spacing:1vw;
}

.nav {
  height:10vh;
  width:10vh;
  border-radius:50%;
  border:2px solid black;
  background-position:center;
  background-size:75%;
  background-repeat:no-repeat;
  background-color:rgba(220,220,220,0.8);
  cursor:pointer;
}

.container {
  padding-top:12vh;
  padding-bottom:12vh;
  overflow:scroll;
  min-height:75vh;
}

.buttons {
  margin:8px;
  height:5vh;
}

.button {
  margin:0px 5px 0px 5px;
  padding:0px 5px 0px 5px;
  height:100%;
  min-width:20vw;
  background-color:var(--fg);
  border:1px solid var(--bdr);
  cursor:pointer;
  line-height:5vh;
  font-size:8px;
}

.active {
  font-weight:bold;
}

.page {
  box-shadow:0px 0px 3px 1px black inset;
}

#highscore {
  font-family:'LiquidCrystal', monospace;
  font-size:24px;
  text-align:left;
  background-color:skyblue;
  padding:5vw;
  border:2px solid black;
  color:#DDD;
  text-shadow:0px 0px 3px cyan, 0px 0px 5px black;
  letter-spacing:3px;
  box-shadow:0px 0px 5px black inset;
  background-image:url('icon/scanline.png'), radial-gradient(skyblue, rgba(100,100,100,0.6));
  margin-top:-12vh;
}

#home    { background-image:url('icon/home.svg'); }
#leader  { background-image:url('icon/crown.svg'); }
#results { background-image:url('icon/clipboard.svg'); }
#players { background-image:url('icon/user-2.svg'); }
#stats   { background-image:url('icon/chart-vertical.svg'); }
#admin   { background-image:url('icon/info-circle.svg'); }

/* Start table formatting */
.data {
  width:90%;
}

table{
  width:100%;
  table-layout: fixed;
  background-color:lightblue;
}

.tbl-header{
  background-color: rgba(135,206,235,0.3);
  border-bottom: solid 1px rgba(0,0,0,0.1);
}
 
.tbl-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(135,206,235,0.3);
}

th{
  padding: 5px 3px;
  text-align: left;
  font-weight: 500;
  font-size: 8px;
  color: #000;
  text-transform: uppercase;
}

td{
  padding: 5px;
  text-align: left;
  vertical-align:middle;
  font-weight: 300;
  font-size: 8px;
  color: #000;
  border-bottom: solid 1px rgba(0,0,0,0.1);
}

section{
  /*margin: 50px;*/
}



::-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); 
}

/* End table Formatting */


@media screen and (min-width: 768px) {
  th, td {
    font-size:12px;
  }
  th {
    padding: 20px 15px;
  }
  td {
    padding: 15px;
  }
  .tbl-content {
    height:50vh;
  }
  #highscore {
    font-size:36px;
    margin-top:0px;
  }
  .button {
    font-size:12px;
    padding:0px;
    min-width:10vw;
  }
}