html,body {
width:100%;
height:100%;
margin:0;
background:#000;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center
}
body {
background:#000;
text-align:center;
-webkit-text-size-adjus:100% !important;
}
body::before {
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
p{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;margin:0;padding:0}
a img {
border:0;
}
ul{
list-style: none;
}
.l {
position: relative;
left:-123px;
z-index: 101
}
.r {
position: relative;
right:-123px;
z-index: 101
}
.topnav {
margin: 0 auto;
width: 328px;
height: 42px;
position:absolute;top:4px;right:0;z-index:1001
}
.topnav li {
height: 42px;
text-align: center;
line-height: 42px;
float: left;
cursor: pointer;
}
.topnav .a{
width: 52px;
}
.topnav .b{
width: 76px;
}
.topnav .c{
width: 35px;
}
.topnav .d{
width: 44px;
}
.topnav .e{
width: 101px;
}
.topnav li a{
color:#fff;
font-weight: bold;
}
.topnav li:hover {
color: red;
font-weight: bold;
}
.topnav ul {
position: relative;
}
.logo_left {
position: absolute;
top: 20px;
left: 30px;
padding: 10px;
font-size: 24px;
font-weight: bold;
color: #fff;
z-index: 101
}
.logo_right {
position: absolute;
top: 20px;
right: 21px;
padding: 10px;
font-size: 24px;
font-weight: bold;
color: #fff;
z-index: 101
}
.emp {
position:absolute;
top:50%;
left:50%;
margin-top:-90px;
margin-left:-90px;
z-index:1
}
.empty {
transform:rotate(64deg);cursor:pointer
}
css-doodle {
--color:@p(#51eaea,#fffde1,#ff9d76,#fb3569);
--rule:(:doodle {
@grid:30x1 / 18vmin;
--deg:@p(-180deg,180deg);
}
:container {
perspective:30vmin;
}
:after,:before {
content:'';
background:var(--color);
@place-cell:@r(100%) @r(100%);
@size:@r(24px);
@shape:star;
}
@place-cell:center;
@size:100%;
box-shadow:@m(2,(0 0 50px var(--color)));
background:@m(100,(
radial-gradient(var(--color) 50%,transparent 0)
@r(-20%,120%) @r(-20%,100%) / 1px 1px
no-repeat
));
will-change:transform,opacity;
animation:scale-up 12s linear infinite;
animation-delay:calc(-12s / @size() * @i());
@keyframes scale-up {
0%,95.01%,100% {
transform:translateZ(0) rotate(0);
opacity:0;
}
10% {
opacity:1;
}
95% {
transform:translateZ(35vmin) rotateZ(@var(--deg));
}
})}
.button {
border: 1px solid green;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transform: skewX(-10deg);
height: 50px;
width: 200px;
border-radius: 20px 5px 20px 0px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font: 15px sans-serif;
font-weight: 300;
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
-webkit-animation: breath2 2s 0.5s infinite alternate;
animation: breath2 2s 0.5s infinite alternate;
transition: all 0.2s ease;
}
.button:before {
content: "";
display: block;
width: calc(100% - 22px);
height: calc(50px - 8px);
-webkit-animation: breath 2s infinite alternate;
animation: breath 2s infinite alternate;
left: 10px;
top: 3px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: 15px 3px 15px 3px;
z-index:-1;
}
.button a{width:200px;height:50px;line-height:50px;vertical-align:middle;cursor:pointer;}
.button.fire {
border-color: #ffeca8;
background-image: linear-gradient(to bottom, rgba(255, 138, 48, 0.6), rgba(240, 96, 29, 0.6));
box-shadow: 0 0 70px rgba(255, 138, 48, 0.6), 0 5px 20px rgba(255, 138, 48, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #ffeca8;
}
.button.fire:before {
box-shadow: inset 0 0 30px 0 #ffeca8;
}
.button.ice {
font-size:16px;
border-color: #a8ecff;
background-image: linear-gradient(to bottom, rgba(48, 138, 255, 0.5), rgba(29, 96, 240, 0.5));
box-shadow: 0 0 70px rgba(48, 138, 255, 0.5), 0 5px 20px rgba(48, 138, 255, 0.5), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #a8ecff;
}
.button.ice:before {
box-shadow: inset 0 0 30px 0 #a8ecff;
}
.button:hover.fire {
box-shadow: 0 0 70px rgba(255, 138, 48, 0.8), 0 5px 20px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
}
.button:hover.fire:before {
box-shadow: inset 0 0 50px 0 #ffeca8;
}
.button:hover.ice {
box-shadow: 0 0 70px rgba(48, 138, 255, 0.8), 0 5px 20px rgba(48, 138, 255, 0.8), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
}
.button:hover.ice:before {
box-shadow: inset 0 0 50px 0 #a8ecff;
}
.button + .button {
margin-top: 15px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes rotation{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.Rotation{-webkit-transform:rotate(360deg);animation:rotation 8s linear infinite;-moz-animation:rotation 8s linear infinite;-webkit-animation:rotation 8s linear infinite;-o-animation:rotation 8s linear infinite}.Rotation:hover{-webkit-animation-play-state:paused;animation-play-state:paused}@keyframes mylogo{from{top:5px}to{top:-5px}}@-moz-keyframes mylogo{from{top:5px}to{top:-5px}}@-webkit-keyframes mylogo{from{top:5px}to{top:-5px}}@-o-keyframes mylogo{from{top:5px}to{top:-5px}}.imagelogo{float:left;position:relative;width:604px;height:160px;margin-left:12px;padding:0;cursor:pointer;animation:mylogo 2s linear 0s infinite alternate;-moz-animation:mylogo 2s linear 0s infinite alternate;-webkit-animation:mylogo 2s linear 0s infinite alternate;-o-animation:mylogo 2s linear 0s infinite alternate}
.abcd{
padding:0 1px;
font-size:21px;
font-weight:bold;
color:#000;
text-shadow: 0 0 10px #ffff00,
0 0 20px #ffff00,
0 0 30px #ffff00,
0 0 40px #fff700,
0 0 70px #fff700,
0 0 80px #fff700,
0 0 100px #fff700,
0 0 150px #fff700;
animation: light 1.5s ease infinite alternate;
}
.zwz h3 {
margin-bottom: 0;
font-weight: bold;
font-size: 23px;
color: #000;
text-shadow: 0 0 10px #ffff00,
0 0 20px #ffff00,
0 0 30px #ffff00,
0 0 40px #fff700,
0 0 70px #fff700,
0 0 80px #fff700,
0 0 100px #fff700,
0 0 150px #fff700;
}
.zwz h3{
animation: light 1.5s ease infinite alternate;
}