/* body{background-color: black;} */
:root {
  --body-color: rgb(0, 0, 0);
  --bg-color: rgb(255, 255, 255);
  --link-color: rgb(255, 102, 0);
  --titles-color: rgb(241, 1, 1);
  --title-second-color: rgb(33, 0, 151);
  --cur1: url("https://github.com/tutosrive/images-projects-srm-trg/raw/main/svg-icons-flags-cursor/cursors/cursor1.svg");
}

@font-face {
  font-family: "copyduck";
  src: url("../Copyduck.otf");
}

body {
  overflow-x: hidden;
  color: var(--body-color);
  width: 100%;
  background-color: var(--bg-color);
  font-family: Verdana Geneva, Tahoma, sans-serif;
  padding: 13px 55px;
  box-sizing: border-box;
}

.dark-theme {
  --body-color: rgb(221, 221, 221);
  --bg-color: black;
  color-scheme: dark;
  --link-color: rgb(204, 14, 0);
  --pre-color: rgb(255, 255, 255);
}

.cursor1:hover {
  cursor: var(--cur1), auto;
}

.centered {
  text-align: center;
}

nav {
  background-color: transparent;
  border-radius: 20px;
  box-shadow: 1px 1px 12px var(--body-color);
  display: inline-block;
  padding: 4px;
}

nav img {
  filter: drop-shadow(1px 1px 1px red);
  max-width: 50px;
  vertical-align: middle;
  padding: 5px;
  margin: auto 10px;
}

.nav-link {
  display: inline-block;
  text-decoration: none;
  color: var(--body-color);
}

.language-container {
  width: 20px;
  text-align: center;
  align-items: end;
}

.flag {
  width: 20px;
}

.radio-language {
  display: none;
}

.title-main {
  color: var(--titles-color);
  filter: drop-shadow(2px 2px 3px black);
  font-family: "copyduck";
  font-size: xx-large;
  margin: 20px auto 10px auto; /* ← MARGIN ARREGLADO */
  text-align: center;
}

div {
  margin: 45px auto;
}

pre {
  background-color: rgb(34, 34, 34);
  color: wheat;
  padding: 12px;
  border-radius: 12px;
  display: inline-block;
}

h2 {
  color: var(--title-second-color);
  font-family: Impact, Arial, Helvetica, sans-serif;
  font-weight: 500;
}

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

.dropdown {
  position: fixed;
  margin: auto auto auto calc(100% - 110px);
  top: 12px;
  z-index: 3;
}

.dropdown-content-1 {
  display: none;
  position: absolute;
  min-width: 56px;
  filter: drop-shadow(1px 1px 2px rgb(0, 0, 255));
  z-index: 7;
  margin: 0px 0px 0px -40px;
}

.dropdown-content-1 label {
  display: block;
  padding: 8px 16px;
  cursor: help;
}

.dropdown-content-1 label:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content-1 {
  display: block;
}

.lan-pdf2 {
  position: relative !important;
}

.lan-pdfto {
  position: relative !important;
}

.dropdown-2 {
  position: absolute;
  margin: 12px auto auto calc(10% - 10px);
  display: inline-block;
}

.dropdown-content-2 {
  display: none;
  position: absolute;
  min-width: 160px;
  filter: drop-shadow(1px 1px 2px black);
  z-index: 1;
  margin: auto -223px auto auto;
}

.dropdown-content-2 label {
  display: inline-block;
  padding: 8px 16px;
  cursor: help;
}

.container-flags {
  display: inline-flex;
  margin: auto auto auto 5px;
}

.dropdown-content-2 label:hover {
  background-color: #f1f1f1;
}

.dropdown-2:hover .dropdown-content-2 {
  display: inline-flex;
}

.dropdown-3 {
  position: absolute;
  margin: 12px auto auto 9%;
  display: inline-block;
}

.dropdown-content-3 {
  display: none;
  position: absolute;
  min-width: 160px;
  filter: drop-shadow(1px 1px 2px black);
  z-index: 1;
  margin: auto -223px auto auto;
}

.dropdown-content-3 label {
  display: block;
  padding: 8px 16px;
  cursor: help;
}

.dropdown-content-3 label:hover {
  background-color: #f1f1f1;
}

.dropdown-3:hover .dropdown-content-3 {
  display: inline-flex;
}

.spam-download {
  box-shadow: 1px 1px 3px var(--body-color);
  padding: 22px;
  width: 40%;
  height: 110px;
  border-radius: 23px;
  text-align: left;
}

.spam-download > div {
  transform: translateY(-42px);
  width: 290px;
}

.img-lan {
  filter: drop-shadow(1px 1px 5px rgb(255, 0, 0));
  max-width: 100%;
}

.color-selector {
  background-color: transparent;
  border: none;
  box-sizing: content-box;
  filter: drop-shadow(1px 3px 1px var(--body-color));
  position: fixed;
  top: 98px;
  margin: auto auto auto calc(100% - 120px);
  display: block;
  z-index: 1;
}

.moon-theme {
  position: fixed;
  margin: auto auto auto calc(100% - 115px);
  top: 50px;
  display: block;
  filter: drop-shadow(2px 2px 4px rgb(255, 0, 0));
  z-index: 1;
}

/* ????????? */

/* Responsive Styles */
@media screen and (max-width: 768px) {
  .autor {
    transform: translateX(12px);
    text-align: center;
  }
  .autor > pre {
    display: inline-block;
    width: 50%;
  }
  .title-main {
    transform: translateY(-50px);
    font-size: 2rem;
    /* Adjust font size for smaller screens */
  }

  body {
    padding: 2rem;
    /* Less padding on smaller screens */
    zoom: 80%;
    font-size: 25px;
  }

  nav {
    padding: 0.5rem;
    /* Reduced padding */
  }

  .spam-download {
    width: 90%;
    /* Morewidth on smaller screens */
    height: 225px;
  }

  .dropdown {
    margin: 115px 9px;
    /* Adjust dropdown position */
  }

  .flag {
    width: 20px;
    zoom: 1.4;
  }

  .dropdown-content-1 {
    display: none;
    position: absolute;
    min-width: 56px;
    filter: drop-shadow(1px 1px 2px rgb(0, 0, 255));
    z-index: 7;
    margin: -25px 0px 0px 31px;
  }

  .dropdown-content-1 label {
    display: block;
    padding: 8px 16px;
    cursor: help;
  }

  .dropdown-content-1 label:hover {
    background-color: #f1f1f1;
  }

  .dropdown:hover .dropdown-content-1 {
    display: block;
  }

  .moon-theme {
    top: 50px;
    margin: 35px 5px;
  }

  pre {
    /* width: 100%; */
    /* transform: translateX(-32px); */
    text-align: left;
    overflow-x: scroll;
  }
}

@media screen and (max-width: 576px) {
  .title-main {
    font-size: 1.5rem;
    /* Further reduce for small screens */
  }

  nav img {
    max-width: 40px;
    /* Smaller images */
  }
  pre {
    width: 100%;
    transform: translateX(-32px);
    text-align: left;
    overflow-x: scroll;
  }
}

@media screen and (max-width: 320px) {
  .title-main {
    font-size: 1.2rem;
    /* Minimized title font */
  }
  pre {
    width: 100%;
    transform: translateX(-32px);
    text-align: left;
    overflow-x: scroll;
  }
}