/*
@import url('https://fonts.googleapis.com/css2?family=Inter&family=Montserrat:wght@300&display=swap');
*/

:root{
    --left-panel-color: #1e2a33;
    --accent-color: #4a90e2;
    --accent-light: #e8f1f9;

    --text-color: rgb(233, 217, 217);
    --text-color2: rgb(43, 42, 42);
    --text-minor-color: #6f9092;
    --text-light: #888888;

    --sign-color: #96aaaa;
    --border-color: #e0e0e0;

    --section-padding-bot: 1.6rem;
    --title-pad-bot: 0.5rem;
    --title2-pad-bot: 1.2rem;
    --item-pad-bot: 0.3rem;
    --compact-desc-pad-bot: 0.2rem;

    --text-size-whole: 18px;
    --text-size-left-panel: 15px;
}

*{
    margin: 0;
    padding: 0;
}

body{
    font-size: var(--text-size-whole);
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.content-wrapper{
    width: 100%;
    /* height: max(max-content, 100vh); */
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.content-wrapper > *{
    padding: 2rem;
    padding-top: 4rem;
    box-sizing: border-box;
}

.right-panel{
    color: var(--text-color2);
    width: 100%;
    max-width: 70rem;
    background-color: #fafafa;
}

section{
    padding-bottom: var(--section-padding-bot);
}

.right-panel > section {
    border-bottom: 1px solid var(--border-color);
}

.right-panel > section:last-child {
    border-bottom: none;
}

a:visited, a{
    color: var(--accent-color);
    text-decoration: none;
}
a.underline{
    color: inherit;
    text-decoration: underline;
}

.preserve-whitespace{
    white-space: pre;
}

/* Small components */
.sign{
    color: var(--sign-color);
}
.header-info {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-light);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.header-info a {
    font-weight: 500;
}

.header-info a:hover {
    text-decoration: underline;
}

.header-info .separator {
    color: #ccc;
    font-weight: 300;
}
.item, .desc{
    padding-bottom: var(--item-pad-bot);
    line-height: 1.4;
}
.item, .compact-desc{
    padding-bottom: var(--compact-desc-pad-bot);
    line-height: 1.2;
}

.item.company{
    font-weight: 600;
    font-size: 1.1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.2rem;
}

.item.job-title{
    color: var(--accent-color);
    font-weight: 600;
}

.item.date{
    color: var(--text-light);
    font-size: 0.95rem;
}

.item.sign{
    color: var(--text-light);
    font-size: 0.9rem;
    font-style: italic;
}
.minor-desc{
    color: var(--text-minor-color);
    padding-bottom: var(--item-pad-bot);
    font-size: 0.95rem;
}

.title{
    font-size: 2.8rem;
    padding-bottom: 0.2rem;
    font-weight: 600;
    color: var(--accent-color);
}
.smaller-title{
    font-size: 1.8rem;
    padding-bottom: var(--title2-pad-bot);
    font-weight: 600;
    color: var(--accent-color);
    margin-top: 0.5rem;
}
.sub-title{
    font-size: 1.2rem;
    padding-bottom: var(--title2-pad-bot);
    font-weight: 600;
    color: var(--text-color2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.left-panel .sub-title{
    color: #FFB700;
}
.sub-title-nopad{
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-light);
}
.horizontal{
    display: flex;
}
.horizontal > *{
    position: relative;
    padding: 0 0.5rem;
}
.horizontal > *::before{
    position: absolute;
    content: "";
    margin-left: -0.5rem;
    height: 60%;
    width: 100%;
    transform: translate(0, 20%);
}
.horizontal > *:nth-of-type(1)::before{
    position: absolute;
    content: "";
    border-left: none;
    margin-left: 0;
}

/* Specific */
.skills-table{
    font-size: 16px;
    padding-bottom: 1rem;
    width: 100%;
}

.skills-table td{
    padding-bottom: 0.3rem;
    vertical-align: text-top;
    padding-right: 1.5rem;
}

.skills-table tr.sub-title {
    padding-bottom: 0.5rem;
}

.skills-table ul, .skills-table li{
    margin: 0;
    padding: 0;
    list-style: none;
}

.skills-table ul > li{
    padding-bottom: 0.4rem;
    line-height: 1.5;
}

/* Tools badges */
.tools-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.tool-category {
    font-weight: 600;
    color: var(--accent-color);
    min-width: max-content;
    font-size: 0.9rem;
    margin-right: 0.2rem;
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background-color: rgba(74, 144, 226, 0.15);
    color: var(--accent-color);
    border-radius: 3px;
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
}