/* MOBILE */
/* MOBILE */
/* MOBILE */



/* Mobile Styles */
@media (max-width: 767px) {
  /* Layout changes */
  .layout {
    flex-direction: column;
  }


body {
  font-size: 2.5vw;
}

  h1,
  h2,
  h3 {
    color: #ffffff;
    margin: 0;
    font-size: 2.5vw;
  }
  
  span,
  p,
  table, a {
    font-size: 2.5vw;
    color: #ffffff;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    letter-spacing: normal;
    text-decoration: none;
  
  }


  pre {
    position: fixed;
    margin:0;
    padding:0;
    left:0;
    top:0;
    width:100%;
    height:100%;
    font-family: 'TronicaMono', monospace;
    z-index: 0;
  }

  span {
    color: #191919;
  }


/* ------------------------- BUTTON STYLE ------------------------- */
/* ------------------------- BUTTON STYLE ------------------------- */
/* ------------------------- BUTTON STYLE ------------------------- */

.button{
  color: #ffffff;
  text-align: left;
  z-index: 10000000000;
  font-size: 2.5vw;
}

.button a:hover{
  background-color: #ffffff;
  color: #000;
}
.button a{
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.alphabet-index {
  color: #ffffff;
  text-align: left;
  z-index: 10000000000;
  font-size: 2.5vw !important;
}

.alphabet-index a:hover{
  color: #000000;
  background-color: #ffffff;
  z-index: 10000000000;
}

.alphabet-trigger {
  font-size: 2.5vw !important;
}





  /* Header modifications */
  .main-header {
    width: 100%;
    position: fixed;
    height: auto;
    padding: 1.5rem 0.5rem 0.5rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    align-items: flex-start;
  }

  /* Logo adjustments */
  .logo {
    margin: 0;
    
  }

  /* Hide default navigation */
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #00000000;
    z-index: 10000000;
    padding: 0.5rem;
    width: 100%;
  }

  /* Show menu when active */
  .nav-menu.active {
    display: block;
    width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .nav-menu.active::after {
    content: "~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/~/";
    display: block;
    white-space: nowrap;
    color: #ffffff;
    font-size: 2.5vw;
    line-height: 2;
    overflow: hidden;
  }


  .nav-menu a:hover, .nav-menu a.active {
    background-color: #ffffff;
    color: #000000;
  }


  /* Index button */
  .menu-toggle {
    color: #ffffff;
    background: none;
    border: none;
    font-family: "TronicaMono";
    font-size: 2.5vw;
    cursor: pointer;
    text-transform: uppercase;
    display: block;
    padding: 0.1rem;
    transition: transform 0.1s;
  }

  .menu-toggle::before {
    content: ">";
    display: inline-block;
    transition: transform 0.1s;
  }

  .menu-toggle.active::before {
    transform: rotate(90deg);
}

  .menu-toggle:hover {
    background-color: hsl(0, 0%, 100%);
    color: #000000;
  }

  /* Navigation items */
  .nav-menu ul {
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .nav-menu a {
    display: block;
    padding: 0.1rem;
    }

  /* Main content adjustments */
  .main-content {
    width: 100%;
    margin-left: 0;
    padding: 1rem;
  }

  /* Header info section */
  .header-info {
    display: none;
  }

  /* File path adjustments */
  .file-path {
    display: none;
  }


/* -------------- MANIFESTO -------------- */
/* -------------- MANIFESTO -------------- */
/* -------------- MANIFESTO -------------- */

.manifest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem; /* spazio tra gli elementi */
  color: #ffffff;
  height: 100%;
  box-sizing: border-box;
  padding: 0rem 0rem 0rem 0rem;
}

.manifest h1 {
  margin: 0;
}

.manifest p {
  line-height: 1.2;
}

.manifest br {
  content: "";
  display: block;
  margin: 1rem 0; /* spazio dopo ogni <br> */
}


/* -------------- ARCHIVE -------------- */
/* -------------- ARCHIVE -------------- */
/* -------------- ARCHIVE -------------- */

 /* Archive table adjustments */
 .archive {
  padding-top: 4rem;
  margin: 0;
}

.archive table {
  width: 100%;
}

.main-content-archive {
  margin: 0;
  padding: 2rem 0.5rem;
}

/* Hide non-essential columns */
.archive th:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),:not(:nth-child(8))
.archive td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(8)) {
  display: none;
}

/* Style remaining columns */
.archive th,
.archive td {
  padding: 0.1rem 0rem;
  font-size: 2.5vw;
}

/* Adjust column widths */
.archive td:nth-child(1) { /* ID */
  /* width: 25%; */
}
.archive td:nth-child(2) { /* DATE */
/*   width: 35%;
 */}
.archive td:nth-child(5) { /* PLATFORM */
/*   width: 20%;
 */}

/* Remove extra spacing */
.archive tbody tr:last-child td {
  border-bottom: none;
}


/* -------------- MAIN -------------- */
/* -------------- MAIN -------------- */
/* -------------- MAIN -------------- */

.main-content{
  display: flex;
  flex-direction: column;
  padding: 6rem 0.5rem 4rem 0.5rem;
  flex: 1; /* occupa tutto lo spazio disponibile */
  z-index: 1000;
  gap: 8rem;
  width: 100%;
  margin: 0;
}

#responsive {
  display: none;
}


.home {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.graph-container {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: auto;
  gap: 0rem;
}

.table-row::before{
  font-size: 2.5vw;
}

.table-header {
  font-size: 2.5vw;
}

.chart {
  color: #ffffff;
  font-family: tronicaMono;
  margin: 0;
  font-size: 2.5vw;
}

.divisorio {
  display: block;
}

.divisorio::after {
  content: '_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_/\\_';
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: clip;
  font-family: 'TronicaMono', monospace;
  color: #ffffff;
}

.divisoriodesktop {
  display: none;
}



.ascii-subtitle {
  display: inline-block;
  animation: scrollText 10s steps(18) infinite;
  color: #ffffff;
  font-family: "TronicaMono";
  font-size: 2.5vw;
}

.ascii-title {
  display: inline-block;
  animation: scrollText 10s steps(18) infinite;
  color: #ffffff;
  font-family: "TronicaMono";
  font-size: 2.5vw;
}

.m-scroll {
  overflow: hidden;
  width: 100%;
  position: relative;
  margin-top: 2rem;
}

/* ------------------------- DECRYPTA ------------------------- */
/* ------------------------- DECRYPTA ------------------------- */
/* ------------------------- DECRYPTA ------------------------- */


.decrypta-text {
  text-align: left;
  line-height: 1.2;
  width: 75%;
  z-index: 1000;
}

.svg-table {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(60px, 1fr)
  ); /* layout reattivo */
  gap: 1rem;
  z-index: 1000;
}

.svg-table div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-table img {
  max-width: 100%;
  height: auto;
}


.decrypta-file-container {
  display: flex;
  flex-direction: row;
}

.decrypta-file {
  text-align: left; /* Allinea il testo a destra */
  margin-top: 0.5rem; /* Spazio sopra */
  font-size: 14px;
  color: #ffffff; /* Colore del testo */
}


.textToCopy {
  font-size: 2.5vw;
}


/* ------------------------- ARCHIVE POPUP ------------------------- */
/* ------------------------- ARCHIVE POPUP ------------------------- */
/* ------------------------- ARCHIVE POPUP ------------------------- */



























#random-popup {
  position: fixed;
  width: 50%;
  height: 18%;
  background: rgb(0, 0, 0);
  border: 1.5px solid #ffffff;
  z-index: 1000000;
  animation: flash 5s infinite;
}

.close-button {
  font-size: 2.5vw;
}

.popup-content {
  gap: 0;
}

.popup-header {
  padding: 0 0.5rem;
}


}


.popup.mobile {
  position: fixed !important;
  top: 4rem !important;
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  width: calc(100% - 1rem) !important;
  height: 60% !important;
  margin: 0 !important;
  overflow-y: auto;
  z-index: 10000;
  border: #ffffff 1px solid;
}