Spaces:
Running
Running
File size: 2,208 Bytes
0b94cfd 4a45082 0b94cfd 4a45082 0b94cfd 4a45082 0b94cfd 4a45082 0b94cfd 4a45082 0b94cfd 4a45082 | 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 |
:root {
--sky-blue: #7ec0ee;
--aqua: #00c0ff;
--glass-white: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.3);
--glass-shadow: 0 8px 32px rgba(0, 192, 255, 0.2);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #7ec0ee, #00c0ff);
color: #333;
margin: 0;
padding: 0;
min-height: 100vh;
background-attachment: fixed;
}
.glass-panel {
background: var(--glass-white);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
padding: 2rem;
margin: 1rem;
}
.btn-aero {
background: linear-gradient(to bottom, #7ec0ee, #00a8ff);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 24px;
color: white;
padding: 12px 24px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 15px rgba(0, 192, 255, 0.3);
transition: all 0.3s ease;
}
.btn-aero:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 192, 255, 0.4);
}
.aero-icon {
width: 64px;
height: 64px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin: 0 auto 1rem;
}
.aero-icon i {
font-size: 32px;
color: var(--aqua);
}
h1, h2, h3 {
color: #0066cc;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}
/* Windows Vista/7 style scrollbar */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #7ec0ee, #00a8ff);
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.5);
}
/* Bubble elements */
.bubble {
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: float 15s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
|