:root {
    /* COLORS */
    --black: rgb(0, 0, 0);
    --gainsboro: rgb(220, 220, 220);
    --gold: rgb(255, 228, 75);
    --lightgray: rgb(211, 211, 211);
    --lawngreen: rgb(124, 252, 0);
    --green: rgb(0, 128, 0);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    display: grid;
    grid-template-areas:
        'header'
        'main'
        'footer';
}

header {
    grid-area: header;
}

header h1 {
    font-family: 'Courier New', Courier, monospace;
}

.btn-link {
    background-color: transparent;
    color: var(--gainsboro);
    border: none;
}

nav .btn-link:hover {
    color: var(--lawngreen);
}

main {
    grid-area: main;
    background-color: var(--lightgray);
    padding: 1rem;
}

footer {
    grid-area: footer;
}

header, footer {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--black);
    color: var(--gainsboro);
}

/* TABLES-GENERAL */
table {
    border-collapse: collapse;
    width: 100%;
}

table, tr, th, td {
    border: 1px solid var(--black);
}

th {
    color: var(--gold);
}

th, td {
    padding: 0.2rem 0.5rem;
}

/* TABLES-SPECIFIC */
#table-skills th,
#table-snippets th {
    background-color: var(--black);
}

#table-skills th {
    text-align: left;
}

/* DIVERSE */
.bold { font-weight: bold; }
.color-black { color: var(--black); }
.color-green { color: var(--green); }
.cursor-pointer { cursor: pointer; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.inline-block { display: inline-block; }
.width-30 { width: 30%; }
.width-70 { width: 70%; }