@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
    font-family: Roboto;
    margin: 0;
    overflow: hidden;
}

#map {
    position: absolute; 
    width: 100%; 
    top: 0; 
    bottom: 0; 
    left: 0;
    right: 0;
}

/* --- Default Shit --- */

/* Everything on the top of the screen */
#top-wrapper {
    position: relative;
    margin: 0 auto;
    width: min-content;
    height: 20px;
    text-align: center;
    white-space: nowrap; /* So the country prompter doesn't split into multiple lines */
}

/* Start button */
#start-button {
    position: relative;
	background-color: mediumseagreen;
	border-radius:12px;
	display:inline-block;
	cursor:pointer;
    color:white;
    margin: 5px;
	font-size:20px;
	font-weight:bold;
	padding:7px 26px;
	text-decoration:none;
    text-shadow:0px 1px 0px darkgreen;
}

#start-button:hover {
	background-color:seagreen;
}

/* For the initial slide up */
.slideup {
    transform: translateY(-140px);
    transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* About shit */
#about {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: shade 0.7s forwards cubic-bezier(.38,.79,.43,.95); /* Shade the bg gradually */
}

@keyframes shade {
    100% { background-color: rgba(0,0,0,0.4)}
}

/* About content box */
#about-content {
  background-color: white;
  padding: 20px;
  width: 80%;
  max-width: 700px;
  max-height: 90%;
  text-align: justify;

  transform: translate(-50%, -50%);
  position: absolute;
  top: -20%; /* Depends on how much content */
  left: 50%;
  overflow: scroll;
  animation: about-slide 0.7s forwards cubic-bezier(.38,.79,.43,.95);
  opacity: 0;
}

@keyframes about-slide {
    100% { top: 50%; opacity: 1;}
}

/* Close button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* --- Ingame Shit --- */

/* Styles for the controls */
#playing-wrapper {
    display: none;
    position: relative;
    top: -200px;
    animation: playing-wrapper-slide 0.6s 0.2s forwards cubic-bezier(.72,0,.36,1.43);
}

@keyframes playing-wrapper-slide {
    100% { top: -35px; }
}

#country-prompter {
    display: inline;
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0,0,0,.3);
    padding: 5px;
    text-align: center;
    font-size: 25px;
}

#scores-wrapper {
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px;
    padding-top: 10px;
}

#scores-plus {
    color: black;
}

#skip {
    background-color: tomato;
	border-radius:2px;
	display:inline-block;
	cursor:pointer;
    color:white;
    margin: 5px;
	font-size:15px;
	font-weight:bold;
	padding:3px 12px;
	text-decoration:none;
    text-shadow:0px 1px 0px red;
}

#skip:hover {
	background-color: orangered;
}

#skip:active {
	position: relative;
	top:1px;
}

#about-button {
    background-color: darkgray;
	border-radius:2px;
	display:inline-block;
	cursor:pointer;
    color:white;
    margin: 5px;
	font-size:15px;
	font-weight:bold;
	padding:3px 12px;
	text-decoration:none;
    text-shadow:0px 1px 0px slategray;
}

#about-button:hover {
	background-color: gray;
}

#about-button:active {
	position: relative;
	top:1px;
}

/* --- Scorecard Shit --- */

#totals-wrapper {
    display: none;
    position: absolute;
    margin: auto;
    padding: 0;
    text-align: center;
    font-size: 15px;
    background-color:white;
    width: 300px;
    height: 260px;
    transform: translate(-50%, -50%);
    top: 150%;
    left: 50%;
    border-radius: 7px;
    box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.2);
    animation: totals-slide 1.2s forwards cubic-bezier(.72,0,.36,1.43);
}

@keyframes totals-slide {
    100% { top: 50%; }
}