Spaces:
Sleeping
Sleeping
File size: 1,888 Bytes
067ea03 c1de183 8df064a c1de183 067ea03 6a88405 c1de183 04bb898 6a88405 8df064a c1de183 8df064a 6a88405 c1de183 6a88405 067ea03 6a88405 04bb898 067ea03 04bb898 c1de183 04bb898 6a88405 067ea03 04bb898 c1de183 04bb898 6a88405 067ea03 c1de183 067ea03 6a88405 8df064a 6a88405 8df064a 6a88405 8df064a 6a88405 067ea03 6a88405 067ea03 6a88405 067ea03 6a88405 067ea03 6a88405 04bb898 6a88405 04bb898 | 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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
height: 100vh;
background: linear-gradient(135deg, #667eea, #764ba2);
overflow: hidden;
}
/* Hide video & canvas */
video, canvas {
display: none;
}
/* Layout */
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Welcome Screen */
.welcome-screen {
text-align: center;
color: white;
animation: fadeIn 1s ease;
}
.welcome-content {
padding: 2rem;
}
.smile-icon {
font-size: 8rem;
color: #FFD700;
margin-bottom: 1.5rem;
animation: bounce 2s infinite;
}
.welcome-title {
font-size: 4rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.welcome-message {
font-size: 2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.simple-instruction {
display: inline-flex;
align-items: center;
gap: 15px;
padding: 1.5rem 2rem;
font-size: 1.2rem;
background: rgba(255,255,255,0.15);
border-radius: 15px;
backdrop-filter: blur(10px);
animation: pulse 2s infinite;
}
.simple-instruction i {
font-size: 1.8rem;
color: #FFD700;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* Responsive */
@media (max-width: 768px) {
.welcome-title { font-size: 3rem; }
.welcome-message { font-size: 1.5rem; }
.smile-icon { font-size: 6rem; }
}
@media (max-width: 480px) {
.welcome-title { font-size: 2.5rem; }
.welcome-message { font-size: 1.2rem; }
.smile-icon { font-size: 5rem; }
}
|