Clicky/dev/style.css

/*Credit
    http://www.flaticon.com/free-icon/press-button_1402#term=click&page=1&position=18
http://www.flaticon.com/free-icon/play-arrow_60813#term=right&page=1&position=21
http://www.flaticon.com/free-icon/like_148836#term=heart&page=1&position=1

https://www.freesound.org/people/jcallison/sounds/258269/
https://www.freesound.org/people/shinephoenixstormcrow/sounds/337049/
https://www.freesound.org/people/rhodesmas/sounds/342751/
https://www.freesound.org/people/acclivity/sounds/18923/
https://www.freesound.org/people/soundnimja/sounds/173320/
https://www.freesound.org/people/distillerystudio/sounds/327736/
https://www.freesound.org/people/original_sound/sounds/366103/
*/

body {
    background: rgb(230, 230, 230);
    -webkit-user-select: none;     
    -moz-user-select: none; 
    -ms-user-select: none;

  
    -o-user-select: none;
    user-select: none;
}

/*ROUND BUTTON*/
.round-button {
    /*transition: filter .5s;*/
    /*-webkit-transition: -webkit-filter .5s;*/
	width:85%;   
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    -webkit-transform: translate(-50%,-60%);
}
.round-button-inside {
	width: 100%;
	height:0;
	padding-bottom: 100%;
    border-radius: 50%;
	border:10px solid #cfdcec;
    overflow:hidden;
}
.round-button a {
    display:block;
	float:left;
	width:100%;
	padding-top:50%;
    padding-bottom:50%;
	line-height:1em;
	margin-top:-0.5em;
    
	text-align:center;
	color:#e2eaf3;
    font-family:Verdana;
    font-size:5em;
    font-weight:bold;
    text-decoration:none;
}

/*Blue*/
.blue .round-button-inside{
    background: #4679BD; 
    box-shadow: 0 0 3px gray;
}
.blue .round-button-inside:hover {
    background: #4073B7; 
}
/*Red*/
.red .round-button-inside{
    background: #c34141; 
    box-shadow: 0 0 3px gray;
}
.red .round-button-inside:hover {
    background: #be3b3b; 
}
/*Green*/
.green .round-button-inside{
    background: #46bd5a; 
    box-shadow: 0 0 3px gray;
}
.green .round-button-inside:hover {
    background: #40b754; 
}


/*TRIANGLE BUTTON*/
.triangle-button {
    /*transition: filter .5s;*/
    /*-webkit-transition: -webkit-filter .5s;*/
	width:85%;   
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    -webkit-transform: translate(-50%,-60%);
}
.triangle-button-inside {
	width: 100%;
	height:0;
    background-size:100%;
	padding-bottom: 100%;
    overflow:hidden;
}
.triangle-button a {
    display:block;
	float:left;
	width:100%;
	padding-top:50%;
    padding-bottom:50%;
	line-height:1em;
	margin-top:-0.5em;
    
	text-align:center;
	color:#e2eaf3;
    font-family:Verdana;
    font-size:5em;
    font-weight:bold;
    text-decoration:none;
}
/*Blue*/
.blue .triangle-button-inside{
    background-image: url("img/blueright.png");
}
/*Red*/
.red .triangle-button-inside{
    background-image: url("img/redright.png");
}
/*Green*/
.green .triangle-button-inside{
    background-image: url("img/greenright.png");
}


/*Overlay*/
.overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
    left: 0;
    right: 0;
}
.overlayText {
    text-align: center;
    color: rgb(224, 224, 224);
    font-family: Helvetica;
    font-size: 3em;
}

/*Loser*/
.loser .button {
    filter: blur(10px);
    -webkit-filter: blur(10px);   
}
.loser #loserOverlay{
    display: block;
    opacity: 1;
}
#loserOverlay {
    /*transition: opacity .4s;*/
    /*-webkit-transition: opacity .4s;*/
    background: rgba(0, 0, 0, 0.60);
}
#loserOverlay #loserText {
    position: relative;
    top: 7%;
}
#loserOverlay #loserGoToMenu {
    bottom: 1%;
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
#loserOverlay #loserText #loserScore{
    font-size: .5em;
    margin-top: 10px;
}
#loserOverlay #loserText #loserScore a {
    font-weight: bold;
    font-size: 1.1em;
}
#loserOverlay #highScoreText {
    font-size: .4em;
    color: rgb(200,200,200);
    margin-top: 5px;
}
#loserOverlay{
    display: none;
    opacity: 0;
}
#heartRespawn {
    width: 100px;
    height: 100px;
    background-position-y: -20px;
    margin-top: 20px;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin-bottom: 20px;
    background-image: url(img/heart.png);
    background-size: 100px;
    background-repeat: no-repeat;   
}
#loserOverlay #newScore.highscore{
    font-size: 0.7em;
    margin-top: 20px;
    color: rgba(255, 255, 255, 1);
    border: 1px solid white;
    padding: 10px;
    margin-left: 20px;
    margin-right: 20px;
    background: rgba(200,200,200,.2);
    overflow: hidden;
    position: relative;
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(0, -7em);
    -webkit-transform: rotateZ(60deg) translate(0, -7em);
  }
}

@-webkit-keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(0, -7em);
    -webkit-transform: rotateZ(60deg) translate(0, -7em);
  }
}

#newScore.highscore:after {
  animation: sheen 5s ease .5s infinite forwards;
  -webkit-animation: sheen 5s ease .5s infinite forwards;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15) 35%, transparent);
  transform: rotateZ(60deg) translate(-1em, 7em);
  -webkit-transform: rotateZ(60deg) translate(-1em, 7em);
}

#loserOverlay #newScore.normalScore{
    font-size: 0.5em;
    margin-top: 20px;
    padding: 10px;
    margin-left: 40px;
    margin-right: 40px;
    background: rgba(200,200,200,.1);
    overflow: hidden;
    position: relative;
}

/*Menu*/
.menu .button {
    filter: blur(20px);   
    -webkit-filter: blur(20px);   
}
.menu #menuOverlay{
    display: block;
    opacity: 1;
}
#menuOverlay #menuText {
    position: relative;
    top: 16%;
    text-align: center;
    color: rgb(224, 224, 224);
    font-family: Helvetica;
    font-size: 3em;
}
#menuOverlay{
    background: rgba(0, 0, 0, 0.30);
}
#menuOverlay{
    display: none;
    opacity: 0;
}

/*Settings*/
.settings .button {
    filter: blur(20px);   
    -webkit-filter: blur(20px);   
}
.settings #settingsOverlay{
    display: block;
    opacity: 1;
}
#settingsOverlay #settingsText {
    position: relative;
    top: 20%;
    text-align: center;
    color: rgb(224, 224, 224);
    font-family: Helvetica;
    font-size: 3em;
}
#settingsOverlay{
    background: rgba(0, 0, 0, 0.30);
}
#settingsOverlay{
    display: none;
    opacity: 0;
}
#settingsOverlay #settingsGoToMenu {
    bottom: 1%;
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.offButton{
    text-decoration:line-through
}

/*Store*/
.store .button {
    filter: blur(20px);   
    -webkit-filter: blur(20px);   
}
.store #storeOverlay{
    display: block;
    opacity: 1;
}
#storeOverlay .storeButton {
    position: relative;
    top: 55px;
    text-align: center;
    color: rgb(224, 224, 224);
    font-family: Helvetica;
    font-size: 1.7em;
    border: 2px solid white;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 15px !important;
    background: rgba(200,200,200,.1);
    transition: background 0.5s, color 0.5s, border 0.5s;
    -webkit-transition: background 0.5s, color 0.5s, border 0.5s;
}
#storeOverlay .storeButton.owned {
    border: 2px solid #d0d0d0 !important;
    color: rgb(112, 179, 152) !important;
    background: rgba(200,200,200,0.3) !important;
}
#storeOverlay .storeButton.disabled {
    border: 2px solid #d0d0d0 !important;
    color: rgba(200, 200, 200, .7) !important;
    background: rgba(200,200,200,0.3) !important;
}
#storeOverlay .storeButton.owned .title:after {
    content: " (bought)";
    font-size: .8em;
    opacity: .7;
}
#storeOverlay{
    background: rgba(0, 0, 0, 0.30);
}
#storeOverlay{
    display: none;
    opacity: 0;
}
#storeOverlay #storeGoToMenu,  #storeOverlay #storeGoToGame, #storeOverlay #storeGoToLoser {
    bottom: 1%;
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.price {
    font-size: .8em;
}

/*Lives counter*/
#lives{
    top:15px;
    right: 15px;
    position: fixed;
    z-index:1;
}
#livesCounter {
    color: rgb(180, 180, 180);
    font-family: Helvetica;
    font-size: 2.5em;
    display: inline-block;
    margin-right: 4px;
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
}
#livesIcon {
    width: 40px;
    height: 40px;
    background-image: url("img/heart.png");
    background-position: 0px;
    background-size: 100%;
    display: inline-block;
}

/*Messages*/
#message {
    color: rgba(88, 88, 88, .0);
    font-family: Helvetica;
    font-size: 1.5em;
    position: fixed;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transition: top 0.5s, color 0.5s;
    -webkit-transition: top 0.5s, color 0.5s;
    text-align: center;
    z-index:-1;
}

/*Credits*/
.credits #creditsOverlay{
    display: block;
    opacity: 1;
     background: rgba(0, 0, 0, 0.30);
}
#creditsOverlay{
    display: none;
}
#creditsOverlay #creditsText {
     color: rgb(255,255,255);
    font-family: Helvetica;
    font-size: 1em;
    position: fixed;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transition: top 0.5s, color 0.5s;
    -webkit-transition: top 0.5s, color 0.5s;
    text-align: center;
    width: 90%;
    border: 2px solid whitesmoke;
}
#creditsOverlay #creditsText div{
    margin: 10px;
}
#creditsOverlay #creditsText a{
    color: aqua;
}
.credits .button {
    filter: blur(10px);
    -webkit-filter: blur(10px);   
}


/*Splash screen*/
.splash #splashScreen {
    display: block;
    opacity: 1;
    background: rgb(230,230,230);
}
#splashScreen{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
    left: 0;
    right: 0;
    z-index:5;
}
#splashScreen img {
    top: 50%;
    width: 90%;
    position: fixed;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    left: 50%;
}