:root {
 --icon: ;
}


body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    background-color: #f0f2f5;
    font-family: Arial, sans-serif;
}

/* A caixa tam. fixo */
.container-fixo {
    width: 300px;
    height: 300px;
    background-color: white;
    border-radius: 32px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column; /*título e o conteúdo*/
}

/* área interna scroll */
.conteudo-scroll {
    flex-grow: 1;          /* Faz a div ocupar o espaço restante da caixa */
    overflow-y: auto;      /* Habilita o scroll vertical quando necessário */
    padding-right: 10px;   /* Espaço para a barra de scroll não cobrir o texto */
    border-top: 1px solid #eee;
    margin-top: 10px;
}

.icon {
  
  width: 100px;
  height: 100px;
  background-image: url('eu.jpg');
  background-size: contain; /* Ensures the whole icon is visible */
  
  /* Use 'cover' to make the image fill the entire div, potentially cropping */
  background-repeat: no-repeat; /* Prevents repeating if the image is smaller than the div */
  background-position: left; /* Centers the icon within the div */
  border: 1px solid #ccc; /* Optional */
  
  /*
  width: 50px;
  height: 50px;
  display: flex;         
  justify-content: center; 
  align-items: center;   
  object-fit: contain;  */
}
.icon {
  
  width: 100px;
  height: 100px;
  background-image: url('eu.jpg');
  background-size: contain; /* Ensures the whole icon is visible */
  
  /* Use 'cover' to make the image fill the entire div, potentially cropping */
  background-repeat: no-repeat; /* Prevents repeating if the image is smaller than the div */
  background-position: left; /* Centers the icon within the div */
  border: 1px solid #ccc; /* Optional */
  
  /*
  width: 50px;
  height: 50px;
  display: flex;         
  justify-content: center; 
  align-items: center;   
  object-fit: contain;  */
}

/* estilização da barra  */
.conteudo-scroll::-webkit-scrollbar {
    width: 6px;
}

.conteudo-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}