:root {
    --font-primary: "Cerebri Sans", sans-serif, "Font Awesome 5 Free";
    --color-black: rgb(0, 0, 0);
    --color-blue: #201f49;
    --font-large: 1.5rem;
    --font-medium: 1rem;
    --font-small: 0.875rem;
}

@font-face {
  font-family: 'Cerebri Sans';
  src: url('/fonts/Cerebri-Sans/CerebriSans-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    line-height: 1.6;
    overflow-y:auto;
    overflow-x:hidden;

}


/* ############################################################# */
/* WHITE CONTAINER */

.white-container {
    background-color: #ffffff;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.headline {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-top: -5%;
}

.content-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    width: 100%;
    max-width: 1200px;
}

#image {
    flex: 1 1 40%;
    max-width: 40%;
}

#image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: -10%;
}

#paragraph {
    flex: 1 1 50%;
    max-width: 50%;
    text-align: left;
    font-size: var(--font-medium);
    margin-top: 7%; /* Shift paragraph down */
}

.bottomline {
    margin-top: 20px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    margin-left: 17%;
    margin-top: -10%;
}





/* ############################################################# */
/* BLUE CONTAINER */

.blue-container {
    background-color: var(--color-blue);
    color: white;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-center;
    gap: 20px;
    text-align: center;
    
}

.content-row-blue {
    display: flex;
    justify-content: center; /* Centers content */
    align-items: flex-start; /* Aligns items at the top */
    gap: 1vw; /* Space between person elements */
    flex-wrap: wrap; /* Allows wrapping if there's not enough space */
  }
  
  .person {
    margin-top: 5%;
    flex: 1 1 calc(33.33% - 50px); /* Each person takes one-third of the row, minus the gap */
    max-width: 350px; /* Optional: Set a max-width for each card */
    text-align: center; /* Center-align content inside */
    padding: 20px; /* Add some spacing inside each card */
  }
  
  #image-blue {
    margin-bottom: 15px; /* Add spacing below the image */
  }
  
  #image-blue img {
    width: 76%; /* Make the image responsive */
    border-radius: 20%; /* Make it circular if needed */
  }
  
#image-blue #user-image{
    border-radius: 1%;
}

#image-blue .name{
    
}

  .name {
    font-size: var(--font-medium);
    display: inline-block;
  }

#image-blue #frame {
    position: relative;
    z-index: 1;
    width: 92%;
    height: auto;
    margin-top: -80%;
    /* border: 6.3rem solid transparent;
    border-image: url("images/image-frame.png") 650 round; */
}

@media (max-width: 768px) {
    .person {
      flex: 1 1 100%; /* Stack vertically on smaller screens */
    }

    .bottomline{
    margin-top: 10%;
    }

    #image {
    margin-top: 40%
    }

    .headline {
    font-size: var(--font-large)
    }
  }