* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#container {
  /* max-width: 600px; */
  margin: 0 auto;
  text-align: center;
}

.clearfix {
  clear: both;
}

.hidden {
  display: none;
}


#user-info {
  border: 3px solid #CCC;
  clear: both;
  /* margin: 0 auto 20px; */
  max-width: 225px;
  padding: 2px;
  text-align: left;
  border-radius: 72px;
  background-color: #565656;
}

#photo-container {
  background-color: #EEE;
  border: 1px solid #CCC;
  float: left;
  height: 50px;
  margin-right: 10px;
  width: 50px;
  border-radius: 50%;
}

#photo {
  height: 50px;
  margin: 0;
  width: 50px;
  border-radius: 50%;
}

@media (max-width: 300px) {
  #photo-container,
  #photo {
    height: 40px;
    width: 40px;
  }
}

.user-signed-out{
	 background-image: url('assets/G0_Drive_MainScreen.png');
	background-size: 100% 100%;
 /* background-color: #eaeaea;*/
  width: 100vw;
  height: 100vh;
}


/* leaderboard */
/* leaderboard */
.leaderboard {
	background: linear-gradient(to bottom, #3a404d, #181c26);
}

/* head */
.leaderboard .head {
	padding: 20px 16px;
	color: snow;
	font-size: 20px;
	text-align: center;
  display: flex;
    align-items: center;
    /* flex-grow: 1; */
    justify-content: center;
}
.leaderboard .head h1 {
	display: inline-block;
	margin-left: 4px;
}

/* body */
.leaderboard .body {
	color: snow;
	font-size: 16px;
}
.leaderboard ol {
	counter-reset: number; 
  padding-left: 0px;
  margin: 0px;
}
.leaderboard li {
	padding: 16px;
	display: flex;
  align-items: center;
}
.leaderboard li mark {
	flex-grow: 1;
	color: snow;
	background-color: transparent;
  text-align: justify;
  font-size: medium;
}

.leaderboard li small {
  font-size: medium;
}


.leaderboard li:before {
	counter-increment: number; 
	content: counter(number) "."; 
	margin-right: 4px;
  font-size: medium;
}
.leaderboard li:nth-child(1) {
	background: #fa6855;
}
.leaderboard li:nth-child(2) {
	background: #e0574f;
}
.leaderboard li:nth-child(3) {
	background: #d7514d;
}
.leaderboard li:nth-child(4) {
	background: #cd4b4b;
}
.leaderboard li:nth-child(5) {
	background: #c24448;
}
.leaderboard li:nth-child(6) {
	background: #b33b3f;
}
.leaderboard li:nth-child(7) {
	background: #9c2e31;
}
.leaderboard li:nth-child(8) {
	background: #97272b;
}
.leaderboard li:nth-child(9) {
	background: #861c20;
}
.leaderboard li:nth-child(10) {
	background: #6d1316;
}

/* container */
.leaderboardcontainer {
  width: 40vw;
	min-width: 300px;
	height: auto;
	border-radius: 25px;
	background-color: white;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	overflow: hidden;
}

body {
	font: 16px/1.2 "Roboto", sans-serif;
	color: #333;
}