.div1{
  height:275px;
  max-width:100%;
  background: linear-gradient(#CCCCCC, #000000);
  color:white;
  text-align: center;
  border: 2px solid grey;
}
.h11{
  font-size:8vw;
 max-width: 100%;
 color:white;
}
.forl{
  font-size:4vw;
 max-width: 100%;
}
.footer{
  height:100px;
  width:100%;
  background: linear-gradient(#CCCCCC, #000000);
  color:white;
  text-align:center;
  line-height:100px;
  border: 2px solid grey;
}
.p1{
  color:white;
}







.divprincipal{
width:100%;
height:500px;
border: 4px solid #A9A9A9;
border-radius:8px;
}
.divbuttons{
width:100%;
height:100px;
border: 4px solid #A9A9A9;
border-radius:8px;
display:flex;
text-align:center;
justify-content:center;
align-items:center;
}
.btn2{
  height:50%;
 background: linear-gradient(#CCCCCC, #000000);
border-radius:8px;
color:white;
}
.btn2:hover {
  background: linear-gradient(#FFFFFF, #333333); /* cores mais claras */
  transform: scale(1.05); /* aumenta levemente */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* sombra */
}
.btn1{
  height:50%;
 background: linear-gradient(#CCCCCC, #000000);
border-radius:8px;
color:white;
}
.btn1:hover {
  background: linear-gradient(#FFFFFF, #333333); /* cores mais claras */
  transform: scale(1.05); /* aumenta levemente */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* sombra */
}
.divResult{
width:100%;
height:330px;
border: 4px solid #A9A9A9;
border-radius:8px;
display:flex;
text-align:center;
justify-content:center;
align-items:center;
}
.divResulttxt{
width:100%;
height:60px;
border: 4px solid #A9A9A9;
border-radius:8px;
}

.modal{
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #CCCCCC;
    justify-content: center;
    align-items: center;
}

.close{
    float: right;
    font-size: 24px;
    cursor: pointer;
    color: red;
    user-select: none;
}