@media (min-width: 768px) {
body {
cursor: default;
}
}
.cam-container {
position: relative;
margin-top: 1rem !important;
width: 100%;
max-width: 800px;
text-align: center;
margin: 0 auto;
}
#webcam {
width: 100%;
height: auto;
border-radius: 8px;
border: 2px solid #333;
transform: scaleX(-1);
/* Mirror the webcam */
}
.filter-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
transform: scaleX(-1);
/* Mirror to match webcam */
}
.helmet-image {
position: absolute;
width: 35%;
height: auto;
display: none;
/* Hidden by default */
transition: all 0.1s ease;
/* Smooth movement */
}
#face-landmarks {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.filter-selector {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
@media (min-width: 1024px) {
.remote button {
min-width: unset !important;
}
}
.filter-btn {
padding: 12px 15px !important;
background: #222 !important;
color: #fff !important;
border: none !important;
border-radius: 5px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
font-weight: bold !important;
min-width: 120px !important;
}
.filter-btn:hover {
background-color: #444;
transform: translateY(-2px);
}
.remote button.filter-btn.active {
background-color: #e10600 !important;
color: white !important;
box-shadow: 0 2px 8px rgba(225, 6, 0, 0.4) !important;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 15px;
flex-wrap: wrap;
}
.control-btn {
background-color: #333;
color: white;
border: none;
border-radius: 5px;
padding: 8px 15px;
cursor: pointer;
transition: all 0.2s ease;
}
.control-btn:hover {
background-color: #555;
}
.weather-controls {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.weather-btn {
background-color: #222;
color: white;
border: none;
border-radius: 5px;
padding: 8px 15px;
cursor: pointer;
transition: all 0.2s ease;
font-weight: bold;
}
.weather-btn:hover {
background-color: #444;
transform: translateY(-2px);
}
.weather-btn.active {
background-color: #2980b9;
box-shadow: 0 2px 8px rgba(41, 128, 185, 0.4);
}
.f1-lights-container {
width: 100%;
max-width: 300px;
margin: 20px auto;
text-align: center;
display: none;
}
.f1-lights {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
background-color: #222;
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.light {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #333;
border: 2px solid #555;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
transition: all 0.3s ease;
}
.light.active {
background-color: #e10600;
box-shadow:
0 0 10px #e10600,
0 0 20px #e10600,
0 0 30px #e10600;
}
.f1-lights-text {
font-size: 14px;
color: #ccc;
margin-top: 10px;
}
#status {
margin-top: 10px;
padding: 8px 16px;
font-style: italic;
color: #fff;
background-color: #333;
border-radius: 4px;
transition: background-color 0.3s ease;
display: none;
}
#status.face-tracking {
background-color: #04724d;
}
#status.loading {
background-color: #e6a502;
}
#status.error {
background-color: #e10600;
}
#status.manual-mode {
background-color: #8f4700;
}
/* Weather effect overlays */
.weather-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
display: none;
}
/* Sunny effect */
.sunny-overlay {
background: linear-gradient(rgba(255, 240, 180, 0.25),
rgba(255, 220, 140, 0.1));
mix-blend-mode: soft-light;
}
.sun-flare {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0.9;
pointer-events: none;
}
.lens-flare {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
/* Cloudy effect */
.cloudy-overlay {
background: linear-gradient(rgba(200, 200, 210, 0.35),
rgba(220, 220, 230, 0.15));
}
.clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
animation: cloud-drift 120s linear infinite;
opacity: 0.8;
pointer-events: none;
}
.cloud-shadows {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
animation: cloud-shadow-drift 180s linear infinite;
mix-blend-mode: multiply;
pointer-events: none;
}
@keyframes cloud-drift {
from {
background-position: 0 0;
}
to {
background-position: 800px 0;
}
}
@keyframes cloud-shadow-drift {
from {
background-position: 0 0;
}
to {
background-position: 800px 50px;
}
}
/* Rain effect - simplified completely */
.rain-overlay {
background-color: rgba(90, 90, 100, 0.3);
background-image:
url('data:image/svg+xml;utf8,');
background-size: 20px 40px;
animation: rain-simple 0.3s linear infinite;
}
@keyframes rain-simple {
from {
background-position: 0 0;
}
to {
background-position: 0 40px;
}
}
/* Lightning effect - simplified */
.lightning {
background-color: rgba(255, 255, 255, 0.8);
opacity: 0;
transition: opacity 0.05s ease-in-out;
}
/* Fog effect - plain white fog */
.fog-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
mix-blend-mode: screen;
}
/* Night mode - true grayscale */
.night-overlay {
background: radial-gradient(ellipse at center,
rgba(10, 10, 10, 0.6) 0%,
rgba(0, 0, 0, 0.9) 100%);
mix-blend-mode: multiply;
filter: grayscale(1);
}
.night-vignette {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0) 30%,
rgba(0, 0, 0, 0.95) 100%);
pointer-events: none;
filter: grayscale(1);
}
.stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0;
animation: twinkle 6s ease-in-out infinite alternate;
filter: grayscale(1);
}
.stars-bright {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0;
animation: twinkle-bright 4s ease-in-out infinite alternate;
filter: grayscale(1);
}
.stars-bright {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0;
animation: twinkle-bright 4s ease-in-out infinite alternate;
filter: grayscale(1);
}
.moon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
filter: grayscale(1);
}
.moon-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
opacity: 0.9;
filter: grayscale(1);
}
@keyframes twinkle {
0%,
10% {
opacity: 0.6;
filter: blur(0.3px) grayscale(1);
}
50% {
opacity: 0.8;
filter: blur(0.2px) grayscale(1);
}
90%,
100% {
opacity: 0.7;
filter: blur(0.3px) grayscale(1);
}
}
@keyframes twinkle-bright {
0%,
20% {
opacity: 0.7;
filter: blur(0px) grayscale(1);
}
60% {
opacity: 1;
filter: blur(1px) grayscale(1);
}
80%,
100% {
opacity: 0.9;
filter: blur(0px) grayscale(1);
}
}
/* Enhanced Rain Effect CSS */
.rain-overlay {
background-color: rgba(70, 80, 100, 0.3);
overflow: hidden;
position: relative;
}
/* Multiple rain layers for depth */
.rain-layer1,
.rain-layer2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* First layer (foreground) - thicker, faster rain */
.rain-layer1 {
background-image:
url('data:image/svg+xml;utf8,');
animation: rain-fast 0.5s linear infinite;
opacity: 0.9;
}
/* Second layer (background) - different pattern, slower */
.rain-layer2 {
background-image:
url('data:image/svg+xml;utf8,');
animation: rain-slow 0.9s linear infinite;
opacity: 0.7;
}
/* Water droplets on screen effect */
.rain-droplets {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0.8;
backdrop-filter: blur(1px);
}
/* Drip effects for running water */
.rain-drips {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image: url('data:image/svg+xml;utf8,');
}
/* Puddle/ripple effect */
.rain-puddles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: url('data:image/svg+xml;utf8,');
}
/* Lightning effect */
.lightning {
background-color: rgba(255, 255, 255, 0.9);
opacity: 0;
transition: opacity 0.05s ease-in-out;
}
.lightning-bolt {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-image: url('data:image/svg+xml;utf8,');
transition: opacity 0.1s ease-in-out;
}
/* Rain mist effect */
.rain-mist {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(150, 160, 180, 0.1), rgba(150, 160, 180, 0.2));
opacity: 0.7;
pointer-events: none;
backdrop-filter: blur(0.5px);
}
/* Animations */
@keyframes rain-fast {
from {
background-position: 0 0;
}
to {
background-position: -50px 50px;
}
}
@keyframes rain-slow {
from {
background-position: 0 0;
}
to {
background-position: -75px 75px;
}
}
h1 {
display: none;
}
#experience {
width: 100vw;
}
.remote button {
font-size: small !important;
}