/* Styles from CSS3D framework*/

*{margin:0}
#viewport{width:100vw;height:100vh;overflow:hidden;border:1px solid;position:relative;perspective:500px}
#viewport *{transform-style:preserve-3d;box-sizing:border-box}
#camera{width:0;height:0;position:absolute;top:50%;left:50%}

/* Transitions (editable) */
#scene,.plane,.sprite,.group{transition:.5s linear}

/* shapes (optional) */
.triangle-bottom{clip-path:polygon(0 0,100% 0,50% 100%)}
.circle{border-radius:50%}
.face{font-size:15vmin;text-align:center}

/*Adding emojis*/
@font-face { font-family: emoji; src: url(//xem.github.io/unicode13/Twemoji.ttf) }

/* Animations*/
@keyframes flicker {
  from {color: dimgrey;}
  to {color: white;}
}

@keyframes flickerdark {
  from {color: darkgrey;}
  to {color: teal;}
}

/* Other styles*/
#viewport{background: linear-gradient(midnightblue, purple);
  font-family: emoji, calibri, sans-serif;
}

.titlescreen{color: ivory;text-align:center}
.face{font-size:15vmin;text-align:center}
.planet{font-size:40vmin;text-align:center}
.glasses{font-size:25vmin;text-align:center}
#title{font-size:8vw;margin-top: 5vh;}
#start{font-size:4vw; text-align:center; position:absolute; width:100vw; top:60vh; cursor:pointer; animation-name:flicker; animation-duration:2s;
  animation-iteration-count: infinite;}
#instructions{color:ivory; font-size:5vw; text-align:center; width:100vw; position:absolute; top:3vh; left:2vw;}
#controls{position:absolute; width:100%; bottom:5vh;}
#button_holder{display:flex; align-items:center; justify-content:center;}
.btn{font-family: emoji, calibri, sans-serif; background: blanchedalmond; font-size:7vw; margin:3vw; cursor:pointer; text-align:center; visibility: hidden;}
#gameoverscreen{background:white; background: rgba(255,255,255,.75); width: 70vw; margin:auto; padding:5vmin; visibility:hidden;}
.ending{font-family: calibri, sans-serif; color:black; text-align:center; margin-bottom:2vmin;}
#gameovertitle{font-size:8vmin; color:saddlebrown;}
#score{font-size:7vmin;}
#highscore{font-size:7vmin;}
#btnPlayAgain{font-size:7vmin; cursor:pointer; animation-name:flickerdark; animation-duration:2s;
  animation-iteration-count: infinite;}
#subscribermessage{font-size:5vmin;}
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#points{font-family: calibri, sans-serif; color: lime; text-align: center; margin-top:40vmin; font-size: 15vmin; visibility:hidden};