/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
    font-family: 'GeistPixel';
    src: url('font/GeistPixel/GeistPixel-Regular-VariableFont_ELSH.ttf') format('truetype');
}

@font-face {
  font-family: 'DSDigi';
  src: url('font/DSDigital/DS-DIGI.TTF') format('truetype');
}

@font-face {
  font-family: 'DSDigiBold';
  src: url('font/DSDigital/DS-DIGIB.TTF') format('truetype');
}


body {
  background-color: #130A1F; /* #130A1F COLOR*/
  color: white; /*FONT COLOR*/
  font-family: GeistPixel;
}





/*DRAGGABLE PROPERTY*/
/*DRAGGABLE PROPERTY*/
/*DRAGGABLE PROPERTY*/
/*DRAGGABLE PROPERTY*/
/*DRAGGABLE PROPERTY*/
.windowcontainer-draggable {
  position: absolute;
  user-select: none; /* Prevents text highlighting while dragging */
}

.windowheader-dragger {
  z-index: 1;
  padding: 4px 8px;
  margin-bottom: 5px;
  cursor: move; /* Visual indicator for dragging */
  user-select: none; /* Prevents text highlighting while dragging */
  background: #242424;
  background: linear-gradient(90deg,rgba(36, 36, 36, 1) 0%,
    rgba(48, 35, 82, 1) 50%,
    rgba(255, 255, 255, 0) 100%);
}






/*Scrolling*/
/*Scrolling*/
/*Scrolling*/
/*Scrolling*/
/*Scrolling*/
#scrolling-banner-window { /* FULL WINDOW */
  top: 470px;          /* Distance from the top edge */
  left: 410px;        /* Distance from the left edge */

  background-color: #c0c0c0;
  border: 2px solid #f0f0f0;
  border-right-color: #303030;
  border-bottom-color: #303030;
  padding: 3px;
  box-shadow: inset 1px 1px 0 #dbdbdb, 1px 1px 0 #303030;
  margin: auto;
}

#scrolling-banner-body { /* INSIDE OF WINDOW */
  background-color: #fff;
  border: inset 1.5px #808080;
  border-left-color: #b3b3b3;
  border-top-color: #b3b3b3;
  padding: 15px;
  height: 75px;
  width: 300px;
  color: #000;

  position: relative;
}







/*Socials*/
/*Socials*/
/*Socials*/
/*Socials*/
/*Socials*/
#socials-window { /* FULL WINDOW */
  top: 470px;          /* Distance from the top edge */
  left: 50px;        /* Distance from the left edge */

  background-color: #c0c0c0;
  border: 2px solid #f0f0f0;
  border-right-color: #303030;
  border-bottom-color: #303030;
  padding: 3px;
  box-shadow: inset 1px 1px 0 #dbdbdb, 1px 1px 0 #303030;
  margin: auto;
}

#socials-body { /* INSIDE OF WINDOW */
  background-color: #fff;
  border: inset 1.5px #808080;
  border-left-color: #b3b3b3;
  border-top-color: #b3b3b3;
  padding: 15px;
  height: 175px;
  width: 175px;
  color: #000;
  
  position: relative;
}








/*Seal*/
/*Seal*/
/*Seal*/
/*Seal*/
/*Seal*/
#seal-window { /* FULL WINDOW */
  top: 180px;          /* Distance from the top edge */
  left: 50px;        /* Distance from the left edge */

  background-color: #c0c0c0;
  border: 2px solid #f0f0f0;
  border-right-color: #303030;
  border-bottom-color: #303030;
  padding: 3px;
  box-shadow: inset 1px 1px 0 #dbdbdb, 1px 1px 0 #303030;
  margin: auto;
}

#seal-body { /* INSIDE OF WINDOW */
  background-color: #7a7a7a;
  border: inset 1.5px #808080;
  border-left-color: #b3b3b3;
  border-top-color: #b3b3b3;
  padding: 15px;
  height: 200px;
  width: 400px;
  color: #000;
  
  position: relative; 
}
              #recording-overlay {
                color: red;
                z-index: 20;
              }
              
              /* The actual vignette layer */
              #seal-body::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none; /* Allows user to still right-click/drag the image */
                background: radial-gradient(55% 55% at 52%,rgba(5, 5, 5, 0) 20%, rgba(15, 15, 15, 0.5) 66%, rgba(0, 0, 0, 0.9) 100%);
              }

              @media screen and (min-width: 768px) {
                .seal img:hover {
                cursor: pointer;
                height: auto;
                transform-origin: 40%;
                transform: rotate(-5deg);
                }
              }
              
              .seal img:active {
                cursor: pointer;
                transform: scale(1.1, 0.8); 
              }
                
              .seal {
                position: absolute;
                display: block;
                margin: auto;
                bottom: 15%;
                left: 15%;
              }
             
              .seal img {                                 /*SEAL IMAGE SIZE*/
                width: 100%; 
              }





/*Me*/
/*Me*/
/*Me*/
/*Me*/
/*Me*/
/*Me*/
#me-window { /* FULL WINDOW */
  top: 800px;          /* Distance from the top edge */
  left: 100px;        /* Distance from the left edge */

  background-color: #c0c0c0;
  border: 2px solid #f0f0f0;
  border-right-color: #303030;
  border-bottom-color: #303030;
  padding: 3px;
  box-shadow: inset 1px 1px 0 #dbdbdb, 1px 1px 0 #303030;
  margin: auto;
}

#me-body { /* INSIDE OF WINDOW */
  background-color: #fff;
  border: inset 1.5px #808080;
  border-left-color: #b3b3b3;
  border-top-color: #b3b3b3;
  padding: 15px;
  height: 50px;
  width: 80px;
  color: #000;
  
  position: relative;
}







/*Clock*/
/*Clock*/
/*Clock*/
/*Clock*/
/*Clock*/
/*Clock*/
#clock-window { /* FULL WINDOW */
  top: 50px;          /* Distance from the top edge */
  left: 50px;        /* Distance from the left edge */

  background-color: #c0c0c0;
  border: 2px solid #f0f0f0;
  border-right-color: #303030;
  border-bottom-color: #303030;
  padding: 3px;
  box-shadow: inset 1px 1px 0 #dbdbdb, 1px 1px 0 #303030;
  margin: auto;
}

#clock-body { /* INSIDE OF WINDOW */
  background-color: #121212;
  border: inset 1.5px #808080;
  border-left-color: #b3b3b3;
  border-top-color: #b3b3b3;
  padding: 20px;
  height: 30px;
  width: 110px;
  color: #fff;

  position: relative;
}

                        .clock {
                          display: flex;
                          justify-content: center; /* Horizontally centers */
                          align-items: center;     /* Vertically centers */
                          
                          letter-spacing: 1px;
                          font-family: DSDigi;
                          font-size: 2rem;
                          color: rgba(255, 6, 3, 1);
                          
                          text-shadow: 
                            0 0 5px rgba(255, 10, 10, 0.6),
                            0 0 10px rgba(255, 10, 10, 0.6),
                            0 0 20px rgba(255, 10, 10, 0.4),
                            0 0 40px rgba(255, 10, 10, 0.3),
                            0 0 80px rgba(255, 10, 10, 0.1);
                            
                          animation: clock-flicker-animation 0.5s infinite;
                        }
                        
                                @keyframes clock-flicker-animation {
                                  0%   { opacity: 0.9; }
                                  5%   { opacity: 0.85; }
                                  10%  { opacity: 0.9; }
                                  15%  { opacity: 0.9; } /* Brief heavy drop */
                                  20%  { opacity: 0.75; }
                                  25%  { opacity: 0.9; }
                                  30%  { opacity: 0.85; }
                                  35%  { opacity: 0.8; }
                                  40%  { opacity: 0.8; }
                                  45%  { opacity: 0.9; }
                                  50%  { opacity: 0.9; }
                                  55%  { opacity: 0.75; }
                                  60%  { opacity: 0.9; }
                                  65%  { opacity: 0.9; }
                                  70%  { opacity: 0.9; } /* Near perfect clarity */
                                  75%  { opacity: 0.75; }
                                  80%  { opacity: 0.9; }
                                  85%  { opacity: 0.8; }
                                  90%  { opacity: 0.85; }
                                  95%  { opacity: 0.8; }
                                  100% { opacity: 0.9; }
                                }
                        
                        #ampm {
                          font-size: 1rem; 
                          margin: 2px;
                          transform: translate(0,30%)
                        }
                        
                        #seconds {
                          font-size: 1rem; 
                          margin-left: 2px;
                          transform: translate(0,30%)
                        }
                        
                        .colon {
                          font-family: DSDigiBold;
                          font-size: 1.5rem; 
                          margin-left: 2px;
                        }












/* CRT FLICKER AND SCANLINE EFFECT*/
.crt-flicker {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(5, 5, 5, 0.07);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  /* Rapid, infinite animation loop */
  animation: crt-flicker-animation 1s infinite; 
}

                          @keyframes crt-flicker-animation {
                            0%   { opacity: 0.2; }
                            5%   { opacity: 0.3; }
                            10%  { opacity: 0.2; }
                            15%  { opacity: 0.9; } /* Brief heavy drop */
                            20%  { opacity: 0.1; }
                            25%  { opacity: 0.5; }
                            30%  { opacity: 0.6; }
                            35%  { opacity: 0.2; }
                            40%  { opacity: 0.5; }
                            45%  { opacity: 0.6; }
                            50%  { opacity: 0.1; }
                            55%  { opacity: 0.7; }
                            60%  { opacity: 0.3; }
                            65%  { opacity: 0.9; }
                            70%  { opacity: 0.05; } /* Near perfect clarity */
                            75%  { opacity: 0.2; }
                            80%  { opacity: 0.4; }
                            85%  { opacity: 0.1; }
                            90%  { opacity: 0.8; }
                            95%  { opacity: 0.2; }
                            100% { opacity: 0.9; }
                          }

.crt-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 3px;
  z-index: 1;
  pointer-events: none;
}









/* COLOR FRINGE EFFECT*/
.colorfringe-text {
  position: relative;
  /* Shadow splits: Red, Green, and Blue */
  text-shadow: 
    -1.5px 0 0 rgba(255, 0, 0, 0.4), 
    1.5px 0 0 rgba(0, 255, 0, 0.4), 
    3px 0 0 rgba(0, 0, 255, 0.4);
}
.colorfringe-box {
  position: relative;
  /* Shadow splits: Red, Green, and Blue */
  box-shadow: 
    -1.5px 0 0 rgba(255, 0, 0, 0.4), 
    1.5px 0 0 rgba(0, 255, 0, 0.4), 
    3px 0 0 rgba(0, 0, 255, 0.4);
}













/* GRAINY BG*/
.grain-bg {
  position: fixed;
  z-index: 999;
  pointer-events: none; 
  
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200%;
  background-image: url('/assets/grain/whitegrain.png');
  opacity: 0.3;
  
  animation: grain-animate 1s steps(1) infinite;
}
@keyframes grain-animate {
  0%, 100% { transform: translate(1, 1); }
  10% { transform: translate(-1%, -2%); }
  20% { transform: translate(-3%, 1%); }
  30% { transform: translate(2%, -4%); }
  40% { transform: translate(-2%, 3%); }
  50% { transform: translate(1%, -1%); }
  60% { transform: translate(-3%, -2%); }
  70% { transform: translate(4%, 2%); }
  80% { transform: translate(-1%, -3%); }
  90% { transform: translate(2%, 1%); }
}











/* UNSELECTABLE SETTINGS*/
.unselectable {
  -webkit-user-select: none; /* Safari, iOS Safari */
  -moz-user-select: none;    /* Older Firefox versions */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Modern browsers (Chrome, Firefox, Opera) */  
  
  -webkit-touch-callout: none; /* Disables the long-press menu on iOS Safari */
  
  -webkit-tap-highlight-color: transparent; /* Transparent on tap */
  
  -webkit-user-drag: none;
}