body {
  background-color: #f8f9fa;
  font-family: 'Arial', sans-serif;
}


.materia {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header h5 {
  margin-bottom: 0;
  color: #007bff;
}


#resultado {
  font-size: 1.2em;
  font-weight: bold;
}


@media (max-width: 576px) {
  .d-flex {
    flex-direction: column;
  }
  
  .d-flex button {
    width: 100%;
    margin-bottom: 10px;
  }
}



.circular-image {
  width: 300px;          
  height: 300px;
  border-radius: 50%;    
  object-fit: cover;      
  overflow: hidden;      
  border: 3px solid #007bff; 
}