body{
 background: url(bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Montserrat', sans-serif;

}
#header{
color:#fff;
text-align:center;
margin-top:20px;
}
#header h1{
    padding-top: 30px;
    font-size: 79px;
    letter-spacing: 4px;
margin-block-end: 0;
font-weight:900;
}
.game-sub-heading{
    font-size: 20px;
    letter-spacing: 3px;
	}
.shape {
    background: red;
    position: absolute;
    border-radius: 50%;
    animation: targets 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation: targets 3s linear;
    -webkit-animation-fill-mode: forwards
}

.shape:hover {
    background: blue
}

.tTiny {
    width: 1em;
    height: 1em
}

.tSmall {
    width: 2em;
    height: 2em
}

.tMedium {
    width: 3em;
    height: 3em
}

.tLarge {
    width: 4em;
    height: 4em
}

@keyframes targets {
    0% {
        transform: scale(0.3, 0.3)
    }
    40% {
        transform: scale(1, 1)
    }
    80% {
        transform: scale(0.3, 0.3)
    }
    100% {
        transform: scale(0, 0)
    }
}

@-webkit-keyframes targets {
    0% {
        -webkit-transform: scale(0.3, 0.3)
    }
    40% {
        -webkit-transform: scale(1, 1)
    }
    80% {
        -webkit-transform: scale(0.3, 0.3)
    }
    100% {
        -webkit-transform: scale(0, 0)
    }
}
#myWorkPlace{
width:80%;
height:90%;
display:none;
}
.setting{
    background-color: #284152;
    border-radius: 32px;
    margin: 10px;
    padding: 35px 27px 43px;
    display: inline-block;
    overflow: hidden;
    width: 225px;
	
	
}

.resultbox{
    background-color: #284152;
    border-radius: 5px;
    margin: 5px;
    display: inline-block;
    overflow: hidden;
    width: 300px;
	height:200px;
	
}
.big{
	font-size:55px;
	width:80%;
	margin:auto;
}
.text-r{
	margin-left:5px;
	font-size:20px;
}
.single-set{
	width:100%;
	margin-bottom:10px;
	margin-left:10px;
	text-align:left;
}



.dt{
	text-align:left;
	width:80%;
	margin:auto;
	font-size:22px;
}

.centerd{
text-align: center;
    color: white;
}

.content-sec{

width:80%;
margin:auto;
padding:10px;
border-radius:10px;
    text-align: left;
	background-color:#333;
}
.setting-t{
font-weight:900;
font-size:20px;
text-align:center;
padding:10px;
}
.setting hr{
background-color: #517e99;
    height: 1px;
    width: 155px;
    margin-top: 7px;
}
.selectors{
    display: inline-grid;
    font-size: 20px;
    background: #f43668;
    border-radius: 13px;
    padding: 5px;
    vertical-align: middle;
}
.descr{
font-size:18px;
margin-top: .5rem!important;
}
.circle-dot{
background-color:#fff;
border-radius:50%;
float:left;
margin-top:.1rem!important;
}
.size0{
width:10px;
height:10px;
}
.size1{
width:15px;
height:15px;
}
.size2{
width:20px;
height:20px;
}
.size3{
width:25px;
height:25px;
}
input[type="radio"]{
display:none;
}
.colour{
    height: 25px;
    width: 25px;
    border-radius: 14px;
    cursor: pointer;
    margin: 3px 7px;
}
.colour0{
	background-color:red;
}
.colour1{
	background-color:yellow;
}

.colour2{
	background-color:white;
}

.colour3{
	background-color:pink;
}
.colour4{
	background-color:blue;
}

.colour5{
	background-color:green;
}

 input:checked + label.colour {
    border: 2px solid white;
    border-radius: 14px;
    padding: 5px;
}
input:checked + label.cursor{
color:#fff;
}
.cursor{
	color:#b3b1b1;
}
.clck{
	font-size:30px;
	margin-top:10px;
}
.tame{
	font-size:22px;
	margin-top:10px;
}
.again{
	background-color: #f43668;
    border-radius: 24px;
    padding: 5px 10px;
    border: none;
    font-size: 25px;
    color: white;
    margin-top: 20px;
	cursor:pointer;
	margin-right:10px;
	
}
.setingss{
	background-color: #7a7a7a;
    border-radius: 24px;
    padding: 5px 10px;
    border: none;
    font-size: 25px;
    color: white;
    margin-top: 20px;
	cursor:pointer;
	
}



#result-card{
	display:none;
}
/* Play Button Css */

@media only screen and (max-width: 1000px) {
	
	.resultbox{
	width:45%;
}
.content-sec{
		width:85%;
	}
}

@media only screen and (max-width: 800px) {
.resultbox{
	width:80%;
}
.content-sec{
		width:90%;
	}
}

@media only screen and (max-width: 798px) {
	.setting{
		width:90%;
	}
	.resultbox{
		width:90%;
	}
	.wids{
		width:200px;
		margin:auto;
	}
	#header h1{
		font-size:30px;
	}
	.game-sub-heading{
		font-size:18px;
	}
	
}

@media only screen and (max-width: 500px) {
    	.site-h{
		font-size:18px;
	}
	
		.game-h{
		font-size:18px;
	}
	
	.again{
		display:block;
		margin-bottom:10px;
	}
	.setingss{
		display:block;
		margin-bottom:10px;
	}
	.content-sec{
		width:95%;
	}
}

* {
  box-sizing: border-box;
}
:root {
  --text-color: hsla(210, 50%, 85%, 1);
  --shadow-color: hsla(210, 40%, 52%, .4);
  --btn-color: #f43668;
  --bg-color: #141218;
}
button {
  position:relative;
  padding: 10px 20px;  
  border: none;
  background: none;
  cursor: pointer;
  
  font-family: "Source Code Pro";
  font-weight: 900;
  text-transform: uppercase;
  font-size: 30px;  
  color: var(--text-color);
  
  background-color: var(--btn-color);
  box-shadow: var(--shadow-color) 2px 2px 22px;
  border-radius: 15px; 
  z-index: 0;  
  overflow: hidden;   
}

button:focus {
  outline-color: transparent;
  box-shadow: var(--btn-color) 2px 2px 22px;
}



/* bubbles */
button::before {
  content: '';
  pointer-events: none;
  opacity: .6;
  background:
    radial-gradient(circle at 20% 35%,  transparent 0,  transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
    radial-gradient(circle at 75% 44%, transparent 0,  transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
    radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--text-color) 5px, var(--text-color) 6px, transparent 6px);

  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  position: absolute;
  animation: bubbles 5s linear infinite both;
}

@keyframes bubbles {
  from {
    transform: translate();
  }
  to {
    transform: translate(0, -66.666%);
  }
}
.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
.toggle{position:relative;overflow:hidden}
.toggle input[type=checkbox]{display:none}
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
.toggle.off .toggle-group{left:-100%}
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
.toggle.btn{min-width:59px;min-height:34px}
.toggle-on.btn{padding-right:24px}
.toggle-off.btn{padding-left:24px}
.toggle.btn-lg{min-width:79px;min-height:45px}
.toggle-on.btn-lg{padding-right:31px}
.toggle-off.btn-lg{padding-left:31px}
.toggle-handle.btn-lg{width:40px}
.toggle.btn-sm{min-width:50px;min-height:30px}
.toggle-on.btn-sm{padding-right:20px}
.toggle-off.btn-sm{padding-left:20px}
.toggle.btn-xs{min-width:35px;min-height:22px}
.toggle-on.btn-xs{padding-right:12px}
.toggle-off.btn-xs{padding-left:12px}
 .toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px; }
  .toggle.ios .toggle-handle { border-radius: 20px; }
  .btn{color:#fff;}
  
	#gameHeader{
		width:100%;
		background:black;
		height:10%;
		opacity:0.6;
		font-size:25px;
		display: none;		
	}
	
	.site-h{
		width:45%;
		float:left;
		margin-top:10px;
		text-align:left;
		margin-left:5%;
	}
	
	.game-h{
		width:45%;
		float:right;
		margin-top:10px;
		text-align:right;
		margin-right:5%;
	}