Spaces:
Sleeping
Sleeping
File size: 1,808 Bytes
06cc4fe 9fbe495 06cc4fe fafc9b0 06cc4fe 9ab0672 fafc9b0 06cc4fe 7d349e2 9ab0672 06cc4fe 7d349e2 06cc4fe 7d349e2 06cc4fe fafc9b0 7d349e2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
/* Global Reset */
* {
box-sizing: border-box;
background-color: #af7db3 !important; /* Soft pastel pink */
font-family: "Comic Sans MS", cursive, sans-serif; /* Playful font */
}
/* Full Page Styling */
html, body {
height: 100vh !important;
width: 100%;
overflow-x: hidden;
padding: 0 !important;
text-align: center; /* Center all text elements */
}
/* Title Styling */
.title {
font-size: 36px;
font-weight: bold;
text-align: center;
background: linear-gradient(to right, #ff85a2 0%, #ff4da6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 10px 0;
}
/* Cute Input Box */
.stTextInput > div {
border-radius: 20px;
border: 2px solid #ff69b4 !important; /* Barbie pink border */
background-color: white !important;
padding: 8px;
color: #8f6c91 !important;
text-align: center; /* Center text inside input */
margin: 0 auto; /* Center the input box */
max-width: 300px; /* Prevent it from being too wide */
}
/* Cute Buttons */
button {
border-radius: 20px !important;
background-color: #ff85a2 !important;
color: white !important;
font-size: 18px !important;
padding: 10px 20px !important;
transition: all 0.3s ease-in-out;
}
button:hover {
background-color: #ff4da6 !important;
transform: scale(1.05);
}
/* Cute Output Styling */
.result {
color: #ff1493;
font-size: 24px;
text-align: center;
font-weight: bold;
padding-top: 10px;
text-shadow: 2px 2px 5px rgba(255, 20, 147, 0.5);
}
/**
@keyframes sparkle {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.sparkle {
display: inline-block;
animation: sparkle 1s infinite;
}
@media (max-width: 768px) {
.title {
font-size: 28px;
}
.result {
font-size: 20px;
}
}
**/ |