* {
    margin: 0;
    padding: 0;
}

body  {
    font-family: "Work Sans", Avenir, sans-serif;
    font-weight: 1rem;
    line-height: 1.5rem;
    background: #EBEDEF;
    padding: 0 4vw;
    color: #29292B;
}

#main-header {

    padding: 1rem 0;
    
}

#main-header a {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 10px;
    align-items: center;
    text-decoration: none;
    margin-bottom: 2rem;
}

#main-header h1 {

    font-size: 1.25rem;
    color: #29292B;
    
}

#main-header img {
    width: 40px;
}

article {
    max-width: 600px;
}

article header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 10px;
    align-items: center;
}

article header img {
    width: 150px;
}

article header h2 {
    
}

article header h3 {
    font-size: 1rem;
    padding: 0.5rem;
    margin: 1rem 0;
    font-weight: normal;
    color: #FFFFFF;
    background: #83D0EB;
    max-width: 400px;
    border-radius: 8px;
}

.year-of-publication {
    font-size: 1.5rem;
    line-height: 4rem;
}

article header a {
    display: inline-block;
    margin: 0.5rem 0;
}

article blockquote {
    margin: 1rem 0;
}

article header time, article header #view-counter {
    font-family: Menlo, monospace;
    font-size: 0.875rem;
}

article header #view-counter {
    line-height: 0.875rem;
}

article section {
    margin: 1rem 0;
}

article section p {
    padding: 0.5rem 0;
}

article section header  h2 {
    font-size: 1rem;
}

article code {
    background: #F3F5F7;
    font-family: "Menlo", monospace;
    border-radius: 4px;
    font-size: 0.875rem;
    padding: 0.15rem 0.5rem;
}

article a {
    font-weight: bold;
    text-decoration: underline;
    color: #3799BC;
    font-weight: normal;
    
}

.resource-view .thumbnail {
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 1rem 0;
    text-decoration: none;
    background: #83D0EB;
    border-radius: 8px;
}

.resource-view .thumbnail > img {
    margin: 1rem;
}

.thumbnail header {

    flex: 0 1 240px;
    display: flex;
    flex-flow: column;
    padding: 1rem;
    color: white;
    box-sizing: border-box;
    margin: 1rem;
    align-items: flex-start;

}


.thumbnail header h2 {
    font-size: 1.875rem;
    line-height: 2rem;
    padding-bottom: 0.125rem;
}

.resource-view .authors {
    display: flex;
    flex-flow: row;
    align-items: center;
}

.resource-view .author {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-right: 0.5rem;
}

.resource-view .author img {

    max-width: 80px;
    margin-right: 0.5rem;
    
}

.resource-view {
    margin: 3rem 0;
}

blockquote p {
    margin: 0.5rem 0;
}

.resource-view > p {
    margin: 1rem 0;
}

.resource-view blockquote {
    border-left: 4px solid #29292B;
    display: block;
    font-size: 0.875rem;
    padding-left: 1rem;
}

#further-reading li {
    margin: 0.5rem 0;
    list-style: none;
}

#further-reading a {
    margin: 0;
    padding: 0;
}

#further-reading li p {
    font-size: 0.875rem;
    padding: 0 0 0.5rem 0;
}

.big-text {
    font-size: 1.5rem;
    line-height: 2rem;
}

#people li {
    list-style: none;
}

.person img {
    display: block;
    height: auto;
}

.person {
    display: flex;
    text-decoration: none;
    align-items: center;
    color: #3799BC;
    margin: 1rem 0;
}

.person img {
    margin: 0 1rem;
}

.person h2 {

    color: #3799BC;

}

.person p {
    color: #29292B;
}

.person img {

    width: 100px;
    
}

#main-footer {

    margin: 2rem 0;
    
}

#main-footer a {
    color: #3799BC;
    font-weight: bold;
}

#signup {
    margin: 2rem 0;
}

#signup p {
    padding-bottom: 1rem;
}

#signup form {
    display: flex;
    flex-wrap: wrap;
}

#signup input {

    border: 0;
    outline: 0;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font: inherit;
    margin-right: 1rem;
    
}

#signup button {

    background: #83D0EB;
    cursor: pointer;
    color: white;
    padding: 0.5rem;
    outline: 0;
    border: 0;
    border-radius: 5px;
    font: inherit;
    
}