:root {
    --light-bg: #ffffff;
    --light-cross: #d8d8d8;
    --dark-bg: #000000;
    --dark-cross: #222222;
    /* Grid spacing */
    --grid-spacing: 40px;
    --cross-size: 10px;
    --cross-thickness: 2.3px;
    --cross-opacity: 0.4;
}

body{
    font-family: 'Mozilla Text', sans-serif;
    transition: .5s;
}

html{
  /* For Internet Explorer and Edge */
  -ms-overflow-style: none;
  /* For Firefox */
  scrollbar-width: none;
  /* Ensure content can still scroll if it overflows */
  overflow-y: scroll; 
}

/* For Chrome, Safari, and Opera (WebKit browsers) */
.html::-webkit-scrollbar {
  display: none;
}


/* Animation keyframes */
@keyframes rotate-clockwise {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@keyframes rotate-counterclockwise {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}

@keyframes pulse {
    0%, 100% {opacity: 0.3;}
    50% {opacity: 0.8;}
}

/* Cross styling */
.cross {
    position: absolute;
    width: var(--cross-size, 8px);
    height: var(--cross-size, 8px);
    opacity: var(--cross-opacity, 0.4);
}

.cross::before,
.cross::after {
    content: '';
    position: absolute;
    background-color: currentColor;
}

.cross::before {
    width: 100%;
    height: var(--cross-thickness, 2px);
    top: calc(50% - var(--cross-thickness, 2px) / 2);
    left: 0;
}

.cross::after {
    width: var(--cross-thickness, 2px);
    height: 100%;
    top: 0;
    left: calc(50% - var(--cross-thickness, 2px) / 2);
}

/* Animation classes */
.rotate-clockwise {
    animation: rotate-clockwise 12s linear infinite;
}

.rotate-counterclockwise {
    animation: rotate-counterclockwise 15s linear infinite;
}

.pulse {
    animation: pulse 4s ease-in-out infinite;
}



.dark {
    --cross-color: var(--dark-cross);
}