:root {
   --bgcolor:           #ffffff; /* White          */
   --border-radius:     12px;
   --button-color:      #3366cc; /* Blue           */
   --buttontheme-color: #404040; /* Gray           */
   --buttonup-color:    #1b9ff1; /* Calypso        */
   --font-size0:        22px;
   --font-size1:        27px;
   --font-size2:        60px;
   --font-size3:        40px;
   --font-size4:        30px;
   --font-size5:        20px;
   --font-size6:        12px;
   --image-brightness:  100%;    /* Natural image  */
   --link-color:        #3366cc; /* Blue           */
   --max-width:         1140px;
   --text-color1:       var(--bgcolor);
   --text-color2:       #101418; /* Dark Gray      */
   --text-color3:       #ff0000; /* Red            */
   --text-color4:       #7ad06d; /* WhatsApp Green */

   /* Form */
   --border-color:      #808080; /* Gray           */
   --button-bg-color1:  var(--button-color);
   --button-bg-color2:  var(--button-color);
   --button-fg-color:   var(--text-color1);
   --font-color:        var(--text-color2);
   --form-color1:       #e0e0e0; /* Dark White     */
   --form-color2:       #f0f0f0; 
   --input-color:       var(--font-color);
   --text-color:        var(--font-color);
}

/************************************************************************
L A B E L   S E L E C T O R S
************************************************************************/
body {
   background-color:    var(--bgcolor);     /* Optional: Helps visualize the container area while designing */
   box-sizing:          border-box;         /* Force the padding to stay INSIDE the usable width */
   color:               var(--text-color2);
   font-size:           var(--font-size1);
   margin:              0 auto;             /* Center the container horizontally on the screen */
   max-width:           var(--max-width);
   padding:             3px 10px 3px 10px;  /* Top | Right | Bottom | Left */
   position:            relative;
   transition:          background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
   width:               100%;               /* Ensure that on mobile screens the content does not touch the edges */
}

h1 {
   color:               var(--text-color1);
   font-family:         Georgia, serif;
   font-size:           var(--font-size2);
}

h2 {
   margin-bottom:       0;
   margin-top:          0; /* Optional: Also remove the space above if needed */
}

h3 {
   margin-bottom:       0;
   margin-top:          0; /* Optional: Also remove the space above if needed */
}

hr.new {
   border:              none;
/* border-top:          1px; */
   border-top:          2px solid var(--text-color2);
/* color:               var(--link-color); */
   opacity:             40%;
}

html {
   scroll-behavior:     smooth;
}

html.dark-mode .container-image1 img {
   -webkit-filter:      brightness(40%)     !important;
   filter:              brightness(40%)     !important;
}

html.dark-mode {
   --bgcolor:           #181a1b             !important; /* Light black    */
   --button-color:      #038857             !important; /* Green          */
   --buttontheme-color: #4d4d4d             !important; /* Gray           */
   --image-brightness:  40%;
   --link-color:        #3391ff             !important; /* Light Blue     */
   --text-color1:       #ffffff             !important;
   --text-color2:       #C0C0C0             !important; /* Winter white   */

   /* Form */
   --border-color:      #787878             !important; /* Gray           */
   --button-bg-color1:  var(--button-color) !important;
   --button-bg-color2:  var(--button-color) !important;
   --button-fg-color:   var(--text-color2)  !important;
   --font-color:        var(--text-color2)  !important;
   --form-color1:       #252525             !important; 
   --form-color2:       #3b3b3b             !important;
}

pre {
   display:             block;
   font-family:         monospace;
   font-size:           var(--font-size0);
   white-space:         pre;
   margin:              1em 0;
}

table, th, td {
   border-collapse:     collapse;
   border:              1px solid var(--text-color2);
   max-width:           100%;
   width:               auto;
}

th, td {
   padding:             10px;
}

video {
   height:              auto;
   width:               60%;
}

/************************************************************************
C L A S S E S
************************************************************************/
.active.dot, .hover.dot {
   background-color:    var(--text-color1);
}

.arrow-left {
   left:                20px;
}

.arrow-right {
   right:               20px;
}

.btn-up {
   align-items:         center;
   background-color:    var(--buttonup-color);
   border-radius:       50%;
   bottom:              20px;
   box-shadow:          0 2px 5px rgba(0, 0, 0, 0.3);
   color:               var(--text-color1) !important;
   display:             flex;
   font-size:           50px;
   height:              60px;
   justify-content:     center;
   opacity:             0;
   position:            fixed;
   right:               20px;
   text-decoration:     none;
   transition:          background-color 0.3s;
   visibility:          hidden;
   width:               60px;
   z-index:             1000;
}

.btn-up:active, .btn-up:hover, .btn-up:visited {
   color:               var(--text-color1) !important;
   text-decoration:     none               !important;
} 

.btn-up.visible {
   opacity:             1;
   visibility:          visible;
}

.button-link:link, .button-link:visited, .button-link:hover, .button-link:active  {
   background-color:    var(--button-color);
   border:              none;
   color:               var(--text-color1);
   cursor:              pointer;
   display:             inline-block;
   font-family:         sans-serif;
   font-size:           var(--font-size1);
   margin:              4px 2px;
   padding:             12px;
   text-align:          center;
   text-decoration:     none;
}

.button4 {
   border-radius:       var(--border-radius);
}

.container-image1 {
   display:             inline-block;
   max-width:           1140px;
   position:            relative;
   width:               100%;
}

.container-image1 img {
   -webkit-filter:      none !important; /* Compatibility with older Safari/Chrome versions */
   border-radius:       var(--border-radius);
   display:             block;
   filter:              none !important;
   height:              auto;
   opacity:             1    !important; /* If something made it opaque, this makes it transparent */
   transition:          filter 0.3s ease;
   width:               100%;
}

.container-image2 {
   display:             inline-block;
   max-width:           1140px;
   position:            relative;
   width:               100%;
}

.container-image2 img {
   border-radius:       var(--border-radius);
   display:             block;
   filter:              brightness(100%);
   height:              auto;
   width:               100%;
}

.dot {
   background-color:    rgba(255, 255, 255, 0.5);
   border-radius:       50%;
   cursor:              pointer;
   height:              12px;
   transition:          background-color 0.3s;
   width:               12px;
}

.enlace-limpio::before, .enlace-limpio::after {
  content:              ""   !important;
  display:              none !important;
}

.faint-frame {
  background-color:     var(--bgcolor);               /* Ensure that the distance is strictly white */
  border:               1px solid var(--text-color2); /* The dark and thin frame (you can use #000000 for pure black) */
  box-sizing:           border-box;                   /* It keeps the object's size under control. */
  margin-left:          auto !important;
  margin-right:         auto !important;
  padding:              10px;                         /* The distance in white before the object */
}

.link-hidden:link, .link-hidden:visited, .link-hidden:hover, .link-hidden:active {
   color:               var(--text-color2);
   text-decoration:     none;
}

.no-wrap {
   white-space:         nowrap;
}

.p1 {
   font-family:         Georgia, serif;
}

.p2 {
   font-family:         Caveat, serif;
   font-size:           var(--font-size3);
   color:               var(--text-color3);
}

.p3 {
   color:               var(--text-color2);
   font-family:         Verdana, sans-serif;
   font-size:           var(--font-size5);
}

.p4 {
   color:               var(--text-color2) !important;
   display:             block;
   font-family:         Georgia, serif;
   font-size:           var(--font-size3);
}

.p4 a.link-hidden,.p4 a.link-hidden:link, .p4 a.link-hidden:visited {
   color:               var(--text-color2) !important;
   text-decoration:     none !important;
}

.p4 a.link-hidden:hover, .p4 a.link-hidden:active {
   color:               var(--text-color2) !important;
   text-decoration:     none !important;
}

.p5 {
   margin-bottom:       0;
   margin-top:          0; /* Optional: Also remove the space above if needed */
}

.p6 {
   color:               var(--text-color2) !important;
}

.slide {
   box-sizing:          border-box;
   min-width:           100%;
}

.slide img {
   display:             block;
   height:              auto;
   object-fit:          cover;
   width:               100%;
}

.slider-arrow {
   background-color:    rgba(0, 0, 0, 0.5);
   border-radius:       50%;
   border:              none;
   color:               var(--text-color1);
   cursor:              pointer;
   font-size:           20px;
   padding:             15px;
   position:            absolute;
   top:                 50%;
   transform:           translateY(-50%);
   transition:          background-color 0.3s;
}

.slider-arrow:hover {
   background-color:    rgba(0, 0, 0, 0.8);
}

/* Sliders Properties */
.slider-container {
   border-radius:       var(--border-radius);
   box-shadow:          0 4px 10px rgba(0, 0, 0, 0.2);
   margin:              auto;
   max-width:           800px;
   overflow:            hidden;
   position:            relative;
   width:               40%;
}

.slider-dots {
   bottom:              15px;
   display:             flex;
   gap:                 10px;
   left:                50%;
   position:            absolute;
   transform:           translateX(-50%);
}

.slider-slides {
   display:             flex;
   transition:          transform 0.6s ease-in-out;
   width:               100%;
}

.table-container {
   -webkit-overflow-scrolling:
                        touch;
   overflow-x:          auto;
   width:               100%;
}

.text-layer {
   align-items:         center;
   bottom:              20px;
   display:             flex;
   flex-direction:      column;
   height:              100%;
   justify-content:     center;
   left:                0;
   padding-left:        0px;
   padding-right:       0px;
   position:            absolute;
   text-align:          center;
   top:                 0;
   width:               100%;
}

.text-layer h1 {
   margin-top:          10px;
   margin-bottom:       10px;
}

.text-layer p {
   color:               var(--text-color2);
   margin-bottom:       0;
   margin-top:          0; /* Remove the default space above */
}

.text-layer .p4, .text-layer .p4 a.link-hidden, .text-layer .p4 a.link-hidden:active, .text-layer .p4 a.link-hidden:hover,.text-layer .p4 a.link-hidden:link, .text-layer .p4 a.link-hidden:visited, .text-layer .p6 {
   color:               var(--text-color1) !important;
}

/* Basic aesthetic style for the button */
.theme-btn {
   align-items:         center;
   background:          #e0e0e0;
   background:          var(--buttontheme-color);
   border-radius:       50%;
   border:              none;
   cursor:              pointer;
   display:             flex;
   font-size:           1.2rem;
   height:              50px;
   justify-content:     center;
   position:            absolute;
   right:               10px;
   top:                 21px;
   transition:          background 0.3s;
   width:               50px;
}

/* A class that visually hides the element but keeps it accessible */
/* Necessary for pages other than "index.html" that do not contain the <h1> tag */
.visual-hidden {
   border:              0;
   clip:                rect(0, 0, 0, 0);
   height:              1px;
   margin:              -1px;
   overflow:            hidden;
   padding:             0;
   position:            absolute;
   width:               1px;
}

/* Form */
.capitalize-input {
   text-transform:      capitalize;
}

/* Form */
.container {
   background-color:    var(--form-color1);
   border-radius:       var(--border-radius);
   font-family:         "Arial, Helvetica, Verdana, sans-serif";
   padding:             20px;
}

/* Form */
.lowercase-input {
   text-transform:      lowercase;
}

/* Form */
.uppercase-input {
   text-transform:      uppercase;
}

/************************************************************************
P S E U D O   C L A S S E S
************************************************************************/
a:active {
   color:               var(--link-color);
   text-decoration:     underline;
}

a:hover {
   color:               var(--link-color);
   text-decoration:     underline;
}

a:link {
   color:               var(--link-color);
   text-decoration:     none;
}

a:visited {
   color:               var(--link-color);
   text-decoration:     none;
}

/************************************************************************
S E L E C T O R S
************************************************************************/
a[href^="https"]:not([href*="neocities.org"])::after {
  -webkit-mask-image:   url('../img/external-link.svg'); /* Use the SVG as a clipping mask */
  -webkit-mask-mode:    alpha;
  -webkit-mask-size:    contain;
  background-color:     currentColor;
  content:              "";
  display:              inline-block;
  height:               1em;
  margin-left:          1px;
  mask-image:           url('../img/external-link.svg');
  mask-mode:            alpha;
  mask-size:            contain;
  vertical-align:       middle;
  width:                1em;
}

/* Form */
input[type="text"], input[type="email"], select, textarea {
   background-color:    var(--form-color2);
   border:              2px solid var(--border-color);
   border-radius:       6px;
   box-sizing:          border-box;
   color:               var(--font-color);
   font-family:         "Lucida Console", "Courier New", monospace;
   font-size:           var(--font-size1);
   margin-bottom:       16px;
   margin-top:          6px;
   padding:             2px;
   resize:              vertical;
   width:               100%;
}

/* Form */
input[type=submit] {
   -moz-appearance:     none                    !important;
   -webkit-appearance:  none                    !important;
   background-color:    var(--button-bg-color1);
   border:              none                    !important; 
   box-sizing:          border-box              !important; 
   color:               var(--button-fg-color);
   cursor:              pointer;
   display:             inline-block;
   font-size:           var(--font-size1);
   line-height:         normal                  !important; 
   margin:              4px 2px;
   padding:             12px 24px               !important;
   text-align:          center;
   text-decoration:     none;
   transition:          background-color 0.2s ease, color 0.2s ease;
}

/* Form */
input[type=submit]:hover {
   background-color:    var(--button-bg-color2) !important;
   border:              none                    !important; 
   color:               var(--button-fg-color)  !important;
   font-size:           var(--font-size1);
   letter-spacing:      normal                  !important;
   margin:              4px 2px;
   padding:             12px 24px               !important;
   transform:           none                    !important;
   white-space:         nowrap                  !important;
}

input[type=submit]::-moz-focus-inner {
   border:              0;
   letter-spacing:      normal                  !important;
   padding:             0;
   white-space:         nowrap                  !important;
}

/************************************************************************
M O B I L   P R O P E R T I E S
************************************************************************/
@media (max-width: 768px) {
   /*********************************************************************
   L A B E L   S E L E C T O R S
   *********************************************************************/
   body {
      --font-size0:     20px;
      --font-size1:     18px;
      --font-size2:     40px;
      background-color: var(--bgcolor);
      color:            var(--text-color2);
      font-family:      Georgia, serif;
      font-size:        var(--font-size1);
   }

   pre {
      display:          block;
      font-family:      monospace;
      font-size:        var(--font-size6);
      margin:           1em 0;
      white-space:      pre;
   }

   table {
      min-width:        400px;
   }

   video {
      height:           auto;
      width:            100%;
   }

   /*********************************************************************
   C L A S S E S
   *********************************************************************/
   .p2 {
      color:            var(--text-color3);
      font-family:      Caveat, serif;
      font-size:        var(--font-size4);
   }

   .p4 {
      display:          none; /* Hide the default arrow on small screens */
      font-family:      Georgia, serif;
   }

   .slider-container {
      width:            100%;
   }

/* Reduce the space below the title */
   .text-layer h1 {
      color:            var(--text-color1);
/*    margin-bottom:    14px; */ /* Minimum space downwards */
      margin-bottom:    00px;    /* Minimum space downwards */
      margin-top:       0;
   }
}