@font-face{
    font-family : "xmas";
    src : url('./fonts/english_essay.ttf') format('truetype');
          /*url('./fonts/learningcurvedashed_ot.otf') format('otf');*/
    font-weight: 100;
}

body {
  background: url(../img/fond.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  color: #fff;
  letter-spacing: 3px;
  overflow: hidden;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2;
}

.start, .end {
  font-family: Arial;
  width: 250px;
  height: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -140px 0 0 -125px;
  text-align: center;
  font-size: 22px;
}

.start {
  display: block;
}

.start img, .end img {
  position: absolute;
  display: block;
  -webkit-transform: scale(0.6);
  -webkit-animation: pulseImg 2s infinite; 
}

.start span {
  display: block;
  width: 120px;
  height: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 8px 0 3px 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -22px 0 0 -60px;
}

.start span.ready {
  cursor: pointer;
  font-size: 30px;
  padding: 8px 0;
  margin: -25px 0 0 -60px;
  -webkit-animation: pulseSpan 1s infinite; 
}

.start span:hover {
  padding: 4px 0;
  margin: -20px 0 0 -60px;
}

.end {
  display: none;
  text-align: center;
  font-size: 11px;
}

.end .endScore, .end .endMessage, .end a {
  display: block;
  width: 130px;
  padding: 0 0 5px 0;
  border-bottom: 1px dotted #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -65px;
}

.end .endMessage {
  margin: -5px 0 0 -65px;
  padding: 0;
  border: none;
}

.end a {
  margin: 20px 0 0 -65px;
  border: none;
  color: #fff;
  text-decoration: none;
}

.end a:hover {
  text-decoration: underline;
}

.score {
  width: 70px;
  height: 70px;
  position: absolute;
  right: 20px;
  top: 20px;
  text-align: center;
  line-height: 70px;
  font-size: 14px;
  display: none;
}

.score img {
  display: block;
  position: absolute;
  top: 0;
  -webkit-animation: pulseImgScore 1s infinite; 
}

.score span {
  display: block;
  margin: 6px 0 0 0
}

.instructions, .beready {
  position: absolute;
  width: 650px;
  height: 70px;
  top: 95%;
  left: 50%;
  margin: 50px 0 0 -325px;
  opacity: 0;
  -webkit-transition: all 0.5s linear;
}

.instructions.show, .beready.show {
  opacity: 1;
}

audio {
  display: none;
}

.scene {
  position: absolute;
  width: 515px;
  height: 432px;
  top: 50%;
  left: 50%;
  margin: -216px 0 0 -258px;
}

.organ {
  position: absolute;
  width: 515px;
  height: 432px;
  top: 50%;
  left: 50%;
  margin: -216px 0 0 -257px;
  background: url(../img/organ.png)
}

.character {
  position: absolute;
  top:112px;
  left: -355px;
}

.sscharacter {
  /*display: none;*/
  position: absolute;
  width: 234px;
  height: 293px;
  /*-webkit-transition: opacity 0.3s linear;*/
}

.sscharacter.walk {
  left: -350px;
  top: 140px;
  display: none;
}

.sscharacter.sit {
  width: 252px;
  height: 508px;
  left: 130px;
  top: 163px;
  opacity: 0;
  background: url(../img/character/sit/character_notes.png) 2px 2px;
}

.sscharacter.stand {
  width: 508px;
  height: 508px;
  left: 30px;
  top: 143px;
  opacity: 0;
  background: url(../img/character/stand/character_stand.png) 2px 2px;
}

.key {
  display: block;
  position: absolute;
  width: 75px;
  height: 75px;
  top: 106%;
  left: 50%;
  margin: 0 0 0 -40px;
}

.key img {
  position: absolute;
  display: block;
  width: 100%;
  top: 0;
  left: 0
}

.key img:nth-child(2) {
  display: none;
}

.key.appear {
  -webkit-animation: keyappearing 1s; 
  -webkit-transform-origin:50% 100%;
}

.key.appear2 {
  -webkit-animation: keyappearing 0.5s; 
  -webkit-transform-origin:50% 100%;
}

.key.disappear {
  opacity: 0;
  -webkit-animation: keydisappearing 1s; 
  -webkit-transform-origin:50% 100%;
}

.success {
  -webkit-animation: keysuccess 1s !important; 
  -webkit-transform-origin:50% 50%;
}

.key.error {
  -webkit-animation: keydisappearing 0.5s; 
  -webkit-transform-origin:50% 100%;
}

@-webkit-keyframes pulseImg {
  0% { -webkit-transform: scale(0.6) }
  50% { -webkit-transform: scale(0.8) }
  0% { -webkit-transform: scale(0.6) }
}

@-webkit-keyframes pulseImgScore {
  0% { -webkit-transform: scale(1) }
  50% { -webkit-transform: scale(0.8) }
  0% { -webkit-transform: scale(1) }
}

@-webkit-keyframes pulseSpan {
  0% { margin: -25px 0 0 -60px; padding: 8px 0;}
  50% { margin: -20px 0 0 -60px; padding: 4px 0;}
  0% { margin: -25px 0 0 -60px; padding: 8px 0;}
}

@-webkit-keyframes keyappearing {
  from { opacity: 0.4; margin: 0 0 0 -250px }
  to { opacity: 1;  margin: 0 0 0 -40px }
}

@-webkit-keyframes keydisappearing {
  from { -webkit-transform: rotateX(0deg); opacity: 1; }
  to { -webkit-transform: rotateX(130deg); opacity: 0; display: none; }
}

@-webkit-keyframes keysuccess {
  from { -webkit-transform: scale(1) }
  to { -webkit-transform: scale(1.5); opacity: 0 }
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}