html {
    height: 100%;
}

body {
    font-family: "Fredoka One", sans-serif;
    background: #0a1015 url(/fun/fun_bg.svg) no-repeat;
    height: 100%;
}


table.scoreboard {
  width: 100%;
}

table.scoreboard td {
  font-weight: 100;
  font-size: 175%;
  color: #fff;
  text-shadow: 4px 4px #000;
  padding: .3rem 1rem;
}

table.scoreboard td.td1 {
  width: 20%;
  text-align: center;
}

table.scoreboard tr:nth-child(even) {
  background: #444;
}

.gray_gradient {
  background: rgb(153, 153, 153);
  background: radial-gradient(
    circle,
    rgba(153, 153, 153, 1) 0%,
    rgba(204, 204, 204, 1) 35%,
    rgba(170, 170, 170, 1) 43%,
    rgba(153, 153, 153, 1) 76%,
    rgba(221, 221, 221, 1) 100%
  );
}

.bubble {
  margin: 0.25rem;
  overflow: hidden;
}

.bubble div {
    padding: .5rem 1.5rem;
    background: #499;
    color: #fff;
    text-shadow: 2px 2px #000;
    border-radius: 2rem;
    font-size: 18pt;
}

.bubble .bcenter {
    margin-left: 4rem;
}
.bubble .bright {
    margin-left: 8rem;
}

.bubble h5 {
  color: #f00;
  font-size: 12pt;
  margin: .5rem 1.5rem 2rem 1.5rem;
  text-align: right;
}

.joined {
  text-align: center; 
  background: #444; 
  border-radius: 1.5rem; 
  padding: 1rem; 
  color: #f8de57; 
  margin: 1rem 0 2rem 0;
  font-size: 14pt;
}

.score_bubble {
  margin: 1rem 2rem;
  padding: 2rem 0;
  border: solid 5px #66bdba;
  border-radius: 1em;
  background: #000;
}

.score_bubble div {
  text-align: center;
  line-height: 100%;
  color: #f00;
}

.score_bubble h2 {
    font-size: 5rem;
    color: #fff; 
    margin: 0;
}


.showcode {
  margin: 3rem 2rem 3rem 2rem;
  padding: 1rem 0;
  border-radius: 1em;
  background: #66bdba;
  text-shadow: 2px 2px #000;
  text-align: center;
  color: #f00;
  transform: rotate(-5deg);
}

.showcode h2 {
    color: #fff; 
    margin: 0;
    font-size: 6rem;
    text-shadow: 5px 5px #000;
}

.squeeze-enter-active, .squeeze-leave-active {
    transition: all .75s linear;
}
.squeeze-leave-to /* .fade-leave-active below version 2.1.8 */ {
    margin-top: -6rem;
    opacity: 0;
}
.squeeze-enter {
    margin-top: 5rem;
    opacity: 0;
}

.tilt {
  transform: rotate(-5deg);
}