* {
padding
:
0
;
margin
:
0
;
box-sizing: border-box;
}
body {
background
:
#f7f7f7
;
padding-top
:
14%
;
}
.neumorphism
-3
{
width
:
300px
;
height
:
300px
;
border-radius:
50%
;
box-shadow:
-3px
-3px
7px
#e9e9e9
a
9
,
3px
3px
7px
#e9e9e9
a
9
;
position
:
absolute
;
top
:
40px
;
left
:
490px
;
}
.neumorphism
-3:
hover {
top
:
30px
;
box-shadow:
-3px
-3px
7px
#999999
a
9
,
-3px
-3px
12px
#e9e9e9
a
9
,
3px
3px
7px
#999999
a
9
,
-3px
-3px
12px
#e9e9e9
a
9
;
animation: uplift
0.1
s
1
linear;
}
.neumorphism
-3:
not( :hover) {
animation: downlift
0.1
s
1
linear;
top
:
40px
;
}
@keyframes uplift {
0%
{
top
:
40px
;
}
25%
{
top
:
37.5px
;
}
50%
{
top
:
35px
;
}
75%
{
top
:
32.5px
;
}
100%
{
top
:
30px
;
}
}
@keyframes downlift {
0%
{
box-shadow:
-3px
-3px
7px
#999999
a
9
,
-3px
-3px
12px
#e9e9e9
a
9
,
3px
3px
7px
#999999
a
9
,
-3px
-3px
12px
#e9e9e9
a
9
;
top
:
30px
;
}
25%
{
box-shadow:
-3px
-3px
7px
#b3b3b3
a
9
,
-3px
-3px
12px
#e9e9e9
a
9
,
3px
3px
7px
#b3b3b3
a
9
,
-3px
-3px
12px
#e9e9e9
a
9
;
top
:
32.5px
;
}
50%
{
top
:
35px
;
box-shadow:
-3px
-3px
7px
#d6d6d6
a
9
,
-3px
-3px
12px
#e9e9e9
a
9
,
3px
3px
7px
#d6d6d6
a
9
,
-3px
-3px
12px
#e9e9e9
a
9
;
}
75%
{
top
:
37.5px
;
box-shadow:
-3px
-3px
7px
#f3f3f3
a
9
,
-3px
-3px
12px
#e9e9e9
a
9
,
3px
3px
7px
#f3f3f3
a
9
,
-3px
-3px
12px
#e9e9e9
a
9
;
}
100%
{
box-shadow:
-3px
-3px
7px
#e9e9e9
a
9
,
3px
3px
7px
#e9e9e9
a
9
;
top
:
40px
;
}
}
div.input {
position
:
absolute
;
top
:
450px
;
left
:
550px
;
}
div.input input {
height
:
30px
;
width
:
60px
;
font-size
:
30px
;
color
: seashell;
text-align
:
center
;
opacity:
0.7
;
border
:
none
;
border-radius:
4px
;
}
#
red
{
background-color
:
red
;
}
#
green
{
background-color
:
green
;
}
#
blue
{
background-color
:
blue
;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance:
none
;
margin
:
0
;
}
input[type=number] {
-moz-appearance: textfield;
}
.rainbow-text {
background-image
: linear-gradient (
to
left
, violet, indigo,
blue
,
green
, yellow, orange,
red
);
width
:
300px
;
height
:
50px
;
-webkit-background-
clip
: text;
color
:
transparent
;
font-family
:
"Itim"
;
text-align
:
center
;
position
:
relative
;
top
:
340px
;
left
:
500px
;
}