:root {
    --sheet-bg: white;
    --outer-bg: rgb(119, 104, 105);
    --main-bg: rgb(167, 167, 167);
    --main-text: black;
    --main-lines: color-mix(in srgb, var(--main-text) 15%, var(--main-bg));
    --line-thickness: 0.5mm;

    --main-text-size: 8.5px;

    --side-bg: #2D3C61;
    --side-text:lightgray;
    --side-lines: color-mix(in srgb, var(--side-text) 15%, var(--side-bg));
    --name-color: #FFEAEC;
    --side-text-size: 8.5px;
}

body {
    font-family: 'Open Sans';
    font-size: var(--main-text-size);
    background-color: var(--outer-bg);
}

.sheet
{
    zoom: 1.66
}

@media print
{
    .sheet
    {
        zoom: 1 !important;
    }
}

p {
    margin-top: 0em;
    margin-bottom: 1em;
    line-height: 1.5em;
}

h2 {
    font-size: 1.5em;
    font-weight: 700;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: var(--line-thickness) solid var(--main-lines);
}

em {
    font-weight: 700;
}

article {
    grid-area: content;
    color: var(--main-text);
    padding-top: 20px;
    margin-right: 20px;
    background-color: var(--sheet-bg);
}

aside > section >h2
{
    border-bottom:  var(--line-thickness) solid var(--side-lines);
}

article h3, article h4, article h5, article p
{
    margin-left: 20px;
}

ul
{
    list-style-type: circle;
    list-style-position: inside;
    line-height: 1.7em;
}

li > ul {
    list-style-type: square;
}

article section ul {
    margin-left: 3em;
}

h3 {
    font-size: 1.05em;
    font-weight: 700;

    margin-block-start: 5px;
    margin-block-end: 5px;
}

h4 {
    font-size: 1em;
    font-weight: 700;

    margin-block-start: 1em;
    margin-block-end: 1em;
}

header {
    grid-area: header;
    background-color: #fed330;
}

aside {
    text-align: left;
    grid-area: sidebar;
    background-color: var(--side-bg);
    color: var(--side-text);
    padding: 0px 0px 10px 10px;
}

aside p, aside ul {
    font-size: var(--side-text-size);
}

footer {
    grid-area: footer;
    background-color: #fd9644;
}

.container {
    background-color: var(--sheet-bg);
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 1fr 3fr;
    height: 100%;
    grid-template-areas: 
        "sidebar content";
}

article > section
{
    padding: 1em;
}

aside > section
{
    padding : 1em;
}

/*#region profile*/

#profile-aside
{
    margin: 0;
    padding-top: 30px;
}


#profile-name {
    color: var(--name-color);
    font-size: 26px;
    line-height: normal;
    font-weight: 700;
    margin-bottom: 10px;
}

#profile-title {
    font-size: 14px;
    margin-bottom: 0px; /* Hackily tweaked so that the first aside heading lines up with the first main heading*/
}

/*#endregion*/

/*#region programming skill*/

.prgskill {
    margin-bottom: 1em;
}

.prgskill p {
    margin-bottom: 0.5em;
}

.prgskill progress {
  -webkit-appearance: none;
  appearance: none;
}

.prgskill ::-webkit-progress-bar {
  background-color: var(--side-lines);
  height: 2px;
}

.prgskill ::-webkit-progress-value {
  background-color: var(--side-text);
}

/*#endregion*/


/*#region work experience*/
.wexp-header {
    display: grid;
    grid-template-areas:
      "title title"
      "employer date";

    margin-block-start: 15px;
    margin-bottom: 15px;
}
  
.wexp-header > h3.wexp-title {
    grid-area: title;
    text-transform: uppercase;
    margin-bottom: 1em;
    margin-top: 0;
    padding-top: 0;
    font-size: larger;
}

.wexp-header > p.wexp-employer {
    grid-area: employer;
    text-transform: uppercase;
    font-size: larger;
    margin-top: auto;
    margin-bottom: 0;
    color: var(--main-text);
}

.wexp-header > p.wexp-date {
    text-align: right;
    grid-area: date;
    text-transform: uppercase;
    margin-top: auto;
    margin-bottom: 0;
}
/*#endregion*/

/* Making FA icons have a little space after the text */
i.fa {
    margin-right: 4px;
}