html, body {
    height:100%;
}

body {
    font-family: 'Space Mono', monospace;
    font-weight:400;
    background-image:linear-gradient(white, rgb(243,242,242), rgb(228, 228, 228));
    padding:0;
    margin:0;
    display:flex;
    flex-direction: column;
}

h1 {
    font-family: 'Work Sans', sans-serif;
    font-size:24px;
    font-weight:400;
}

h3 {
    font-family: 'Work Sans', sans-serif;
    font-size:20px;
    font-weight:700;
    text-decoration:none;
    padding-bottom:8px;
    border-bottom-style:solid;
    border-bottom-width:1px;
    width:100%;
}

a {
    text-decoration:none;
    color:midnightblue;
}

ul {
    margin-left:0;
    padding:0 0 0 20px;
}

ol {
    margin-left:0;
    padding:0 0 0 30px;
}

li {
    padding:0 0 12px 0;
}

.title {
    font-family: 'Space Mono', monospace;
    font-size:30px;
    font-weight:700;
    padding:0 48px 0 0;
}

#navbar {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    padding:24px 24px 48px;
}

.nav {
    display:flex;
    align-items:center;
    padding:0 28px;
}

#content {
    width:80%;
    max-width:1100px;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    padding:48px 0;
    margin:0 auto auto;
}

#name, #tags, #description {
    margin:auto;
}

#name {
    font-family: 'Work Sans', sans-serif;
    font-size:30px;
    font-weight:700;
    padding:24px 0;
}

#tags {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    padding:12px 0;
}

.tag {
    background-color:powderblue;
    font-family: 'Space Mono', monospace;
    font-weight:400;
    font-size:12px;
    padding:4px 6px;
    margin:0 12px;
}

#description {
    padding:24px 0;
    text-align:center;
}

#source {
    padding:0;
    text-align:center;
}

#recipe {
    width:100%;
    padding:24px 0;;
    display:flex;
}

#ingredients {
    width:40%;
    padding-right:60px;
}

#instructions {
    width:60%;
    padding:0;
}