@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&family=Source+Code+Pro:wght@200;300;400;500;600;900&display=swap");

 * {
     /* Evite que cualquier objeto se resalte al tocar el evento*/
     -webkit-tap-highlight-color: #00000000;
     user-select: none;
     transition: all 0.5s ease;
     font-family: "Open Sans";
     color: #819bb394;
     font-size: 12px;
 }

 :root {
     --bg-color: #141F5D;
 }

 body {
     position: relative;
     display: flex;
     font-family: "Open Sans";
     line-height: 1.7;
     background-color: var(--bg-color);
     flex-direction: column;
     flex-wrap: nowrap;
     justify-content: flex-start;
     align-items: center;
     overflow-x: hidden;
 }

 #content {
     position: absolute;
     display: flex;
     justify-content: center;
     flex-direction: column;
     flex-wrap: nowrap;
     width: 100%;
     left: 0px;
     top: 140px;
 }

 ::-webkit-scrollbar {
     width: 5px;
     height: 8px;
     background: #1d1c1c0c;
 }

 ::-webkit-scrollbar-track {
     border: 0px solid #000000;
     border-radius: 10px;
 }

 ::-webkit-scrollbar-thumb {
     background: #02122570;
     border-radius: 5px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: #363636;
 }

 /* Estilo del overlay oscuro */
 #overlay {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     background-color: #0e143a;
     z-index: 9999;
     transition: opacity 1s ease;
     /* Transición de desvanecimiento */
 }

 #logo_trans {
     position: absolute;
     display: none;
     top: 35%;
     left: 40%;
     width: 20%;
     height: 150px;
     background-color: #0e0a2200;
     z-index: 9999;
     transition: opacity 1s ease;
     background-image: url(/deeavid.com/ext.deeavid.com/image/logo/logo.png);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center center;
     overflow: hidden;
 }

 /* Clase para ocultar el overlay */
 .hidden {
     opacity: 0;

 }

 @media screen and (max-width: 600px) {
     #logo_trans {
         position: absolute;
         display: none;
         top: 35%;
         left: 25%;
         width: 50%;
         height: 150px;
         background-color: rgba(140, 37, 37, 0);
         z-index: 9999;
         transition: opacity 1s ease;
         background-image: url(/deeavid.com/ext.deeavid.com/image/logo/logo.png);
         background-repeat: no-repeat;
         background-size: contain;
         background-position: center center;
         overflow: hidden;
     }
 }