@font-face {
    font-family: 'Magicthe-Gathering';
    src: url('../assets/woff/Magicthe-Gathering.ttf.woff') format('woff'),
        url('../assets/woff/Magicthe-Gathering.ttf.svg#Magicthe-Gathering') format('svg'),
        url('../assets/woff/Magicthe-Gathering.ttf.eot'),
        url('../assets/woff/Magicthe-Gathering.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    font-family: 'Magicthe-Gathering';
    color: black;
    background-color: white;
}

body.dark-mode {
    color: white;
    background-color: black;
}

body > div {
    margin: 0 0.5rem;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.2rem;
}

/* Layout & Size for checkbox */
.progress input[type='checkbox'] {
    font-size: 3rem;
}
.progress input[type='checkbox']::before {
    content:"~";
    cursor: pointer;
}
.progress input[type="checkbox"]:checked::before {
    color: green;
}
.progress input[type="checkbox"]:disabled::before {
    color: grey;
}

/*
Dark Mode block
*/

body.dark-mode .progress input[type='checkbox']::before {
    color:#ddd;
}
body.dark-mode .progress input[type="checkbox"]:checked::before {
    color: lightgreen;
}
body.dark-mode .progress input[type="checkbox"]:disabled::before {
    color: grey;
}

/*
Need correct symbols/characters for our fun Morrowind Font
*/

.progress input.check1:checked::before {
    content:"[";
}
.progress input.check2:checked::before {
    content:"\\";
}
.progress input.check3:checked::before {
    content:"]";
}
.progress input.check4:checked::before {
    content:"^";
}
.progress input.check5:checked::before {
    content:"_";
}
.progress input.check6:checked::before {
    content:"`";
}
.progress input.check7:checked::before {
    content:"{";
}
.progress input.check8:checked::before {
    content:"|";
}
.progress input.check9:checked::before {
    content:"}";
}
.progress input.check10:checked::before {
    content:"@";
}

section.tracker {
    margin-bottom: 1.5rem;
}

section > hgroup {
    display: flex;
    flex-wrap: wrap;
}

section > hgroup > h2,
section > hgroup > h3 {
    margin-right: 5px;
    line-height: 2.2rem;
}

section > div.progress {
    display: block;
}

.skills > h2 {
    display: none;
}
.skills > ul {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.5rem;
}

.skills > ul > li {
    margin-right: 0.5rem;
}

#tools {
    margin-top: 5rem;
}

#tools button {
    border: 1px solid;
    font-size: 2rem;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
}