button {
    background-color: cornflowerblue;
    border: radius 30px;
    transition: 0.4s ease-in-out;
}
button:hover { 
    background-color:lightgreen;
    transform: scale(1.050); 
}

body{font-family: 'Verdana', sans-serif}
h1 {
    font-family: fantasy;
    font-size: 36px; 
}

p{font-family: 'dancing script'}

body {
    background-color: #ffe4f2;
    color: #444; 
}

p {
    background-color: #fff0f5;
    padding: 10px;
    border-radius: 10px;
}
p { color: crimson; }
ul { list-style-type: none; }
li::before { content: "❤️ "; }

@keyframes sparkle-move
{  
    0% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(0) translateY(10px); } /*lmao wtf is translatex translateY* no shit lmao THEY SAID THIS IS INVALID. understandable so as html comment only works in its own area.*/
    100% { transform: translateX(-50%) translateY(0);}
}
body::before{
    content:"🥛🌹⛓️🌈🌿✨"; /*got to know these sparkles are static lmao this is cheating. Will f it after i am done making it pretty*/
    position:absolute;
    top: 10px;
    right: 50px;
    left: auto;
    font-size: 30px;
    opacity: 0.7;
    transform: translateX(-50px);
    animation:sparkle-move 2s infinite;
}
body
{ 
    background-image: url(https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExbDRzdXdycmdlODRuZDc3dDlmMWZ2c2lsc3l3eWlvNDh1NHB3NzN4cyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/6k6iDdi5NN8ZO/giphy.gif);
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: bottom;
}