/* ========= INFORMATION ============================
	- document:  WP Coder!
	- author:    Dmytro Lobov 
	- url:       https://wow-estore.com/
==================================================== */
body{
background:url(https://myclickspeed.com/wp-content/uploads/2021/11/White-Background-scaled.jpeg) 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;
}
.col-12{
text-align:center;
}
#default{
padding-top:30px;
}
#ts1,#ts2,#ts3,#ts4{
font-size:26px;
}
#header{
color:#fff;
text-align:center;
margin-top:20px;
}
#header h1{
font-size:70px;
letter-spacing:4px;
margin-block-end:0;
font-weight:900;
color:#f43668;
text-shadow:0 0 5px #fff;
}
.game-sub-heading{
font-size:20px;
letter-spacing:3px;
color:#f43668;
margin-bottom:0;
text-shadow:0 0 5px #fff;
}
.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(.3,.3)}40%{transform:scale(1,1)}80%{transform:scale(.3,.3)}100%{transform:scale(0,0)}}
@-webkit-keyframes targets{
0%{-webkit-transform:scale(.3,.3)}
40%{-webkit-transform:scale(1,1)}
80%{-webkit-transform:scale(.3,.3)}
100%{-webkit-transform:scale(0,0)}
}
#myWorkPlace{
width:80%;
height:700px;
display:none;
}
.setting{
background-color:#1d88cf;
border-radius:32px;
margin:5px;
padding:20px 30px;
display:inline-block;
overflow:hidden;
width:31.2%;
text-align:center;
color:#fff;
}
.resultbox{
background-color:#1d88cf;
border-radius:32px;
margin:5px;
display:inline-block;
overflow:hidden;
height:235px;
padding:15px 27px;
width:31.2%;
color:#fff;
}
.big{
font-size:55px;
width:80%;
margin:auto;
text-align:center;
}
.text-r{
margin-left:5px;
font-size:20px;
font-weight:900;
}
.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:#fff;
}
.content-sec{
width:80%;
margin:auto;
padding:10px;
border-radius:10px;
text-align:left;
background-color:#333;
}
.setting-t{
font-weight:900;
font-size:30px;
text-align:center;
font-family:source code pro;
color:#fff;
}
.setting hr{
background-color:#fff;
height:1px;
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:1.2rem!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:#ff0;
}
.colour2{
background-color:#fff;
}
.colour3{
background-color:pink;
}
.colour4{
background-color:blue;
}
.colour5{
background-color:green;
}
input:checked+label.colour{
border:2px solid #fff;
border-radius:14px;
padding:5px;
}
input:checked+label.cursor{
color:#fff;
}
.cursor{
color:#b3b1b1;
}
.clck{
font-size:26px;
}
.tame{
font-size:26px;
}
.again{
background-color:#f43668;
border-radius:15px;
padding:10px 20px;
border:none;
font-size:50px;
color:#fff;
margin-top:20px;
cursor:pointer;
margin-right:10px;
color:#fff!important;
font-family:source code pro;
}
.setingss{
background-color:#7a7a7a;
border-radius:15px;
padding:10px 20px;
border:none;
font-size:50px;
color:#fff;
margin-top:20px;
cursor:pointer;
color:#fff!important;
font-family:source code pro;
}
#result-card{
display:none;
}
@media only screen and (max-width:1000px){
.setting{
width:100%;
}
.resultbox{
width:100%;
}
.content-sec{
width:100%;
}
}
@media only screen and (max-width:800px){
.setting{
width:100%;
}
.resultbox{
width:100%;
}
.content-sec{
width:100%;
}
}
@media only screen and (max-width:798px){
.setting{
width:100%;
}
.setting{
width:100%;
}
.resultbox{
width:100%;
}
.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;
font-weight:900;
}
.again{
display:block;
margin-bottom:10px;
}
.setingss{
display:block;
margin-bottom:10px;
}
.content-sec{
width:95%;
}
.big{
width:100%;
font-size:45px;
}
.again{
font-size:25px;
}
.setingss{
font-size:25px;
}
}
*{
box-sizing:border-box;
}
.btn-start-game{
position:relative;
padding:10px 20px;
border:none;
background:0 0;
cursor:pointer;
font-family:source code pro;
font-weight:900;
text-transform:uppercase;
font-size:50px!important;
color:#fff;
background-color:var(--btn-color);
box-shadow:var(--shadow-color) 2px 2px 22px;
border-radius:15px;
z-index:0;
overflow:hidden;
margin:0 autow;
}
.btn-start-game:focus{
outline-color:transparent;
box-shadow:var(--btn-color) 2px 2px 22px;
}
.btn-start-game::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;
background-color:#ffc501;
}
.toggle-off.btn{
padding-left:24px;
background-color:#ed0303;
color:#fff;
}
.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:#000;
height:10%;
opacity:.6;
font-size:25px;
display:none;
}
.site-h{
width:45%;
float:left;
margin-top:10px;
text-align:left;
margin-left:5%;
color:#fff;
font-family:source code pro;
font-weight:900;
}
.game-h{
width:45%;
float:right;
margin-top:10px;
text-align:right;
margin-right:5%;
color:#fff;
font-family:source code pro;
font-weight:900;
}