.name-text {
    color: #d45113;
}
.sub-text {
    color: #eafdd7;
}
.back-color {
    background-color: #1a231f;
}
.name-grad {
    background-image: linear-gradient(to bottom right, #d45113, #ed975a);
    color: transparent;
    background-clip: text;
}
.lets-talk {
    background-image: linear-gradient(to bottom right, #81b29a, #ddf9c1);
    color: #151d1a;
}
.bottom-bar {
    font-size: 0.65em;
    background-color: #151d1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

.linkedin-link {
    transition: opacity 0.2s ease;
    opacity: 0.7;
    text-decoration: none;
}

.linkedin-link:hover {
    opacity: 1;
}

.linkedin-link svg {
    display: block;
}

.main-content {
    width: min(70vw, 100cqi);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.learn-section {
    width: 100%;
}
.learn-section-wrapper {
    width: 100%;
}
.hero-desc {
    width: 30vw;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
.video-container {
    text-align: center;
    margin-bottom: 1.5rem;
}
.video-el {
    background: #2a3a34;
    border-radius: 0.5rem;
    width: auto;
    max-width: 100%;
}
.code-blocks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .code-blocks {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }
}

.code-panel {
    width: 100%;
}

@media (min-width: 768px) {
    .code-panel {
        width: auto;
        min-width: 0;
        max-width: 50%;
    }
}

.code-panel pre {
    background: #1a231f;
    color: #eafdd7;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.85em;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    border: 1px solid #2a3a34;
}
.learn-section ul {
    padding-left: 0;
    text-align: left;
    list-style: none;
}
.diff-add {
    color: #81b29a;
}
strong {
    color: #81b29a;
}

.doom strong {
    color: #d45113;
}
.diff-remove {
    color: #d45113;
}

.graph-wrapper {
    padding: 2rem 0 3rem 0;
}

.graph-svg {
    width: 100%;
    max-width: 930px;
    display: block;
    margin: 0 auto;
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    min-width: 720px;
    table-layout: fixed;
}

.comparison-table thead th,
.comparison-table tbody td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.comparison-table thead th:first-child,
.comparison-table tbody td:first-child {
    width: 16%;
}

.comparison-table thead th:nth-child(2),
.comparison-table tbody td:nth-child(2),
.comparison-table thead th:nth-child(3),
.comparison-table tbody td:nth-child(3),
.comparison-table thead th:nth-child(4),
.comparison-table tbody td:nth-child(4) {
    width: 28%;
}

.comparison-table thead th {
    background-color: #2a3a34;
    color: #ddf9c1;
    padding: 0.75rem 0.6rem;
    text-align: center;
    vertical-align: top;
    border-bottom: 2px solid #81b29a;
}

.comparison-table thead th:first-child {
    text-align: left;
    font-size: 0.9rem;
}

.comparison-table thead th:first-child {
    border-top-left-radius: 0.5rem;
}

.comparison-table thead th:nth-child(2),
.comparison-table thead th:nth-child(4) {
    font-size: 1.8rem;
}

.comparison-table thead th:last-child {
    border-top-right-radius: 0.5rem;
}

.comparison-table .sub-header {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: #81b29a;
    margin-top: 0.15rem;
}

.comparison-table thead th:nth-child(3) .main-header {
    font-size: 1.2rem;
}

.comparison-table tbody td {
    background-color: #1a231f;
    color: #eafdd7;
    padding: 0.65rem 0.6rem;
    vertical-align: top;
    border-bottom: 1px solid #2a3a34;
}

.comparison-table tbody td:nth-child(3) {
    border-right: 1px solid #2a3a34;
}

.comparison-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.5rem;
}

.comparison-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.5rem;
}

/* Copperpot column highlight */
.comparison-table thead th.copperpot-col {
    background-color: #2a3a34;
    border-bottom: 2px solid #81b29a;
    color: #ddf9c1;
}

.comparison-table tbody td.copperpot-col {
    background-color: #1f2e28;
    border-left: 2px solid #81b29a;
    border-right: 2px solid #81b29a;
    color: #ddf9c1;
    font-weight: 500;
}

.comparison-table tbody tr:last-child td.copperpot-col {
    border-bottom: 2px solid #81b29a;
}

/* First column (criteria labels) */
.comparison-table thead th:first-child,
.comparison-table tbody td:first-child {
    font-weight: 600;
    color: #ed975a;
    min-width: 140px;
}

.comparison-table .table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.5rem;
    border: 1px solid #2a3a34;
}

@media (max-width: 767px) {
    .comparison-table {
        font-size: 0.78rem;
    }

    .comparison-table thead th,
    .comparison-table tbody td {
        padding: 0.5rem 0.4rem;
    }
}