/*******************************************************************************
  COLORS
  Color Palette: https://www.figma.com/color-palettes/jade-amethyst-forest/
*******************************************************************************/

:root {
    --text: #EEEEEE;
    --bg: #1B1B1B;
    --link: #6C875D;
    --title: #1C4C2D;
}

/*******************************************************************************
  BODY
*******************************************************************************/

body {
    background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, var(--bg) 100%);
    color: var(--text);
    font-family: sans-serif;
    margin: 0;
}

/*******************************************************************************
  CONTENT
*******************************************************************************/

#content {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1000px;
    min-height: 100vh;
    padding: 48px 0 20px; 
}

/*******************************************************************************
  HEADING
*******************************************************************************/

h1 {
    margin: 0;
    padding: 0 20px;
    text-align: center;
}

h2 {
    background-color: var(--title);
    color: var(--text);
    margin-top: 2em;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px 20px;
}

/*******************************************************************************
  LIST AND LIST ITEMS
*******************************************************************************/

ul {
    list-style-type: none;
}

ul ul {
    padding-left: 0;
}

ul > li {
    margin-bottom: 0.8em;
}

div > ul li:last-child {
    margin-bottom: 2em;
}

h1 + ul {
    padding: 0;
    text-align: center;
}

h2 + ul {
    padding: 0 20px;
}

h2 + ul > li:first-line {
    font-weight: bold;
}

h2 + ul ul li:not(:last-child) {
    float: left;
    margin-right: 0.4em;
}

/*******************************************************************************
  LINK
*******************************************************************************/

a {
    background-color: var(--link);
    border: solid 1px var(--link);
    color: var(--text);
    display: inline-block;
    padding: 0.5em;
    text-decoration: none;
}

a:hover {
    background-color: var(--text);
    color: var(--link);
}

a.code::before {
    content: "\1F4BF\0020";
}

a.doc::before {
    content: "\1F4C4\0020";
}

a.profile::before {
    content: "\1F465\0020";
}

a.ppt::before {
    content: "\1F4CA\0020";
}