/* Base styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: var(--background-color); /* Általános háttérszín */
    color: var(--text-color); /* Általános szövegszín */
  }
  
  /* Root variables */
  :root {
    --background-color: #f0f0f0; /* Általános háttérszín */
    --text-color: #000; /* Általános szövegszín */
    --card-bg-color: var(--color-white); /* Profilkártya háttérszín */
    --profile-bg-color: #ffffff; /* Profilkártya háttérszín */
    --profile-image-border: #ffffff; /* Profilkép keret színe */
    --profile-background-image: url('../banner_example.jpg'); /* Háttérkép URL */
  }
  
  /* Konténer a profilkártyához */
  .container {
    width: 100%;
    max-width: 800px;
    margin-top: 20px; /* Tér a tetején a filterhez */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  
  /* Profilkártya stílusok */
  .profile-card {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    background-color: var(--color-white); /* Profilkártya háttérszín */
    margin-top: 20px; /* Tér a kártya tetején */
  }
  
  /* Háttér stílusok */
  .background {
    position: relative;
    height: 200px; /* Háttér magasság */
    background-color: var(--profile-bg-color); /* Háttér szín */
    background-image: var(--profile-background-image); /* Háttérkép URL */
    background-size: cover;
    background-position: center;
  }
  
  /* Profilkép stílusok */
  .profile-image {
    position: absolute;
    bottom: -50px; /* Profilkép elhelyezése */
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* Profilkép átmérő */
    height: 100px; /* Profilkép átmérő */
    border-radius: 50%; /* Kör alak */
    overflow: hidden;
    border: 5px solid var(--profile-image-border); /* Keret a profilkép körül */
  }
  
  .profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Profil információk stílusok */
  .profile-info {
    text-align: center;
    padding: 70px 20px 20px; /* Tér a profilkép alatt */
  }
  
  .name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-black); /* Név szín */
  }
  
  .description {
    font-size: 1rem;
    color: var(--color-black); /* Leírás szín */
    margin-top: 10px;
  }
  p{
    color: var(--color-black);
  }