:root {
--background: #151F25;
--container: #1d3557;
--shadow: #0f1c2f;
--red: #FF4755;
--red-dark: #FC2B3A;
--green: #98DB7C;
--green-dark: #7ac65c;
--seed: #5B5B5B;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: var(--background);
}
.container {
background-color: #1d3557;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 20em;
width: 20em;
border-radius: 50%;
}
.watermelon-rind {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -30%) rotate(-45deg);
background-color: var(--green-dark);
height: 8em;
width: 14em;
border-bottom-right-radius: 8em;
border-bottom-left-radius: 8em;
animation: move-watermelon 1s infinite ease-in-out alternate;
transition: filter .5s;
}
.watermelon-rind:after {
content: '';
position: absolute;
right: 0%;
background-color: var(--green);
height: 7.5em;
width: 13.4em;
border-bottom-right-radius: 7.5em;
border-bottom-left-radius: 7.5em;
}
.watermelon-pulp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -57.5%);
background-color: var(--red-dark);
height: 7em;
width: 11.5em;
border-bottom-right-radius: 7em;
border-bottom-left-radius: 7em;
z-index: 10;
}
.watermelon-pulp:after {
content: '';
position: absolute;
right: 0%;
background-color: var(--red);
height: 6.7em;
width: 10.7em;
border-bottom-right-radius: 6.7em;
border-bottom-left-radius: 6.7em;
}
.watermelon-seed {
position: absolute;
height: 1.2em;
width: .7em;
background-color: var(--seed);
border-radius: 50%;
z-index: 20;
}
.watermelon-seed-1 {
top: 20%;
left: 25%;
transform: rotate(60deg);
}
.watermelon-seed-2 {
top: 35%;
left: 38%;
transform: rotate(30deg);
}
.watermelon-seed-3 {
top: 40%;
left: 53%;
transform: rotate(0deg);
}
.watermelon-seed-4 {
top: 35%;
left: 67%;
transform: rotate(-30deg);
}
.watermelon-seed-5 {
top: 20%;
left: 78%;
transform: rotate(-60deg);
}
.watermelon-shadow {
position: absolute;
left: 50%;
bottom: 10%;
transform: translate(-50%, -50%);
background-color: var(--shadow);
height: 1.5em;
width: 10em;
z-index: -10;
border-radius: 50%;
animation: increase-shadow 1s ease-in-out infinite alternate;
}
/*
.clound {
position: absolute;
background: #FFFFFF;
z-index: 10;
border-radius: 1em;
box-shadow: .1em .1em .5em rgba(29, 29, 29, 0.541);
}
.clound-1 {
top: 10%;
right: 10%;
height: 1em;
width: 4em;
animation: move-clound-to-left 2s ease-in-out infinite alternate;
}
.clound-2 {
top: 30%;
right: 20%;
height: 1em;
width: 4em;
animation: move-clound-to-right 2s ease-in-out infinite alternate;
}
.clound-3 {
top: 14%;
right: 50%;
height: 1em;
width: 4em;
animation: move-clound-to-left 2s ease-in-out infinite alternate;
}
.clound-4 {
top: 25%;
right: 60%;
height: 1em;
width: 4em;
z-index: -1;
animation: move-clound-to-right 2.5s ease-in-out infinite alternate;
} */
@keyframes move-watermelon {
from {
top: 35%;
}
to {
top: 50%;
}
}
@keyframes increase-shadow {
from {
width: 3.5em;
}
to {
width: 10em;
}
}
#st {
color: white;
font-style: bold;
font-size: 40px;
text-align: center;
}
#nd {
color: white;
font-size: 30px;
text-align: center;
}
#rd {
margin-top: 10px;
color: green;
text-align: center;
font-family: monospace;
font-size: 15px;
}
#donate
{
margin-top: 10px;
width: 230px;
border-radius: 5px;
color: green;
background-color: white;
text-align: center;
font-style: bold;
}