
#hidden {
    display: none;
}

.spin {
  animation: spin 15s 1s forwards cubic-bezier(.56,-0.35,.22,1.5) infinite;
}

@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }
  
  96% {
    transform: rotateZ(0deg);
  }
  
  97% {
    transform: rotateZ(-1deg);
    animation-timing-function: ease;
  }
  98% {
    transform: rotateZ(0deg);
    animation-timing-function: ease;
  }
  99% {
    transform: rotateZ(1deg);
    animation-timing-function: ease;
  }
  100% {
    transform: rotateZ(0deg);
    animation-timing-function: ease;
  }
}


#napit {
    position: absolute;
    overflow: hidden;
    min-width: 600px;
    top: 502px;
    margin: 0px;
    padding: 0px;
}
.aloitabtn {
    background-color: Transparent;
    color:   white;
    padding: 12px 20px 12px 20px;
    margin: auto;
    border:  none;
    cursor:  pointer;
    width:   100px;
    height:  6%;
}

.mybtn {
    background-color: Transparent;
    outline: none;
    border:  none;
    cursor:  pointer;
    max-width: 210px;
    min-width: 210px;
    height:  60px;
}

#alkuun {
    background-color: transparent;
    background-repeat:no-repeat;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    border: none;
    max-width: 210px;
    min-width: 210px;
    height:  60px;
    margin-left: 295px;
    margin-top: 0px;
    padding: 0px
}

#jatka {
    background-color: transparent;
    background-repeat:no-repeat;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    border: none;
    max-width: 210px;
    min-width: 210px;
    height:  60px;
    margin-left: 195px;
    margin-top: 0px;
    padding: 0px
}

#aloita {
    background-color: transparent;
    background-repeat: no-repeat;
    cursor: pointer;
    overflow: hidden;
    outline:none;
    border: none;
    max-width: 210px;
    min-width: 210px;
    height:  60px;
    margin-left: 100px;
    margin-top: 0px;
}

#btnNo {
    margin-left:  15px;
    margin-right: 0px;
}
#btnYes {
    margin-left:  82px;
    margin-right:  0px;
}

#main {
    position: absolute;
    top: 20px;
    margin: auto;
    width: auto;
    max-width: 600px;
    border: none;
    padding: 0px;
}

body {
    background-color: #004860;
    width: 100%;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
}

#kysymys {
    position: absolute;
    overflow: hidden;
    width: 90vw;
    max-width: 540px;
    top: 180px;
    padding: 10px;
    margin: 0px;
    margin-left: 20px;
    vertical-align: middle;
    text-align: center;
    font-family: Arial, Helvetica;
    font-size: 3.0em;
    color: white;
    animation: rubberBand 1s ease-out;
}

.err {
    position: absolute;
    background-color: #004860;
    width: 100%;
    min-width: 600px;
    min-height: 610px;
    top: 0px;
    padding: 4px;
    margin: 0px;
    vertical-align: middle;
    text-align: center;
    font-family: Arial, Helvetica;
    font-size: 2.0em;
    color: white;
    z-index: 100;
}


@keyframes floatText {
  from {
    left: 00%;
  }

  to {
    /* left: auto; */
    left: 100%;
  }
}


  
@keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.05, 0.9, 1);
  transform: scale3d(1.05, 0.9, 1);
  }
  40% {
  -webkit-transform: scale3d(0.9, 1.1, 1);
  transform: scale3d(0.9, 1.05, 1);
  }
  50% {
  -webkit-transform: scale3d(1.05, 0.95, 1);
  transform: scale3d(1.05, 0.95, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.025, .975, 1);
  transform: scale3d(1.025, .975, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 
