*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
}
html{
  font-size: 62.5%;
}

body *{
    font-family: 'Inter', sans-serif;
    color: #fff; 
}

body{  
  min-height: 100vh; 

  display: flex;
  flex-direction: column;  

  background: linear-gradient(
    180deg,
    #0F172A 30%,
    #222b41ff 100%
  );

}
 
#container {
  max-width:36rem; 
  margin: 6rem auto;     
  flex-grow: 1; 

}

.profile {
    display: flex; 
    flex-direction: column;
    align-items: center; 
    padding: 2.4rem;
}

.profile img {
    width: 11.2rem;
}

.profile p {
    font-weight: 400;
    margin-top:0.5rem;
    line-height: 2.4rem;
    font-size: 1.9rem;
}
 
.links ul{
  list-style: none;
  display: flex;
  flex-direction: column; 
  padding: 0 3.0rem;
  gap:1.6rem; 

}  

.links a{ 
  
  height: 5.2rem;
  font-size: 1.6rem; 
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background:rgba(255, 255, 255, 0.1);
  border: .1rem solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;

  backdrop-filter: blur(4px);
  --weblit-backdrop-filter: blur(4px);  
  text-decoration: none;
  font-weight: 500;
  
  transition: background-color 0.35s;
}

ul li a:hover{
  background: rgba(255, 255, 255, 0.35);
  border: 0.1rem solid #fff;
  
}

a ion-icon{
  font-size: 1.6rem; 
  padding:0 0.45rem;
}

.footer p{   
  width: 100%;
  color: #e2dee9ff; 
    
  text-align: center;
  padding: 5rem;
  font-size: 1.4rem;
  text-weight:500; 

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; 
  gap: 0.4rem;
}
  
.footer ion-icon{ 
  color: #a08ec2ff; 
  

}
 

.footer span:hover{
  color: #bba7dfff; 
}

//**********************************************************************
/* Estilos para telas de até 425px (Celulares) */
@media (max-width: 42.5rem) { 
    #container {
        padding: 0 1.5rem; 
    }

    .links ul {
        padding: 0; 
    }

    .footer {
        padding: 2.4rem; 
    }
}


/*  Tablets (entre 426px e 768px) */
@media (min-width: 42.6rem) and (max-width: 76.8rem) {
    html {
        font-size: 70%; /* 1rem = 12px */
    }

    #container {
        padding: 0 2rem;
    }

    .links a {
        max-width: 30rem;
        height: 4rem;
    }
}

/* Desktops (acima de 769px) */
@media (min-width: 76.9rem) {
   
    html {
        font-size: 80%; /* 1rem = 14px */
    }

    #container {
        padding: 0 4rem; 
        max-width: 40rem; 
    }
    
    .links a {
        max-width: 35rem;
        height: 5rem;
    }

     
}