@media screen and (min-width: 0px) and (max-width: 480px) {
.logo {
width: 88%!important;
}
.card-inner  {
width: 325px!important;
}
.zcard  {
width: 43px!important;
margin-left: -28px!important;
}
.fix-wrap {
margin-right: 0px!important;
}
.showcard {
width: 115px!important!important;
margin-left: 77px!important;
}
.yourcard {
left: 114px!important;
width: 60px!important;
}
.wiztext {
width: 136px!important;
font-size: 14px!important;
top: 48px!important;
}
.okbutt {
width: 42px!important;
font-size: 12px!important;
margin: -20px 0 0 -27px!important;
}
}
body {
background-image: url("../../back/water/28.jpg");
background-attachment: fixed;
background-size: cover;
}
.float-up {
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1.5s;
-webkit-animation-name:float-up;
-moz-animation-name:float-up;
-o-animation-name:float-up;
animation-name:float-up;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
-o-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-timing-function:ease-out;
-moz-animation-timing-function:ease-out;
-o-animation-timing-function:ease-out;
animation-timing-function:ease-out;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@-webkit-keyframes float-up {
0% {
top:800px;
opacity:100;
}
100% {
top:0px;
opacity:100;
}
}
.card-wrap {
position: relative;
margin: -50px 20px 0 20px;
width: 100%;
height: 100%;
}
.card-inner  {
width: 625px;
text-align: center;
display: table;
margin: auto;
width: 625px;
height: 240px;
z-index: 0;
}
.fix-wrap {
height: 130px;
margin-right: 50px;
position: relative;
}
.zcard {
display: block;
margin: 0 0 0 -20px;
width: 75px;
border-radius: 5px;
cursor: pointer;
}
.zcard:hover {
filter: contrast(99%);
}
.choice {
height: 160px;
vertical-align: top;
text-align: center;
}
.okbutt {
width: 73px;
background-color: #0767ff;
color: #ffffff;
margin: -20px 0 0 -20px;
padding: 1px;
border-radius: 0 10px 0 0;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
cursor: pointer;
}
.okbutt:hover {
color: #ffffff;
}
.showcard {
position: absolute;
width: 135px;
margin-left: 225px;
text-align: center;
}
.wizwrap {
width: 106px;
height: 204px;
margin: auto;
}
.wizard, .smoke, .bart {
width: 115px;
margin-left: -17px;
}
.smoke {
position: relative;
top: -191px;
}
.bart {
position: relative;
top: 32px;
}
.wiztext {
background-color: #ffffff;
font-size: 16px;
font-family: "Akaya Kanadaka", system-ui;
font-weight: 400;
font-style: normal;
color: #000000;
display: table;
position: relative;
left: 83px;
top: 44px;
width: 156px;
height: 55px;
padding: 5px 0 0 7px;
border-radius: 5px;
z-index: -1;
}
.yourcard {
position: relative;
left: 132px;
bottom: 125px;
width: 75px;
border-radius: 5px;
}
.game-btn {
background-color: #01385a;
color: #ffffff;
padding: 1px 12px;
border: 1px solid #000000;
}