html{
width: 100%;
height: 100%;
background: linear-gradient(45deg,rgb(83 75 75 / 91%),rgb(96 99 107),rgba(0, 100, 150, 0.5),rgb(96 99 107));
position: relative;
top: 20%;
}
body{
width: 100%;
height: 100%;
border: 15px solid rgba(49, 44, 44, 0.8);
border-radius: 5px;
background: linear-gradient(45deg,rgb(3 18 52),rgb(30 72 116 / 74%),rgb(47 79 129),rgb(8 28 73));
box-shadow: 0px 0px 100px 0px black;
position: relative;
}
#balance {
width: 100%;
height: 100%;
border-right: 10px solid #242528f5;
background-color: black;
box-shadow: 0px 5px 100px 0px inset #0c0b0b;
z-index: 1;
transform: scaleX(0.9);
z-index: 0;
position: absolute;
left: -3%;
}
#connect{
width: 48%;
height: 100%;
background-color: white;
position: absolute;
top: 0%;
left: 52%;
float: right;
box-shadow: 0px 5px 100px 0px inset #0c0b0b;
z-index: 1;
}
.Z1, .Z2, .Z3, .R4 {
width: 18%;
height: 20px;
border-right: 1px solid #6e80a8f5;
background-color: white;
box-shadow: 0px 2px 10px 0px inset #0c0b0b;
position: absolute;
left: 22%;
font-size: 12px;
border-radius: 5px;
top: 31%;
z-index: 1;
font-weight: bold;
}
.Z2{
top:40.8%;
}
.Z3{
top:51%;
}
.R4{
top: 66%;
}
.range{
width: 23px;
position: absolute;
top: 74.8%;
left: 41%;
color: white;
border-right: 2px solid rgba(255, 255, 255, .5);
border-bottom: 2px solid rgba(255, 255, 255, .5);
border-radius: 10px;
background: rgba(49, 44, 44,0.8);
padding-right: 12px;
padding-top: 5px ;
padding-left: 5px ;
}
@media only screen and (min-width: 400px){
span {
width: 14px;
}
}
.range1{
top: 30%;
}
.range2{
top: 40.8%;
}
.range3{
top: 51%;
}
.range4{
top: 68%;
}
.led{
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 77%;
left: 28.7%;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-radius: 50%;
box-shadow: 0px 0px 10px 0px inset rgba(0, 0, 0, 1),0px 0px 3px 0px rgba(255, 255, 255, 1);
}
.red-light{
background: radial-gradient(white,#ff0707,#ff0707);
box-shadow: 0px 0px 15px 0px red;
animation: flash 0.5s ease-in-out infinite forwards;
}
button{
width: 7%;
height: 5%;
padding: 5px 10px;
color: #ffdfdf;
position: absolute;
left: 30%;
top: 89%;
font-weight: 500;
letter-spacing: 2px;
background: linear-gradient(40deg,#706868,#4a4141,rgb(22 22 25),#1d1a1a);
}
button:active{
background: radial-gradient(white,cornflowerblue);
}
.display{
width:11%;
height: 5%;
text-shadow: 0px 2px 5px #100f0f;
box-shadow: 0px 10px 10px 0px inset rgba(0, 0, 0,0.7);
position: absolute;
left: 21%;
color: #bbb;
font-size: 18px;
text-align: center;
border-radius: 5px;
top: 16%;
background: linear-gradient(to top,#1e1d1d,#867d7d);
margin-left: 10px;
}
.display1{
width: 9%;
height: 5%;
left: 21.5%;
top: 60%;
}
.alert{
width: 5%;
height: 5%;
color: #dd2f2f;
position: absolute;
left: 24%;
top: 51%;
}
.main {
width: 700px;
height: 700px;
float: right;
border: none;
position: absolute;
left: 52%;
top: 9%;
transform: scale(1.25,1.3);
}
.adjust{
width: 3%;
height: 5%;
color: white;
top: 18.5%;
background: linear-gradient(45deg, black, #403939);
position: absolute;
left: 32%;
border-radius: 3px;
border: 2px solid #777;
font-weight: bold;
}
select option{
background-color: #55504b;
}
.imp{
width: 2%;
height: 3.5%;
background: linear-gradient(45deg, black, #403939);
color: white;
position: absolute;
text-align: center;
border: 2px solid #777;
}
.imp1{
top: 27%;
left:32%;
}
.imp2{
top: 37%;
left: 32%;
}
.imp3{
top: 47%;
left: 32%;
}
.arr li{
font-size: 20px;
color: cornflowerblue;
transform: scale(2.3);
position: absolute;
top: 49%;
left: 4%;
}
.current{
width: 2%;
height: 2%;
position: absolute;
top:24%;
color: white;
left: 17%;
}
.arr .arr1 {
top: 37%;
left: 0.9%;
transform: rotate(-90deg) scale(2.5);
animation: indicate 1.3s cubic-bezier(0.4, 0, 1, 1) forwards infinite;
}
.arr .arr2{
top: 22.5%;
left: 6%;
transform: rotate(-40deg) scale(2.5);
animation: indicate1 1.3s cubic-bezier(0.4, 0, 1, 1) forwards infinite;
}
.arr .arr3{
top: 29%;
left: 5.2%;
transform: rotate(40deg) scale(2.5);
animation: indicate2 1.3s cubic-bezier(0.4, 0, 1, 1) forwards infinite;
}
.arr .arr4{
top: 20%;
left: 10.9%;
transform: rotate(-90deg) scale(2.5);
animation: indicate3 1.3s cubic-bezier(0.4, 0, 1, 1) forwards infinite;
}
.arr .arr5{
top: 36%;
left: 10.9%;
transform: rotate(-90deg) scale(2.5);
animation: indicate4 1.3s cubic-bezier(0.4, 0, 1, 1) forwards infinite;
}
.arr .arr6{
top: 36%;
left: 20.5%;
transform: rotate(90deg) scale(2.5);
animation: indicate5 1.3s cubic-bezier(0.4, 0, 1, 1) forwards infinite;
}
.arr .arr7{
top: 23.8%;
left: 16.9%;
transform: rotate(45deg) scale(2.5);
animation: indicate6 1.3s cubic-bezier(0.4, 0, 1, 1) forwards infinite;
}
.arr .arr8{
top: 51.8%;
left: 18.8%;
transform: rotate(180deg) scale(2.5);
animation: indicate7 1.3s cubic-bezier(0.4, 0, 1, 1) forwards infinite;
}
.arr .arr9{
top: 52.4%;
left: 6.5%;
transform: rotate(180deg) scale(2.5);
animation: indicate8 1.3s cubic-bezier(0.4, 0, 1, 1) forwards infinite;
}
.arr .arr10{
top: 31%;
left: 16.9%;
transform: rotate(-58deg) scale(2.5);
animation: indicate9 1.3s cubic-bezier(0.4, 0, 1, 1) forwards infinite;
}
@keyframes indicate {
50% {
transform: translateY(1.5vh) rotate(-90deg) scale(2.6);
}
}
@keyframes indicate1 {
50% {
transform: translate(-1vh) rotate(-40deg) scale(2.6);
}
}
@keyframes indicate2 {
50% {
transform: translate(1vh) rotate(40deg) scale(2.6);
}
}
@keyframes indicate3 {
50% {
transform: translateY(1vh) rotate(-90deg) scale(2.6);
}
}
@keyframes indicate4 {
50% {
transform: translateY(1vh) rotate(-90deg) scale(2.6);
}
}
@keyframes indicate5 {
50% {
transform: translateY(1vh) rotate(90deg) scale(2.6);
}
}
@keyframes indicate6 {
50% {
transform: translate(1vh,1vh) rotate(45deg) scale(2.6);
}
}
@keyframes indicate7 {
50% {
transform: translateX(1vh) rotate(180deg) scale(2.6);
}
}
@keyframes indicate8 {
50% {
transform: translateX(1vh) rotate(180deg) scale(2.6);
}
}
@keyframes indicate9 {
50% {
transform: translateY(-1vh) rotate(-58deg) scale(2.6);
}
}
@keyframes flash {
50% {
background: none;
}
}