:root{
    /*PROFILE PROPERTIES*/
    --technical-chip: rgb(238, 237, 237);
    --technical-chip-hover: rgb(18, 28, 33);
    --technical-text-hover: white;   
} 

html[data-theme="dark"] {
    /*PROFILE PROPERTIES*/
    --technical-chip: rgba(24, 30, 32, 0.342);
    --technical-chip-hover: rgb(238, 237, 237);
    --technical-text-hover: rgb(18, 28, 33);
    --tech-bg: rgba(42, 52, 56, 0.534);  
}

.technical
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin: 0;
}

.technical-title
{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-family: "Fraunces", "Arial";
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin: 0;
    margin-top: 100px;

    text-decoration: underline var(--profile-title-text);
    text-underline-offset: 15px;

    border: 1px var(--profile-border) solid;
    border-radius: 20px;
    box-shadow: var(--quick-links-button-box-shadow);
    padding: 20px;
    width: fit-content;
    cursor: default;
}
.technical-subtitle
{
    font-size: 20px;
    font-family: Arial;
    color: rgb(115, 115, 115);
    text-align: center;
    margin-top: 20px;
    cursor: default;

    
}


.technical-grid-container{
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: min(1300px, 92vw);
    cursor: default;
    
}

/* each card */
.tech-card{
  border: 1px solid var(--profile-border);
  border-radius: 18px;
  box-shadow: var(--quick-links-button-box-shadow);
  padding: 18px;
  min-height: 160px;
  background: var(--tech-bg);
 
  
}

.tech-card-title
{
    margin: 0 0 12px;
    font-family: "Fraunces", Arial;
    font-weight: 700;   /* <-- fix */
    font-size: 20px;
}

.tech-card-chips{
  display: flex;
  flex-wrap: wrap;     /* <-- wraps to next line */
  gap: 12px;
}

.chip{
  border: 1px solid var(--profile-border);  /* <-- pill border */
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 15px;
  line-height: 1;
  background-color: var(--technical-chip); 
  transition: background-color .5s, color .5s ;
}

.chip:hover
{
    background-color: var(--technical-chip-hover);
    color: var(--technical-text-hover);

}


/* tablet/mobile: 1 per row */
@media (max-width: 900px)
{
    .technical
    {
        margin-top: 0px;
    }
    .technical-grid-container{
        grid-template-columns: 1fr;
        justify-items: center;  
        margin-top: 30px;
        
    }
    .technical-title
    {
        font-size: 35px;
        margin-top: 30px;
    }
    .technical-subtitle
    {
        font-size: 18px;
        width:  330px;
        font-family: Arial;
        color: rgb(115, 115, 115);
        text-align: center;
        margin-top: 20px;

        
    }
    .tech-card
    {
    width: min(520px, 92vw);        /* prevents full-width cards */
    }
}