/* Copyright (c) 2025 by Alexandre Vacassin  (https://codepen.io/alexandrevacassin/pen/YPqqqwr) */
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.glass {
  position: absolute;      
  top: 50%;                
  left: 50%;               
  width: 520px;            
  height: 520px;           
  transform: translate(-50%, -50%);  
  background-color: rgba(255, 255, 255, 0.08);
}

.glass-points {
    backdrop-filter: url(#filter-points);
    -webkit-backdrop-filter: url(#filter-points);
    mask: url(#shape-mask-points);
    -webkit-mask: url(#shape-mask-points);
  }

.glass-0 {
    backdrop-filter: url(#filter-0);
    -webkit-backdrop-filter: url(#filter-0);
    mask: url(#shape-mask-0);
    -webkit-mask: url(#shape-mask-0);
  }

.glass-1 {
    backdrop-filter: url(#filter-1);
    -webkit-backdrop-filter: url(#filter-1);
    mask: url(#shape-mask-1);
    -webkit-mask: url(#shape-mask-1);
  }

.glass-2 {
    backdrop-filter: url(#filter-2);
    -webkit-backdrop-filter: url(#filter-2);
    mask: url(#shape-mask-2);
    -webkit-mask: url(#shape-mask-2);
  }

.glass-3 {
    backdrop-filter: url(#filter-3);
    -webkit-backdrop-filter: url(#filter-3);
    mask: url(#shape-mask-3);
    -webkit-mask: url(#shape-mask-3);
  }

.glass-4 {
    backdrop-filter: url(#filter-4);
    -webkit-backdrop-filter: url(#filter-4);
    mask: url(#shape-mask-4);
    -webkit-mask: url(#shape-mask-4);
  }

.glass-5 {
    backdrop-filter: url(#filter-5);
    -webkit-backdrop-filter: url(#filter-5);
    mask: url(#shape-mask-5);
    -webkit-mask: url(#shape-mask-5);
  }

.glass-6 {
    backdrop-filter: url(#filter-6);
    -webkit-backdrop-filter: url(#filter-6);
    mask: url(#shape-mask-6);
    -webkit-mask: url(#shape-mask-6);
  }

.glass-7 {
    backdrop-filter: url(#filter-7);
    -webkit-backdrop-filter: url(#filter-7);
    mask: url(#shape-mask-7);
    -webkit-mask: url(#shape-mask-7);
  }

 .glass-8 {
    backdrop-filter: url(#filter-8);
    -webkit-backdrop-filter: url(#filter-8);
    mask: url(#shape-mask-8);
    -webkit-mask: url(#shape-mask-8);
  }

  .glass-9 {
    backdrop-filter: url(#filter-9);
    -webkit-backdrop-filter: url(#filter-9);
    mask: url(#shape-mask-9);
    -webkit-mask: url(#shape-mask-9);
  }

.clock-container {
  display: flex;
  gap: 0px; 
  flex-wrap: no-wrap;
  justify-content: center;
    align-items: center;
  height: 100vh;
}

.number {
  width: 115px;
  height: 100vh;
  position: relative;
}

.glass {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.08);
}

.glass.active {
  display: block; 
}

.separator {
  width: 50px
}

#browser-warning {
  display:none; 
  color:white; 
  background:#c00; 
  padding:20px; 
  text-align:center; 
  border-radius:8px;
  font-family: Arial, sans-serif;
  position: absolute
}

 .video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   
    z-index: -1;         
  }