* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background-color:  #0000a8;
   color: #c8cce1;
   /* font-family:'Terminal', monospace;*/
     font-family:'VT323', monospace, sans-serif;
     font-size: larger;
    text-align: center;
    padding: 0;
}

.container {
   display: grid;
    grid-template-columns: repeat(3, 1fr); /* Três colunas iguais */
    row-gap: 0px;
    margin: 0 auto; /* Centraliza o contêiner na tela */
    background-color: #0000aa;
    max-width: 500px;
    width: 100%;
    padding: 0px;
    -webkit-animation: tilt-in-top-1 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-top-1 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
         
}

.row{
display: flex;
justify-content: center;
align-items:flex-start;
margin: 0 auto;

}
.span3 {
  grid-column: span 3; /* Ocupa todas as três colunas */
 }
 .span2{
 grid-column: span 2; /* Ocupa todas as três colunas */
}

.span3 h1 {
    font-size: 24px;
    margin-top: 10px;
    background-color: #7f82b6;
    color:#0f0b87;
    padding: 2%;
    border:4px double aliceblue;
}
img{width:30%;object-fit: fill;  opacity: 0.7;   }



.error-message {
    text-align: justify;
    margin-top: 20px;
}
.error-message a{
    text-decoration: none;
    background-color:  #0000aa;
    color: #c8cce1;
}
.error-message a:hover{
    background-color: #7f82b6;
    color:#0f0b87;
    text-decoration: none;
}
.error-message a:active{
    text-decoration: none;
    background-color:  #0000aa;
    color: #c8cce1;
}

.error-message p {
    margin: 10px 0;      
}


@media (max-width: 768px) {
  .container {
      grid-template-columns: repeat(2, 1fr); /* Duas colunas no tablet */
      padding: 10px;
  }

  .row{
      grid-column: span 2; /* Adapta para duas colunas */
  }
}

@media (max-width: 480px) {
  .container {
      grid-template-columns: 1fr; /* Uma coluna no celular */
      padding: 10px;
  }

  .row {
      grid-column: span 1; /* Ocupa apenas uma coluna no celular */
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2023-11-6 21:21:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }

  /* ----------------------------------------------
 * Generated by Animista on 2023-11-6 21:30:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tilt-in-fwd-tr
 * ----------------------------------------
 */
@-webkit-keyframes tilt-in-fwd-tr {
    0% {
      -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
              transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
              transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
      opacity: 1;
    }
  }
  @keyframes tilt-in-fwd-tr {
    0% {
      -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
              transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
              transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
      opacity: 1;
    }
  }

  @-webkit-keyframes tilt-in-top-1 {
    0% {
      -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
              transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
              transform: rotateY(0deg) translateY(0) skewY(0deg);
      opacity: 1;
    }
  }
  @keyframes tilt-in-top-1 {
    0% {
      -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
              transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
              transform: rotateY(0deg) translateY(0) skewY(0deg);
      opacity: 1;
    }
  }


  @-webkit-keyframes typing {
    to {
      width: 0;
    }
  }
  
  @keyframes typing {
    to {
      width: 0;
    }
  }
  @-webkit-keyframes caret {
    50% {
      color: transparent;
    }
  }
  @keyframes caret {
    50% {
      color: transparent;
    }
  }