:root {
    --1st-color: #212121;
    --2nd-color: #6D9886;
    --3rd-color: #D9CAB3;
    --4th-color: #F6F6F6;
}

html {
    color: var(--1st-color);
    font-family: 'Space Mono', monospace;
    transition: 150ms;
}
html.dark {
    color: var(--4th-color);
}

body {
    line-height: 1.2;
    letter-spacing: .1rem;
    text-align: justify;
    background-color: var(--4th-color);
    padding: 32px 0;
    transition: 250ms;
}
body.dark {
    background-color: var(--1st-color);
}

header, main, footer {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
    padding: 0 32px;
    max-width: 894px;
}

#darkToggle {
    position: absolute;
    right: 32px;
    top: 0;
    border-radius: 33%;
    height: 48px;
    width: 48px;
    border-color: var(--2nd-color);
    background-position: center;
    background-size: 66%;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 250ms;    
}
#darkToggle:hover, #darkToggle.dark {
    background-color: var(--1st-color);
}
#darkToggle.dark:hover {
    background-color: var(--4th-color);
}

h1, h2, h3 {
    font-weight: bold;
    font-size: large;
}
h1, h2 {  
    line-height: 1.4;  
    letter-spacing: .4rem;
}
h1 span.title {
    font-size: 3.4rem;
}

ul {
    list-style: none;
}

.contact {
    font-weight: bold;
    text-align: right;
}


h2, p, ul, .expWrap {
    margin-bottom: 16px;
}

li {
    margin-bottom: 8px;
}

.title, a {
    color: var(--2nd-color);
}

a {
    text-decoration: none;
}

.school {
    font-weight: bold;
}

main h2 {
    margin-left: 20%;
}
.section {
    display: flex;
}
.date {
    width: calc(20% - 16px);
    color: var(--3rd-color);
    text-shadow: 1px 1px 1px var(--1st-color);
    padding-right: 16px;
}
.article {
    width: 80%;
}

.columnWrap {
    display: flex;
}

.columnWrap > div {
    width: 50%;
}

.leftColumn li {
    padding-right: 32px;
}

@media only screen and (max-width: 940px) {
    .section, .columnWrap {
        flex-wrap: wrap;
    }
    .date {
        width: calc(100% - 16px);
    }    
    .article {
        width: 100%;
    }
    .columnWrap > div {
        width: 100%;
    }
    main h2 {
        margin-left: 0;
    }
    h1 {
        margin-right: 64px;
    }
    .leftColumn li {
        padding-right: 0;
    }
    
}