body{
margin:1px;
background-color: #a3f;
}



/*layout */
.container{

 margin: 5vh 5vw; /* margem superior e inferior */
  height:20%;
  gap: 10px;
  width:30%;
  display: grid;
  padding: 2%;
  grid-template-columns: auto auto auto ;
}

.container  div {
  text-align: center;
}



/* Roda-Pé */
.footer {

   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #002;
   color: #fac;
   height: 25%;
   padding-bottom: 5%;
}

.EmLinha{

    display: inline-table;
    padding: 2px;
}



/*fonte */

.fonte{
    font-size: 57px;
}


.fonteP{
    font-size: 100%;
}





/* links */
  a:link{

    background-color: #f88;
    color: #fff;
}

  a:visited  {
    color: #fff;
    background-color: #3af;
}

 a:hover {
   color: #faf;
   background-color: #000;
}









@media only screen and (max-width: 768px) {
  /* estilos para dispositivos móveis */
  body {
    background-color: #938;
  }


.container{
display: block;
background-color: #fab;
width: fit-content;

}


/* Roda-Pé */

.footer{

display: inline;
background-color: #000;
color:#fff;


}


.EmLinha{

    margin-left:1px;
    font-size: 10px;


}




/* links */
  a:link{

    background-color: #f88;
    color: #fff;
}

  a:visited  {
    color: #fff;
    background-color: #3af;
}

 a:hover {
   color: #faf;
   background-color: #000;
}











}