html, body {
			position: absolute;
			height: 100%;
			width: 100%;
			overflow: hidden;
			margin:0;
		}
		
		.gamearea {
			display: block;
			width: 98%;
	        height: 98%;
	        overflow: hidden;
		}

		.center {
			position:absolute; /*it can be fixed too*/
	        left:0; right:0;
	        top:0; bottom:0;
	        margin:auto;
	        overflow:auto;
	        text-align: center;
		}

		/* Material style */
		button {
			position: relative;
			border: none;
			cursor: pointer;
			color: white;
			padding: 7px;
			font-size: 22px;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
			position: relative;
			overflow: hidden;
		}

		button span {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: -webkit-xxx-large;
			color: black;
			opacity: 0.45;
			font-weight: 900;
		}

		button:after {
		  content: '';
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  width: 5px;
		  height: 5px;
		  background: rgba(255, 255, 255, .5);
		  opacity: 0;
		  border-radius: 100%;
		  transform: scale(1, 1) translate(-50%);
		  transform-origin: 50% 50%;
		}

		@keyframes ripple {
		  0% {
		    transform: scale(0, 0);
		    opacity: 1;
		  }
		  20% {
		    transform: scale(25, 25);
		    opacity: 1;
		  }
		  100% {
		    opacity: 0;
		    transform: scale(40, 40);
		  }
		}

		button:focus:not(:active)::after {
		  animation: ripple 0.5s ease-out;
		}

		#game-configuration {
			position: absolute;width:100%;height:100%;background-color:#ffffffb0;
		}

		.inlineblock {
			display: inline-block;
		}

		.gameModeOption input {
			position:absolute;
    		z-index:2;
		}

		.gameModeOption input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
		.gameModeOption input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
		    -webkit-filter: none;
		       -moz-filter: none;
		            filter: none;
		}
		.drinkcard-cc{
			width: 45%;height:300px;


		    cursor:pointer;
		    background-size:contain;
		    background-repeat:no-repeat;
		    display:inline-block;
		    -webkit-transition: all 100ms ease-in;
		       -moz-transition: all 100ms ease-in;
		            transition: all 100ms ease-in;
		    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
		       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
		            filter: brightness(1.8) grayscale(1) opacity(.7);
		}
		.drinkcard-cc:hover{
		    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
		       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
		            filter: brightness(1.2) grayscale(.5) opacity(.9);
		}

		.areabtn{
			width:5vw;height:5vw;margin-left:8px;color:black;
		}

		.areaBtnText {
			font-size:2vw;margin:0 20px 0 20px;bottom:-6px;position:relative;
		}

@media only screen and (max-width:480px) { 
  	.areabtn { width:8vw;height:10vw;margin:0}
  	.areaBtnText { font-size: 3.25vw; margin-bottom:1.5em;top:0 }
}