html, body {
    height: 100%;
    overflow: auto;
}

body {
    --font-color: #555555;
    --highlight-color: #c50000;
    --base-color: black;
    --page-background: #f4f4f4;
    --card-background: #fafafa;
    --skills-background: #c500003b;
    --footer-background: #e4e4e4;

    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;

    transition: color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;

    background-color: var(--page-background);
    color: var(--font-color);
    font-size: 1.8rem;
    font-weight: 500;
    text-transform: lowercase;
    text-decoration: none;
}

.dark-theme {
    --font-color: #cacaca;
    --highlight-color: #f85d5d;
    --base-color: white;
    --page-background: #363636;
    --card-background: #494949;
    --skills-background: #ff68688a;
    --footer-background: #222222;
}

body, h1, h4, h5 {
    font-family: "Consolas", "Monaco", "Menlo", monospace;
}

h1, h4 {
    color: var(--highlight-color);
}

.container {
    max-width: 800px;
}

.fade {
    animation: topFade 0.5s ease-out backwards;
    animation-delay: calc(var(--order) * 0.2s);
}

/* cards */

.card {
    background-color: var(--card-background);
    display: flex;
    flex-direction: column;
}

.card-header {
    font-weight: normal;
}

.card-body {
    min-height: 9rem;
    padding: 0px 30px;
}

.card-footer {
    margin-top: auto;
    flex: none;
}

/* links */

.link {
    color: var(--font-color);
}

.link:hover {
    color: var(--highlight-color);
}

.icon-link {
    padding: 1.1rem 2.5rem;
    margin: 1rem 0;
}

.icon-link:hover {
    filter: invert(22%) sepia(43%) saturate(6374%) hue-rotate(357deg) brightness(70%) contrast(134%);
}

/* tables */

table {
    table-layout: fixed;
}

td {
    vertical-align: top;
}

@media screen and (max-width: 768px) {
    tr td {
        display: block;
    }
}

ul.skills {
    margin: 0 0 10px 24px;
}

ul.skills li {
    display: inline-block;
    padding: 2px 5px;
    margin: 5px 0;
    border-radius: 5px;
    background-color: var(--skills-background);
    color: var(--base-color);
    font-weight: bold;
}

td.first {
    width: 12em;
    overflow: hidden;
    font-weight: bold;
}

td.first-narrow {
    width: 8em;
    overflow: hidden;
    font-weight: bold;
}

tr.blank {
    height: 40px;
}

/* details */

summary {
    outline: 0;
    cursor: pointer;
}

summary:hover {
    color: var(--highlight-color);
    transition: all .2s ease;
}

details[open] summary {
    color: var(--highlight-color);
    font-weight: bold;
    transition: all .2s ease;
}

details[open] summary ~ * {
    animation: leftFade 0.5s ease-out;
}

p.detail-text {
    margin-block-end: 0;
    margin-block-start: 0;
}

/* footer */

footer {
    min-height: 50px;
    background-color: var(--footer-background);
}

.footer-item {
    padding: 2rem 2rem 0;
}

/* utilities */

.keep-case {
    text-transform: none;
}

.non-bold {
    font-weight: normal;
}

.dark-icon {
    float: right;
    margin-top: 2.5rem;
    margin-right: 2.5rem;
    position: -webkit-sticky; /* Safari */  
    position: sticky;
    top: 3rem;
}

img.dark {
    display: none;
}

img.invert {
    filter: invert(100%);
}

/* animations */
@keyframes topFade {
    0%   {opacity: 0; transform: translateY(-20px);}
    100% {opacity: 1; transform: translateY(0);}
}

@keyframes leftFade {
    0%   {opacity: 0; margin-left: -10px}
    100% {opacity: 1; margin-left: 0px}
}

/* latex logo */

span#latex sub {
    font-size: 1.8rem;
    margin-left: -1.5pt;
    margin-right: -1pt;
}
  
span#latex sup {
    font-size: 1.5rem;
    vertical-align: 1.5pt;
    margin-left: -2.5pt;
    margin-right: -1pt;
}