/*
font-family: 'Comfortaa', cursive;
font-family: 'Lora', serif;
*/

body
{
    background-color: #2bbad3;
}

#title
{
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -200px;
}

#game
{
    display: none;
}

#setup
{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -225px;
}

#help
{
    display: none;
}

#actualGame
{
    display: none;
}

#guessing
{
    margin-top: 170px;
}

#gameOver
{
    display: none;
    margin-top: 70px;
}

#guessErr
{
    display: none;
}

#lowest
{
    font-family: 'Lora', serif;
    font-size: 16px;
    text-align: left;
    margin: 20px;
    margin-right: 25%;
}

#highest
{
    font-family: 'Lora', serif;
    font-size: 16px;
    text-align: right;
    margin: 20px;
    margin-left: 25%;
}

#level
{
    font-family: 'Lora', serif;
    font-size: 16px;
    text-align: center;
}

#settings
{
    display: none;
}

#settingsToTitle
{
    margin-top: 70px;
}

#pickEasy
{
    background: hsl(215,50%,65%);
}

#useText
{
    background: hsl(215,50%,65%);
}

#speechErr
{
    display: none;
}

#guessErr-speech
{
    display:none;
}

#speechGuessing
{
    display: none;
}

div
{
    text-align: center;
}

h1 
{
    text-align: center;
    font-family: 'Comfortaa', cursive;
    margin: 15px 0;
    margin-bottom: 25px;
}

h2
{
    text-align: center;
    font-family: 'Comfortaa', cursive;
    margin: 15px 0;
    margin-top: 50px;
}

h3
{
    font-family: 'Lora', serif;
    font-size: 16px;
    margin-bottom: 20px;
}

p
{
    font-family: 'Lora', serif;
    font-size: 14px;
    margin: 30px 20px;
}

input
{
    border-radius: 10px;
    width: 50%;
    margin: 10px auto;
    padding: 10px;
    font-family: 'Lora', serif;
    font-variant: bold;
    font-size: 16px;
}

label
{
    font-family: 'Lora', serif;
    font-size: 12px;
}

.btn
{
    font-family: 'Lora', serif;
    border-radius: 10px;
    width: 50%;
    margin: 10px;
    padding: 10px;
    font-size: 16px;
    border: solid black;
    color: black;
}

/*
Balloon animation
*/
.balloon {
  display:inline-block;
   width:120px;
  height:145px;
  background:hsl(316, 96%, 45%);
  border-radius:80%;
  position:relative;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  margin:20px 30px;
  transition:transform 0.5s ease;
  z-index:10;
  animation:balloons 4s ease-in-out infinite;
  transform-origin:bottom center;
}

@keyframes balloons {
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-25px) rotate(4deg); }
}


.balloon:before {
  content:"▲";
  font-size:20px;
  color:hsl(316, 96%, 45%);
  display:block;
  text-align:center;
  width:100%;
  position:absolute;
  bottom:-12px;
  z-index:-100;
}

.balloonString {
 display:inline-block; top:153px;
  position:absolute;
  height:120px;
  width:1px;
  margin:0 auto;
  content:"";
  background:rgba(0,0,0,0.2); 
  z-index: -200;
}

.balloon{ 
    background:hsl(316, 96%, 45%); 
    animation-duration:3.5s; 
}

.balloon:before { 
    color:hsl(316, 96%, 45%); 
}