@import url(https://fonts
.comparison {
    width: 100%;
    height: 400px;
    max-width: 800px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6), 
                0 0 40px rgba(255, 0, 255, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.3);
    backdrop-filter: blur(8px);
}

.comparison figure {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    margin: 0;
}

.comparison figure div {
    position: absolute;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    border-right: 1px solid rgba(0, 255, 255, 0.5);
}
googleapis.com/css?family=Raleway);
html {
  background: 
    linear-gradient(135deg, #200122, #6f0000, #0f0c29),
    url('https://images.unsplash.com/photo-1518562180175-34a163b1c9c8?w=1200&q=80') center/cover;
  min-height: 100vh;
  background-blend-mode: overlay;
  animation: bgPulse 15s infinite alternate;
}

@keyframes bgPulse {
  0% { background-color: #200122; }
  25% { background-color: #3b0101; }
  50% { background-color: #0f0c29; }
  75% { background-color: #3a1c71; }
  100% { background-color: #200122; }
}
body {
  background: rgba(15, 12, 41, 0.7);
  backdrop-filter: blur(12px) brightness(1.2);
  -webkit-backdrop-filter: blur(12px) brightness(1.2);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  color: #ff00ff;
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.7);
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.4) inset;
}
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.comparison-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

div#comparison, .comparison { 
width: 70vw;
  height: 45vw;
  max-width: 1024px;
  max-height: 768px;
  overflow: hidden;
margin: 30px auto;
background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.6), 
              0 0 40px rgba(255, 0, 255, 0.4);
  border: 1px solid rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}
div#comparison figure, .comparison figure { 
background-image: url(https://s3.amazonaws.com/flashypublic/Antique%2Btrucks%2Band%2Bcars%2Balong%2Bthe%2Broad%2BMontana%2BSeptember-29-2005_Carol%2BM%2BHighsmith_HDR_BW.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison figure > img { 
  position: relative;
  width: 100%;
}
div#comparison figure div, .comparison figure div { 
background-image: url(https://s3.amazonaws.com/flashypublic/Antique+trucks+and+cars+along+the+road+Montana+September+29+2005+-+Carol+M+Highsmith.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
  overflow: hidden;
  bottom: 0;
  height: 100%;
  border-right: 1px solid rgba(0, 255, 255, 0.5);
}
input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  top: -2rem; left: -2%;
  background-color: rgba(0, 255, 255, 0.1);
  width: 102%;
  height: 8px;
  border-radius: 4px;
}
input[type=range]:focus { 
  outline: none; 
}
input[type=range]:active { 
  outline: none;  
}

input[type=range]::-moz-range-track { 
  -moz-appearance:none;
    height:15px;
    width: 98%;
    background-color: rgba(255,255,255,0.1); 
    position: relative;
    outline: none;    
 }
input[type=range]::active { 
  border: none; 
  outline: none;
  }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #ff00ff;
  border-radius: 50%;
  position: relative;
  left: 10px;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.8),
              0 0 5px rgba(255, 255, 255, 0.8) inset;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: thumbPulse 1.5s infinite alternate;
}



input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  background: #ff00ff;
  border-radius: 50%;
  position: relative;
  left: 10px;
  box-shadow: 0 0 10px rgb(255 0 255 / 80%),
              0 0 5px rgba(255, 255, 255, 0.8) inset;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: thumbPulse 1.5s infinite alternate;
}
input[type=range]:focus::-webkit-slider-thumb {
  background: #00ffff;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
              0 0 5px rgba(255, 255, 255, 0.8) inset;
  transform: scale(1.2);
  animation: thumbFocusPulse 0.8s infinite alternate;
}


@keyframes thumbPulse {
  from { box-shadow: 0 0 10px rgba(255, 0, 255, 0.8); }
  to { box-shadow: 0 0 20px rgba(255, 0, 255, 0.8); }
}

@keyframes thumbFocusPulse {
  from { 
    background: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  }
  to { 
    background: #24ff00;
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.8);
  }
}
input[type=range]:focus::-moz-range-thumb {
  background: #00ffff;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.8),
              0 0 5px rgba(255, 255, 255, 0.8) inset;
  transform: scale(1.2);
  animation: thumbFocusPulse 0.8s infinite alternate;
}
.gallery-title {
    text-align: center;
    font-size: 2.5rem;
    color: #00ffff;
    margin: 2rem 0;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
    animation: textGlow 2s infinite alternate;
}
.upload-section {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  text-align: center;
}

.upload-section h2 {
  color: #00ffff;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

.upload-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.upload-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.upload-group label {
  color: #00ffff;
  font-size: 1rem;
}

.upload-group input {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  color: white;
  border-radius: 4px;
}

#compare-btn {
  padding: 0.8rem 1.5rem;
  background: linear-gradient(to right, #ff00ff, #00ffff);
  border: none;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 1rem;
}

#compare-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
}

.image-title {
  font-family: 'Raleway', sans-serif;
text-align: center;
  width: 60%;
  color: #00ffff;
 margin: 20px auto;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.7),
               0 0 20px rgba(0, 255, 255, 0.5);
  padding: 15px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 15px rgb(204 0 255 / 0%),
              0 0 5px rgb(22 200 71 / 23%) inset;
  border-radius: 5px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: textGlow 2s infinite alternate;
}
.fullscreen-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.5);
  border-radius: 4px;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}

.fullscreen-btn svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #00ffff;
  stroke-width: 2;
}

.fullscreen-btn:hover {
  background: rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
}

:fullscreen .fullscreen-btn {
  bottom: 2rem;
  right: 2rem;
}

@keyframes textGlow {
from { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; }
  to { text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff; }
}