/*
CopyLeft 2020 Michael Rouves

	This file is part of Michael's Clicker.
	Michael's Clicker is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	Michael's Clicker is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	GNU Affero General Public License for more details.

	You should have received a copy of the GNU Affero General Public License
	along with Michael's Clicker. If not, see <https://www.gnu.org/licenses/>.
*/





/* 
			================= BODY =================
*/
body{
	background: rgb(15,232,146);
	background: radial-gradient(circle, rgba(15,232,146,1) 0%, rgba(11,186,131,1) 31%, rgba(8,129,153,1) 100%);
}

/* 
      ================= ALL BUTTONS ANIMATIONS =================
*/

.button, .clicker {
	/*Disable selection and drag*/
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
	/*Revome buttons borders and otlines*/
	outline: none;
	border: none;
	background-color:#FFFFFF;/*white*/
	
	/*Transition Animation between hover/active...*/
	transition: box-shadow 0.3s, background-color 0.3s;
}
.button:hover, .clicker:hover{
	box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(15, 15, 15, 0.15);/*shadow*/
}
.button:active, .clicker:active{
	/*Shadow, color transition*/
	transition: box-shadow 0.15s, background-color 0.1s;
	box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.3), 0 20px 20px 0 rgba(0, 0, 0, 0.15);
	background-color:#F0F0F0;
}

/*
			================= SHOP =================
*/
.button{
	width: 200;height: 50;
	position: absolute;
	left: 87%;
	transform: translate(-50%, -50%);
}
.button:disabled{
	background-color: #B3B3B3;
}

#b1{top:22%}
#b2{top:32%}
#b3{top:42%}


/* 
	  ================= Main Clicker Button =================
*/
.clicker {
	/*Size*/
	border-radius: 50%;
	width:200px;
	height:200px;
	/* Position */
	position: absolute;/*                postulat de départ */
	top: 50%; left: 50%;/*               à 50%/50% du parent référent */
	transform: translate(-50%, -50%);/*  décalage de 50% de sa propre taille */
	/* Animation */
	transition: width 0.3s, height 0.3s;
}
.clicker:hover {
	width:225px;
	height:225px;
}
.clicker:active {
	transition: width 0.05s, height 0.05s;
	width:200px;
	height:200px;
}

/* 
	    ================= Money text Display =================
*/

.money-text {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  margin-left: 20px;
  color: #FFFFFF;
  font-size: 50;
}