body {
  margin: 10px;
  background-color: #f16a16; 
  overscroll-behavior-y: none;
}

button {
  background-color: white;
  color: black;
  padding: 14px 20px;
  margin: 8px;
  border: none;
  cursor: pointer;
  /*width: 30%; Qdo tinha 2 buttons
  max-width: 250px;*/
  width: 100%;
  max-width: 500px;
  min-width: 300px;
  font-weight: 800;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;

}

button:hover {
  opacity: 0.8;
}

.imgcontainer {
  text-align: center;
  margin: 5% 5% 10px 5%;
}

img.avatar {
  width: 50%;
  min-width: 300px;
  max-width: 500px;
  border-radius: 10%;
}

.container {
  /* border-color: red; 
  border-style: dotted; */
  padding: 16px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.loading {
  border : 4px solid orange ;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-right-color: transparent ;
  animation: rotacao 1s linear infinite ;
}

.mensagem {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color : red;
    text-align: center;
}

@keyframes rotacao {
  100% {
    transform: rotate(360deg);
  }
}

/* @media screen and (max-width: 550px) {
  button {
    background-color: #bb0994;
    width: 100%;
    min-width: 300px;
  }
} 
*/


@media screen and (min-width: 900px) {
  .imgcontainer {
    margin-top: 80px;
  }

}


/* @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
} */


/*
.div-center
{
  margin: auto;
  max-width: 700px;
  height: 100px;
  border-radius: 3px;
}
div.shadow {
    position:absolute;
    max-width:45%;
    max-height:45%;
    top:30%;
    left:50%;
    overflow:visible;
}
img.logo {
    position:relative;
    max-width:100%;
    max-height:100%;
    margin-top:-20%;
    margin-left:-50%;
}
*/