body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #06122c, #6778bb);
    font-family: 'Inter', sans-serif; 
  }

canvas{
  background-color: white;
  border:1px solid rgb(119, 119, 119);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 border-radius: 10px;
}

i{
  font-size: 2rem;
  margin-left: 20px;
  margin-top: 20px;
  color: rgb(6, 109, 109);
}

.card a {
  margin-left: 10px;
  font-weight: bold;
  font-size: 0.8rem;
}

.info button {
  color: white;
  font-weight: bold;
  height: 25px;
  width: 80px;
  border-radius: 20px;
  border:1px solid rgb(255, 255, 255);
  margin-left: 10px;
  background-color: blue;
}

.info button:hover {
  color: blue;
  font-weight: bold;
  height: 25px;
  width: 80px;
  border-radius: 20px;
  border:1px solid blue;
  margin-left: 10px;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
}

section {
  height: 600px;
  margin-left: 40px;
  display: inline-block;
}

.card{
  border-radius: 10px;
  margin-bottom: 10%;
  background-color: white;
  width: 250px;
  height: 75px;
  box-shadow:0 0 20px rgba(0, 0, 0, 0.2) ;
}

.modalin{
  margin-left: 5%;
}
.control{
  border-radius: 10px;
  box-shadow:0 0 20px rgba(0, 0, 0, 0.2) ;
  width: 250px;
  height: 200px;
}

.control .seta{
  margin-left: 5px;
  justify-content: center;
  height: 40px;
  width: 40px;
  cursor: pointer;
  border-radius: 5px;
  background-color: white;
  
}

.control .up{
  align-items: center; 
  margin-left: 49px;
  margin-bottom: 10px;
}

.control .left{
  margin-left:3px;
}

.control .right{
  margin-left:5px;
}

.control .enter{
  margin-left: 150px;
}

.control .pather{
  display: inline-block; 
  margin-left: 50px; 
  margin-top: 40px;
}

.control i{
  font-size: 2rem;
  margin-left: 10px;
  margin-top: 3px;
}

.control .info{
  width: 100%;
}
.control .info button{
  margin-top: 20px;
  margin-right: auto;
  border:1px solid blue;
}


/* Estilo para o modal (inicialmente oculto) */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  width: 500px;
  height: 500px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* Adicione isso ao seu CSS */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Cor escura com opacidade */
  z-index: 999; /* Certifique-se de que esteja acima do modal */
}



.modal i {
  margin-top: -10px;
  margin-left: 460px;
  font-size: 1.5rem;
  color: red;
  cursor: pointer;
}

.modal .textSobre{
  width: 100%;
  margin-top: 20px;
  font-size: 0.8rem;
}

.modal .textSobre p{
  margin-left: 10px;
}


.modal img{
  margin-top: 2%;
  width: 90%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}