/* Styling for tech.php */

.tech {
    width: 85%;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
}

.tech-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-inline: auto;
    gap: 3em;
}

.tech > .tech-track:nth-of-type(1) {
    border-bottom: 1px solid black;
    text-align: center;
}

.tech > .tech-track-panel:nth-of-type(1) {
    border-bottom: 1px solid black;
    text-align: center;
}

.tech-track-half > .tech-track:last-of-type {
    border-top: 1px dotted black;
}

.tech-track {
    display: grid;
    grid-template-columns: 16ch 2fr 3fr; /* 200px fixed width for the first column, 2fr for the other two */
    grid-template-rows: auto auto auto; /* Each row will automatically adjust based on content */
}

.tech-track-panel {
    display: grid;
    grid-template-columns: 1fr; /* 200px fixed width for the first column, 2fr for the other two */
    grid-template-rows: auto; /* Each row will automatically adjust based on content */
    text-align: center;
    }

.tech-list p {
    text-align: left;
    margin: 0;
    padding: 0 1.5em 0.5em 0.5em;
    line-height: normal;
}



.tech {
    width: 85%;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
}



@media (max-width: 600px) {

.tech-track {
    display: grid;
    grid-template-columns: 1fr; /* 200px fixed width for the first column, 2fr for the other two */
    grid-template-rows: auto auto auto; /* Each row will automatically adjust based on content */
}

.tech-track p:nth-of-type(1) {
text-align: center;
}

}

.tech > .tech-track:nth-of-type(odd) {
    background-color: white;
}

.tech > .tech-track-panel:nth-of-type(odd) {
    background-color: white;
}

.tech-sub-list:nth-of-type(even) {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-inline: auto;
    gap: 3em;
    background-color: var(--ashe-background-very-light);
    padding-block: 2em;

}

.tech-sub-list:nth-of-type(odd) {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-inline: auto;
    gap: 3em;
    background-color: white;
    padding-block: 2em;

}