:root {
    /* ==== COLOR VARIABLES ==== */
    --primary-color: #395986;
    --secondary-color: #e6e6e6;
    --text-color: hsl(0, 0%, 29%);
    --body-background: #F5F5F5;

    /* ==== LAYOUT VARIABLES ==== */
    --page-width: 800px;
    --left-width: 250px;
    --gap: 20px;
    --arc-height: 160px;
    --pic-size: 120px;

    /* ==== TYPOGRAPHY VARIABLES ==== */
    --font-family: calibri, sans-serif;
    --h1-font-size: 16pt;
    --h1-font-color: #F5F5F5;
    --h2-font-size: 14pt;
    --h2-font-color: var(--primary-color);
}

/* =========================
   BASE & RESET
========================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--body-background);
    font-family: var(--font-family);
    color: var(--text-color);
    font-size: 12pt;
}

/* =========================
   TYPOGRAPHY
========================= */
h1, h2 {
    font-weight: lighter;
}

h1 {
    color: var(--h1-font-color);
    font-size: var(--h1-font-size);
    text-align: center;
    text-transform: uppercase;
}

h2 {
    color: var(--primary-color);
    font-size: 16pt;
    margin-top: 30px;
    text-transform: uppercase;
}

/* =========================
   PAGE STRUCTURE
========================= */
.page {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--page-width);
    height: 1122px;
    margin: 0 auto;
    background: white;
}

/* ===== LEFT COLUMN ===== */
.page .left {
    flex: 0 0 var(--left-width);
    background: var(--secondary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Arc Header */
.page .left .arc {
    width: 100%;
    height: var(--arc-height);
    background: var(--primary-color);
    clip-path: ellipse(100% 100% at 50% 0%);
    padding-top: 20px;
    position: relative;
    z-index: 1;
}

/* Profile Picture */
.page .left .pic {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    z-index: 2;
}

/* Left Content Section */
.page .left .content {
    width: 100%;
    padding: 20px;
    margin: 60px 15px 15px 15px;
}

/* ===== RIGHT COLUMN ===== */
.page .right {
    flex: 1;
    padding: 0 30px;
}

/* =========================
   COMPONENTS
========================= */

/* ---- Experience ---- */
.page .right .experience {
    margin-bottom: 10px;
}

.page .right .experience i {
    color: var(--primary-color);
}

.page .right .time_period {
    float: right;
    color: var(--primary-color);
}

/* ---- Divider ---- */
.page hr {
    border: 0;
    border-top: 1px solid #DDD;
    height: 1px;
    margin: 5px 0;
}

/* ---- Tables ---- */
.page table {
    width: 100%;
}

.page table td {
    font-size: 10pt;
}

/* Personalia Table */
.page table.personalia td:first-child {
    text-align: center;
}

.page table.personalia i {
    margin: 5px 5px 5px 0;
    font-size: 150%;
    color: var(--primary-color);
}

/* Skills & Languages Tables */
.page table.skills i,
.page table.languages i {
    margin: 2px 2px 2px 0;
    color: var(--primary-color);
}

.page table.skills td:last-child,
.page table.languages td:last-child {
    text-align: right;
}

/* ---- Lists ---- */
.page ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page li {
    padding-left: 10px;
    text-indent: -.7em;
}

.page .right li {
    padding-left: 20px;
}

.page li:before {
    content: "• ";
    color: var(--primary-color);
}

/* =========================
   RESPONSIVE DESIGN
========================= */
@media not print {
    @media (max-width: 800px) {
        .page {
            flex-direction: column;
            height: auto;
        }

        .page .left,
        .page .right {
            width: 100%;
            flex: none;
        }
    }
}