css卡西欧计算器

下载代码

html

css

分享到微信朋友圈

html

<div class="calculator" aria-hidden="true">
    <div class="lcd"><p>RUN</p><p>DEG</p><p>1.23456789 E 10</p></div>
  <div class="lcdBorder"></div>
  <div class="onoff"></div>
  <div class="onoffin"></div>
  <div class="onoffinline1"></div>
  <div class="onoffinline2"></div>
  <div class="onoffinline3"></div>
  <div class="onoffinline4"></div>
  <div class="onoffinline5"></div>
  <div class="horizmain"></div>
 
<div class="whitekey1"><p class="w1">F1</p></div>
<div class="whitekey2"><p class="w2">F2</p></div>
<div class="whitekey3"><p class="w3">=</p></div>
<div class="whitekey4"><p class="w4">#</p></div>
<div class="whitekey5"><p class="w5">$</p></div>
<div class="whitekey6"><p class="w6">:</p></div>
<div class="whitekey7"><p class="w7">;</p></div>
<div class="whitekey8"><p class="w8">A</p></div>
<div class="whitekey9"><p class="w9">B</p></div>
<div class="whitekey10"><p class="w10">C</p></div>
<div class="whitekey11"><p class="w11">D</p></div>
<div class="whitekey12"><p class="w12">E</p></div>
<div class="whitekey13"><p class="w13">F</p></div>
<div class="whitekey14"><p class="w14">G</p></div>
<div class="whitekey15"><p class="w15">H</p></div>
<div class="whitekey16"><p class="w16">I</p></div>
<div class="whitekey17"><p class="w17">J</p></div>
<div class="whitekey18"><p class="w18">K</p></div>
<div class="whitekey19"><p class="w19">L</p></div>
<div class="whitekey20"><p class="w20">M</p></div>
<div class="whitekey21"><p class="w21">N</p></div>
<div class="whitekey22"><p class="w22">O</p></div>
<div class="whitekey23"><p class="w23">P</p></div>
<div class="whitekey24"><p class="w24">Q</p></div>
<div class="whitekey25"><p class="w25">R</p></div>
<div class="whitekey26"><p class="w26">S</p></div>
<div class="whitekey27"><p class="w27">T</p></div>
<div class="whitekey28"><p class="w28">U</p></div>
<div class="whitekey29"><p class="w29">V</p></div>
<div class="whitekey30"><p class="w30">W</p></div>
<div class="whitekey31"><p class="w31">X</p></div>
<div class="whitekey32"><p class="w32">Y</p></div>
<div class="whitekey33"><p class="w33">Z</p></div>
<div class="whitekey34"><p class="w34">=</p></div>
<div class="whitekey35"><p class="w35">SPC</p></div>
  <div class="vertline"></div>
  <div class="horzlinewhite1"></div>
  <div class="horzlinewhite2"></div>
  <div class="horzlinewhite3"></div>
  <div class="horzlinewhite4"></div>


<div class="blackkey1"><p class="b1">MODE</p></div>
<div class="blackkey2"><p class="b2">(</p></div>
<div class="blackkey3"><p class="b3">)</p></div>
<div class="blackkey4"><p class="b4">?</p></div>
<div class="blackkey5"><p class="b5">C</p></div>
<div class="blackkey6"><p class="b6">AC</p></div>
<div class="blackkey7"><p class="b7">7</p></div>
<div class="blackkey8"><p class="b8">8</p></div>
<div class="blackkey9"><p class="b9">9</p></div>
<div class="blackkey10"><p class="b10">/</p></div>
<div class="blackkey11"><p class="b11">STAT</p></div>
<div class="blackkey12"><p class="b12">STOP</p></div>
<div class="blackkey13"><p class="b13">4</p></div>
<div class="blackkey14"><p class="b14">5</p></div>
<div class="blackkey15"><p class="b15">6</p></div>
<div class="blackkey16"><p class="b16">*</p></div>
<div class="blackkey17"><p class="b17">ANS</p></div>
<div class="blackkey18"><p class="b18">CONT</p></div>
<div class="blackkey19"><p class="b19">1</p></div>
<div class="blackkey20"><p class="b20">2</p></div>
<div class="blackkey21"><p class="b21">3</p></div>
<div class="blackkey22"><p class="b22">-</p></div>
<div class="blackkey23"><p class="b23">,</p></div>
<div class="blackkey24"><p class="b24">?</p></div>
<div class="blackkey25"><p class="b25">0</p></div>
<div class="blackkey26"><p class="b26">.</p></div>
<div class="blackkey27"><p class="b27">E</p></div>
<div class="blackkey28"><p class="b28">+</p></div>
<div class="blackkey29"><p class="b29">EXE</p></div>
<div class="blackkey30"><p class="b30">?</p></div>
  <div class="vertline"></div>
  <div class="horzlineblack1"></div>
  <div class="horzlineblack2"></div>
  <div class="horzlineblack3"></div>
  <div class="horzlineblack4"></div>

  <div class="out" aria-hidden="true"></div>
            <div class="casio">
                <div class="speaker"></div>
                <H1><span><p class="logo">CASIO</p>
                      <p class="type">PROGRAMMABLE CALCULATOR</p>
                      <p class="model">FX-702P</p>
                </span></H1>
            </div>
  </div>

css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
  background-color: #ff9e80;
}
.calculator {
    display: block;
    width: 995px;
    height: 476px;
    margin: auto auto auto auto;
    margin: calc(50vh - 150px) auto 0 auto;
    border-radius: 4px;
    background-color: #333;
    background-image: linear-gradient(90deg, #e6ebee, #f0f0f0);
    box-shadow: 0px 0px 0px 0px #b1b8c0 inset,
        0px -10px 10px 10px #b1b8c0 inset,
        0px 1px 0px 2px #b1b8c0 inset,
        0 55px 10px -25px rgba(0,0,0,0.1),
        0 65px 30px -10px rgba(0,0,0,0.5);
    z-index: 1;
  border-radius: 10px;
}

.out {
  display: block;
  background-color: transparent;
  margin: -6px auto auto 10px;
  border-radius: 5px;
  width: 965px;
  height: 490px;
  position: absolute;
  background-color: #333;
  z-index: -1;
}

.lcdBorder {
  display: block;
  z-index: 1;
  background-color: #222816;
  width: 760px;
  height: 105px;
  position: absolute;
  margin: 30px auto auto 30px;
  border-radius: 3px;
  box-shadow: 0 5px 20px .05px #130f0a inset,
        5px 0 10px -4px #130f0a inset,
        -0.5px 0 3px 1px #130f0a inset,
        0 0 0 2px rgba(0,0,0,1),
        0 65px 50px -10px rgba(0,0,0,-0.05);
}

.lcd {
  display: block;
  z-index: 2;
  background-color: #99a883;
  width: 700px;
  height: 60px;
  position: absolute;
  margin: 50px auto auto 60px;
  border-radius: 3px;
  box-shadow: 0 5px 20px .05px #130f0a inset,
        5px 0 10px -4px #130f0a inset,
        -0.5px 0 3px 1px #130f0a inset,
        0 0 0 2px rgba(0,0,0,1),
        0 65px 50px -10px rgba(0,0,0,-0.05);
}

.lcd p{
    
}
.lcd p:nth-child(1){
    display: inline-block;
  font-family: "Orbitron", sans-serif;
  opacity: .5;
  margin: auto auto auto 150px;
  font-size: .7em;
}

.lcd p:nth-child(2){
    display: inline-block;
  font-family: "Orbitron", sans-serif;
  opacity: .5;
  margin: auto auto auto 150px;
  font-size: .7em;
}

.lcd p:nth-child(3){
  font-family: "Orbitron", sans-serif;
  opacity: .5;
  margin: 0 auto auto 100px;
  font-size: 1.8em;
    transform: scaleY(1.5);
}

.onoff {
  display: block;
  z-index: 2;
  background-color: black;
  width: 60px;
  height: 30px;
  position: absolute;
  margin: 30px auto auto 860px;
  border-radius: 3px;
  box-shadow: 0 5px 20px .05px #130f0a inset,
        5px 0 10px -4px #130f0a inset,
        -0.5px 0 3px 1px #130f0a inset,
        0 0 0 2px rgba(0,0,0,1),
        0 65px 50px -10px rgba(0,0,0,-0.05);
}

.onoffin {
  display: block;
  z-index: 3;
  background-color: black;
  width: 30px;
  height: 25px;
  position: absolute;
  margin: 30px auto auto 880px;
box-shadow: 3px 3px 3px 0 #102027 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #102027 inset,
10px 10px 5px 2px rgba(0,0,0,.7),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.onoffinline1 {
  display: block;
  z-index: 3;
  background-color: #333;
  width: 1.5px;
  height: 30px;
  position: absolute;
  margin: 30px auto auto 885px;
}

.onoffinline2 {
  display: block;
  z-index: 3;
  background-color: #333;
  width: 1.5px;
  height: 30px;
  position: absolute;
  margin: 30px auto auto 890px;  
}
.onoffinline3 {
  display: block;
  z-index: 3;
  background-color: #333;
  width: 1.5px;
  height: 30px;
  position: absolute;
  margin: 30px auto auto 895px;
}

.onoffinline4 {
  display: block;
  z-index: 3;
  background-color: #333;
  width: 1.5px;
  height: 30px;
  position: absolute;
  margin: 30px auto auto 900px;
}

.onoffinline5 {
  display: block;
  z-index: 3;
  background-color: #333;
  width: 1.5px;
  height: 30px;
  position: absolute;
  margin: 30px auto auto 905px
}

.casio {
  display: block;
  background-color: transparent;
  position: relative;
  right: 20px;
  top: 80px;
  direction: rtl;
  z-index: 2;
}

.logo {
  font-family: 'play', sans-serif;
  font-size: .8em;
  font-weight: 20px;
}

.model {
  font-family: "Audiowide", sans-serif;
  color: #a31746;
  font-weight: 1;
  font-size: 0.5em;
}

.type {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.3em;
  font-stretch: condensed;
}

.horizmain {
  display: block;
  background-color: #3333;
  margin: 155px auto auto auto;
  width: 995px;
  height: 2px;
  position: absolute;
  z-index: 4;
}
.whitekey1 {
  display: block;
  z-index: 2;
  background-color: #edf1ff;
  width: 50px;
  height: 30px;
  position: absolute;
  margin: 180px auto auto 30px;
  border-radius: 1px;
  box-shadow: 2px 2px 3px 0 #c7c7c7 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #c7c7c7 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey2 {
display: block;
z-index: 2;
background-color: #edf1ff;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 102px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #c7c7c7 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #c7c7c7 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey3 {
display: block;
z-index: 2;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 174px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey4 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 246px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey5 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 318px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey6 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 390px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey7 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 462px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey8 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 30px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey9 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 102px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey10 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 174px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey11 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 246px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey12 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 318px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey13 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 390px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey14 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 462px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey15 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 30px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey16 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 102px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey17 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 174px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey18 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 246px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey19 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 318px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey20 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 390px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey21 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 462px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey22 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 30px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey23 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 102px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey24 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 174px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey25 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 246px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey26 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 318px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey27 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 390px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey28 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 462px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey29 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 30px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey30 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 102px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey31 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 174px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey32 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 246px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey33 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 318px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey34 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 390px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.whitekey35 {
display: block;
z-index: 3;
background-color: #c8d1d2;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 462px;
border-radius: 3px;
box-shadow: 2px 2px 3px 0 #707070 inset,
5px 5px 3px -1px #aeaeae inset,
2px 2px 0 2px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.w1 {
  font-family: "Audiowide", sans-serif;
  color: #a31545;
  margin: 10px auto auto 5px;
  text-align: center;
  font-weight: 700;
}

.w2 {
  font-family: "Audiowide", sans-serif;
  color: #007bb2;
  margin: 10px auto auto 5px;
  text-align: center;
  font-weight: 700;
}

.w3 {
  font-family: "Balsamiq Sans", cursive;
  margin: 25px -10px auto auto;
  transform: rotate(90deg);
  font-size: 1.5em;
  font-weight: 600;
}

.w4 {
  font-family: "Balsamiq Sans", cursive;
  margin: -7px auto auto 9px;
  font-size: 1.0em;
  font-weight: 1000;
  transform: rotate(95deg) scaleX(-1);
}

.w5 {
  font-family: "Michroma", sans-serif;
  margin: 10px auto auto 28px;
  font-size: .9em;
  font-weight: 1000;
  transform: scaleX(1.5);
}

.w6 {
  font-family: "Balsamiq Sans", cursive;
  margin: auto auto auto 25px;
  font-size: 1.5em;
  font-weight: 700;
  transform: scaleX(1.5);
}

.w7 {
  font-family: "Archivo Narrow", sans-serif;
  margin: 4px auto auto 28px;
  font-size: 1.3em;
  font-weight: 1000;
  transform: scaleX(1.5);
}

.w8 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1.0em;
  font-weight: 700;
}

.w9 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1.0em;
  font-weight: 700;
}

.w10 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w11 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w12 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w13 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w14 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w15 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w16 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w17 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w18 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w19 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w20 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w21 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w22 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w23 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w24 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w25 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w26 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w27 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w28 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w29 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w30 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w31 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w32 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w33 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.w34 {
font-family: "Archivo Narrow", sans-serif;
margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
  transform: scaleX(1.5);
}

.w35 {
  font-family: "Archivo Narrow", sans-serif;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.blackkey1 {
display: block;
z-index: 3;
background-color: black;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 550px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #102027 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey2 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 622px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey3 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 694px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey4 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 766px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey5 {
display: block;
z-index: 3;
background-color: #d84315;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 838px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #b91400 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #b91400 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey6 {
display: block;
z-index: 3;
background-color: #d84315;
width: 50px;
height: 30px;
position: absolute;
margin: 180px auto auto 910px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #b91400 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #b91400 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey7 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 550px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey8 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 622px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey9 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 694px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey10 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 766px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey11 {
display: block;
z-index: 3;
background-color: black;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 838px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #102027 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey12 {
display: block;
z-index: 3;
background-color: black;
width: 50px;
height: 30px;
position: absolute;
margin: 240px auto auto 910px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #102027 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey13 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 550px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey14 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 622px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey15 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 694px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey16 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 766px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey17 {
display: block;
z-index: 3;
background-color: black;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 838px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #102027 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey18 {
display: block;
z-index: 3;
background-color: black;
width: 50px;
height: 30px;
position: absolute;
margin: 300px auto auto 910px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #102027 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey19 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 550px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey20 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 622px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey21 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 694px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey22 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 766px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey23 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 838px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey24 {
display: block;
z-index: 3;
background-color: black;
width: 50px;
height: 30px;
position: absolute;
margin: 360px auto auto 910px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #102027 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey25 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 550px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey26 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 622px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey27 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 694px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey28 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 766px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey29 {
display: block;
z-index: 3;
background-color: #333;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 838px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #333 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #4f5b62 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.blackkey30 {
display: block;
z-index: 3;
background-color: black;
width: 50px;
height: 30px;
position: absolute;
margin: 420px auto auto 910px;
border-radius: 1px;
box-shadow: 3px 3px 3px 0 #102027 inset,
3px 5px 3px -5px #aeaeae inset,
3px 3px 0 1px #102027 inset,
0 0 0px 3px rgba(0,0,0,4),
3px 3px 4px 3px rgba(0,0,0,4),
0 0 50px -10px rgba(0,0,0,-0.05);
}

.b1 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: .95em;
  font-weight: 700;
}

.b2 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  margin: auto;
  padding: 8px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.b3 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 8px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.b4 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: .85em;
  font-weight: 500;
  transform: scaleY(1.5);
}

.b5 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 8px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 600;
}

.b6 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 600;
}

.b7 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
    padding: 5px 0;
    text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b8 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b9 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b10 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b11 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: .95em;
  font-weight: 700;
}

.b12 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: .95em;
  font-weight: 700;
}

.b13 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b14 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b15 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b16 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 3px 0;
  text-align: center;
  font-size: 2.2em;
  font-weight: 700;
}

.b17 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: .95em;
  font-weight: 700;
}

.b18 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 10px 0;
  text-align: center;
  font-size: .95em;
  font-weight: 700;
}

.b19 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b20 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b21 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b22 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
  transform: scaleX(2.5);
}

.b23 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: -10px;
  text-align: center;
  font-size: 2em;
  font-weight: 700;
}

.b24 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 2px 0;
  text-align: center;
  font-size: 1.5em;
  font-weight: 500;
}

.b25 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 5px 0;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
}

.b26 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: -10px;
  text-align: center;
  font-size: 2em;
  font-weight: 700;
}

.b27 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 8px 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.b28 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 3px 0;
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
}

.b29 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 8px 0 0 5px;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
}

.b30 {
  font-family: "Archivo Narrow", sans-serif;
  color: white;
  margin: auto;
  padding: 2px 0 0 5px;
  text-align: center;
  font-size: 1.5em;
  font-weight: 500;
}

.vertline {
  display: block;
  background-color: #3336;
  margin: 165px auto auto 530px;
  width: 2px;
  height: 300px;
  position: absolute;
  z-index: 4;
}

.horzlinewhite1 {
  display: block;
  background-color: #3333;
  margin: 225px auto auto 15px;
  width: 510px;
  height: 2px;
  position: absolute;
  z-index: 4;
}

.horzlinewhite2 {
  display: block;
  background-color: #3333;
  margin: 285px auto auto 15px;
  width: 510px;
  height: 2px;
  position: absolute;
  z-index: 4;
}

.horzlinewhite3 {
  display: block;
  background-color: #3333;
  margin: 345px auto auto 15px;
  width: 510px;
  height: 2px;
  position: absolute;
  z-index: 4;
}

.horzlinewhite4 {
  display: block;
  background-color: #3333;
  margin: 405px auto auto 15px;
  width: 510px;
  height: 2px;
  position: absolute;
  z-index: 4;
}

.horzlineblack1 {
  display: block;
  background-color: #3333;
  margin: 225px auto auto 538px;
  width: 440px;
  height: 2px;
  position: absolute;
  z-index: 4;
}

.horzlineblack2 {
  display: block;
  background-color: #3333;
  margin: 285px auto auto 538px;
  width: 440px;
  height: 2px;
  position: absolute;
  z-index: 4;
}

.horzlineblack3 {
  display: block;
  background-color: #3333;
  margin: 345px auto auto 538px;
  width: 440px;
  height: 2px;
  position: absolute;
  z-index: 4;
}

.horzlineblack4 {
  display: block;
  background-color: #3333;
  margin: 405px auto auto 538px;
  width: 440px;
  height: 2px;
  position: absolute;
  z-index: 4;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg