@import url("https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap");


.google-sans-font {
  font-family: "Google Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "GRAD" 0;
}

h1, h4 {
    text-align: center;
}

#repo-list {
    display: flex;
    flex-wrap: wrap; /* Allows items to drop to the next line */
    order: 2;
}

.repo_element {
    /* Adjust width to control how many items fit per row (e.g., ~30% for 3 items) */
    width: calc(33.333% - 16px); 
    background-color: rgb(219, 224, 230);     
    aspect-ratio: 2/1; /* Cleaned up 1/0.5 syntax */    
    margin: 8px; 
    box-sizing: border-box; /* Ensures padding/borders don't break the width calculation */
    border-radius: 30px;
}

#repo-title {
    font-size: 24px;
    display: flex;
    transform: translateY(-30px);
    justify-content:center;
}

#repo-desc {
    font-size: 18px;
    display: flex;
    transform: translateY(-30px);
    justify-content:center;
    text-align: center;
}