html {
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
footer,
header,
nav,
section {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
figcaption,
figure,
main {
display: block
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: inherit
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
dfn {
font-style: italic
}
mark {
background-color: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
audio,
video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
display: inline-block;
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details,
menu {
display: block
}
summary {
display: list-item
}
canvas {
display: inline-block
}
template {
display: none
}
[hidden] {
display: none
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: '';
clear: both;
height: 0;
}
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
/* Styling Starts */
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
background: linear-gradient(90deg, rgba(14, 53, 96, 1) 0%, rgba(0, 114, 206, 1) 100%);
}
canvas {
display: block;
vertical-align: bottom;
}
main {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* Globe Styling */
.crystal-ball {
position: relative;
width: 500px;
height: 500px;
/* background: radial-gradient(circle at 90% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 5%, rgba(200, 200, 200, 0.2) 60%, rgba(150, 150, 150, 0.1) 100%);
box-shadow: inset -10px -10px 30px rgba(0, 0, 0, 0.1), inset 10px 10px 30px rgba(255, 255, 255, 0.8), 0 10px 20px rgba(0, 0, 0, 0.1); */
/* Main spherical gradient for glass effect */
/* Subtle outer shadow for depth */
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(255, 255, 255, 0.1), /* Inner glow */
inset 0 0 20px rgba(0, 0, 0, 0.2);
/* Inner shadow for depth */
z-index: 2;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Pseudo-element for the main top-left light reflection */
.crystal-ball::before {
content: '';
position: absolute;
top: -10px;
left: 10%;
width: 80%;
height: 80%;
border-radius: 50%;
background: radial-gradient(circle at top left, rgb(255, 255, 255) 5%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 70%);
filter: blur(10px);
opacity: 0.8;
transform: rotate(45deg);
}
/* Pseudo-element for a secondary, smaller reflection or internal highlight */
.crystal-ball::after {
content: '';
position: absolute;
bottom: -25px;
right: 25%;
width: 50%;
height: 50%;
border-radius: 50%;
background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 70%);
filter: blur(5px);
opacity: 0.6;
transform: rotate(45deg);
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.crystal-ball #particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#offerAmount {
font-size: 2rem;
font-weight: 900;
color: #fff;
z-index: -10;
display: flex;
justify-content: center;
align-items: center;
}
#offerAmount img {
display: block;
width: 100%;
}
.restart {
margin-top: 2%;
cursor: pointer;
padding: 1rem;
font-size: 1rem;
}
.test {
font-size: 2rem;
font-weight: 900;
color: transparent;
border-color: #000;
}
/* ---- stats.js ---- */
.count-particles {
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.js-count-particles {
font-size: 1em;
}
#stats,
.count-particles {
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats {
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.count-particles {
border-radius: 0 0 3px 3px;
}
.container {
z-index: 10;
}
#particles-js-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -10;
}
@media (max-width: 480px) {
.crystal-ball {
width: 300px;
height: 300px;
}
#offerAmount {
font-size: 1.2rem;
}
}