body {
  background: #98b29d;
}

* {
  font-family: "Pixelify Sans", sans-serif;
}

a {
  color: #000000;
  text-decoration: none;
}

  .rotate {
animation: rotate 20s infinite;
width: 400px;
height: 400px;
}

.center {
  display: flex;
  justify-content: center;
  text-align: center;
  transform: translateY(50%);
}

.section--top {
  height: 100vh;
}

.img--logo {
  width: 100vw;
  position: absolute;
}

.img-correspondencia {
  top: 0;
  -webkit-mask: linear-gradient(#5A9477, transparent);
}

.letter { font-size: 20px; font-family: Arial; text-anchor: middle; dominant-baseline: middle; }


rect {
  width: 50px;
  height: 50px;
  fill: #5b607d;
  stroke: #000000;
}

.img-cifrada {
  bottom: 0;
  -webkit-mask: linear-gradient(transparent, #5A9477);
}

h1 {
  font-size: 7vw;
}

.howto {
  font-size: 3vw;
}

.howto__step1{
  text-align: left;
}

.howto__step2{
  text-align: center;
}

.howto__step3{
  text-align: right;
}


.border {
  border-top: 1px solid #000000;
  margin-top: 80px;
  margin-bottom: 40px;
}

.main__input_text{
  width: 50vw;
  margin-bottom: 80px;
}


div.main__input {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}

div.main__input label       { text-align:right; }
div.main__input label:after { content: ":"; }

.main__buttons{
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center align the buttons */
}


.main__inner {
  display: flex;
  flex-direction: row; /* Asegurarte de que los elementos estén en fila */
  flex-wrap: nowrap; /* No permitir que los elementos se envuelvan */
  justify-content: flex-start;; /* Espaciado entre elementos */
  align-items: flex-start; /* Alinear la parte superior */
}

.main__output_column {
  flex: 1;
  flex-basis: 250px; /* Un ancho fijo o mínimo para la columna de salida */
  margin-left: 20px; /* Espacio entre el SVG y el textarea */
}

.main__output {
  width: 100%; /* Hacer que el textarea ocupe el 100% del ancho disponible */
  height: 150px; /* Altura suficiente para varias líneas de texto */
  padding: 10px;
  box-sizing: border-box;
  margin-top: 25px;
  margin-left: 20px;
  margin-right: 20px;
  overflow: auto; /* Permitir desplazamiento si el contenido es demasiado grande */
  font-size: 18px; /* Tamaño de fuente más grande */

}

.main__buttons input {
    margin: 80px 0; /* Space between buttons */
    padding: 10px 20px; /* Adjust padding for better shape */
    border: none; /* Remove default border */
    background-color: #144c69; /* Button background color */
    color: white; /* Text color */
    border-radius: 50px; /* Makes the button elliptical */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s; /* Smooth background change */
}

.main__buttons input:hover {
    background-color: #121f33; /* Darker shade on hover */
}

#svg-container {
  width: 400px; /* Establecer un ancho fijo */
  height: 400px; /* Establecer una altura fija */
  margin: 10px 20px 10px 0; /* Espaciado entre elementos */
  position: relative;
}

#svg-container .background-rect {
  fill: #ecebea;
  stroke: #000000;
}

.svg-background, .svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s; /* Smooth transition for rotation */
    transform-origin: center; /* Set rotation around the center */
}



.main__buttons {
  width: 20%;
}

.main__reticulado {
  width: 30%;
}

.contact__inner {
  display: flex;
}

.contact_column {
  width: 50%;
}

.section {
  padding-left: 20px;
  padding-right: 20px;
}

@keyframes rotate {
0% {
  transform: rotateZ(0deg); /* Start at 0 degrees */
}
10% {
  transform: rotateZ(0deg); /* Pause at 0 degrees */
}
30% {
  transform: rotateX(90deg); /* Rotate to 90 degrees */
}
40% {
  transform: rotateX(90deg); /* Pause at 90 degrees */
}
60% {
  transform: rotateY(180deg); /* Rotate to 180 degrees */
}
70% {
  transform: rotateY(180deg); /* Pause at 180 degrees */
}
90% {
  transform: rotateZ(270deg); /* Rotate to 270 degrees */
}
100% {
  transform: rotateZ(360deg); /* Rotate to 360 degrees and continue */
}
}

@media (max-width: 480px) {
    .main__inner {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
        align-items: stretch; /* Alinear elementos para ocupar el ancho completo */
    }

    .main__output_column {
        margin-left: 0; /* Eliminar margen izquierdo en pantallas pequeñas */
        margin-top: 20px; /* Espacio entre botones/SVG y el textarea */
    }

    .main__buttons {
        margin-bottom: 20px; /* Espacio entre botones y el textarea */
    }
}