* {
margin
:
0
;
padding
:
0
;
box-sizing: border-box;
}
body {
font-family
:
"Arial"
,
sans-serif
;
background
: linear-gradient(
135
deg,
#f4fb8f
,
#ff6b6b
);
display
: flex;
justify-
content
:
center
;
align-items:
center
;
height
:
100
vh;
margin
:
0
;
}
.coin-container {
background-color
: rgba(
255
,
255
,
255
,
0.9
);
border-radius:
20px
;
box-shadow:
0
10px
20px
rgba(
0
,
0
,
0
,
0.3
);
padding
:
2
rem;
text-align
:
center
;
animation: fadeIn
1
s ease;
width
:
80%
;
max-width
:
500px
;
perspective:
1000px
;
}
h
1
{
color
:
#1ca00a
;
font-size
:
2.5
rem;
margin
:
0
0
1
rem;
text-shadow
:
2px
2px
4px
rgba(
0
,
0
,
0
,
0.2
);
}
.coin {
width
:
150px
;
height
:
150px
;
border-radius:
50%
;
overflow
:
hidden
;
box-shadow:
0
8px
20px
rgba(
0
,
0
,
0
,
0.2
);
transition: transform
0.5
s
ease-in-out;
margin
:
0
auto
;
backface-
visibility
:
hidden
;
}
button {
background-color
:
#4e6bff
;
color
:
#fff
;
border
:
none
;
padding
:
10px
20px
;
border-radius:
10px
;
font-size
:
1
rem;
cursor
:
pointer
;
transition: background-color
0.3
s
ease-in-out,
transform
0.2
s ease-in-out;
width
:
100%
;
margin-top
:
20px
;
}
button:hover {
background-image
: linear-gradient(
45
deg,
#4e6bff
,
#ff6b6b
);
transform: scale(
1.05
);
}
.result {
margin-top
:
20px
;
font-size
:
24px
;
color
:
#333
;
transition: opacity
0.5
s ease-in-out;
opacity:
0
;
text-transform
:
uppercase
;
font-weight
:
bold
;
text-shadow
:
1px
1px
2px
rgba(
0
,
0
,
0
,
0.4
);
letter-spacing
:
2px
;
}
.coin:hover {
transform: scale(
1.1
);
transition: transform
0.3
s
ease-in-out;
}
@keyframes spin {
0%
{
transform: rotateY(
0
deg);
}
100%
{
transform: rotateY(
360
deg);
}
}
.coin.flip {
animation: spin
1
s
cubic-bezier(
0.4
,
2.5
,
0.6
,
0.5
);
}
.coin img {
width
:
100%
;
height
:
100%
;
object-fit: cover;
object-
position
:
center
;
transform: rotateY(
0
deg);
}
.coin-container {
background-color
:
#fff
;
padding
:
20px
;
border-radius:
10px
;
box-shadow:
0
4px
10px
rgba(
0
,
0
,
0
,
0.2
);
transition: transform
0.5
s
ease-in-out;
}
.coin-container:hover {
transform: scale(
1.02
);
}
h
2
{
color
:
#333
;
font-size
:
24px
;
margin
:
10px
0
;
}