* {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #2d3142;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


#wrapper {
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 180px 40px minmax(500px, auto) 240px;
}

header {
    grid-column: 1/2;
    grid-row: 1/2;
    background-color: #2d3142;
    display: grid;
    grid-template-columns: 1.5fr 3fr 2fr;
    grid-template-rows: 1fr 1fr;
}

header picture {
    grid-column: 1/2;
    grid-row: 1/3;
    justify-self: center;
    align-self: center;
}

header h1 {
    grid-column: 2/3;
    grid-row: 1/2;
    font-size: 4.5em;
    font-family: cursive;
    color: #fff3c5;
    font-style: italic;
    align-self: end;
}

header p {
    grid-column: 2/3;
    grid-row: 2/3;
    color: white;
    font-style: italic;
    margin: 0 5em;
    align-self: start;
}

header form {
    grid-column: 3/4;
    grid-row: 1/2;
    justify-self: center;
    align-self: center;
}

header form input {
    height: 2.2em;
    padding: 0 1em;
    border: none;
}

header form #search {
    border-radius: 15px 0 0 15px;
}

header form #submit {
    border-radius: 0 15px 15px 0;
    background-color: #fff3c5;
}

header form #submit:hover {
    background-color: #ffd760;
    box-shadow: 0 0 5px 0 white;
}

nav {
    grid-column: 1/2;
    grid-row: 2/3;
    background-color: #4f5d75;
}

nav ul {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}

nav a {
    text-decoration: none;
    display: block;
    padding: 1em;
    color: white;
    font-size: 12px;
}

main {
    grid-column: 1/2;
    grid-row: 3/4;
    background-color: white;
    padding: 2em 6%;
}

footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}



h2 {
    font-size: 2.5em;
    color: #4f5d75;
    text-shadow: 3px 3px 6px #bfc0c0;
    text-decoration: underline;
}

h3 {
    font-size: 1.5em;
    margin: 0.5em;
    text-shadow: 1px 1px 2px #bfc0c0;
}

p {
    line-height: 22px;
}

#home {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr 1fr;
    background-color: #f6f6f6;
}

#home #pattern-link {
    text-decoration: none;
}

#home #recommended {
    grid-column: 1/2;
    grid-row: 1/2;
    text-decoration: none;
}

#home #recommended article {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr;
    padding: 3em;
    box-shadow: 0 0 6px 0 #2d3142;
    border-radius: 5px;
    background-color: white;
}

#home #recommended article img {
    grid-column: 1/2;
    grid-row: 1/2;
    border-radius: 15px;
}

#home #recommended article p {
    grid-column: 2/3;
    grid-row: 1/2;
    margin: 0 0 0 3em;
    align-self: center;
}

#home #tutorial-link {
    text-decoration: none;
}

#home #start {
    grid-column: 1/2;
    grid-row: 2/3;
    text-decoration: none;
}

#home #start article {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr;
    padding: 3em;
    box-shadow: 0 0 6px 0 #2d3142;
    border-radius: 5px;
    background-color: white;
}

#home #start article img {
    grid-column: 1/2;
    grid-row: 1/2;
    border-radius: 15px;
}

#home #start article p {
    grid-column: 2/3;
    grid-row: 1/2;
    margin: 0 0 0 3em;
    align-self: center;
}

#home #about-link {
    text-decoration: none;
}

#home #me {
    margin: 1em 0 0 0;
    padding: 1em 3em 3em 3em;
    box-shadow: 0 0 6px 0 #2d3142;
    border-radius: 5px;
    width: 60%;
    justify-self: center;
    background-color: white;
    grid-column: 2/3;
    grid-row: 1/2;
}

#home #me h3 {
    text-align: center;
    margin: 1em 0;
}

#home #comms-link {
    text-decoration: none;
}

#home #custom {
    margin: 1em 0 0 0;
    padding: 1em 3em 3em 3em;
    box-shadow: 0 0 6px 0 #2d3142;
    border-radius: 5px;
    width: 60%;
    justify-self: center;
    background-color: white;
    grid-column: 2/3;
    grid-row: 2/3;
}

#home #custom h3 {
    text-align: center;
    margin: 1em 0;
}

#patterns section#amigurumi {
    margin: 1em 0;
    padding: 1em 1em 1.5em 1em;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-end;
    background-color: #f6f6f6;
    border-radius: 5px;
}

#patterns section#wearables {
    margin: 1em 0;
    padding: 1em 1em 1.5em 1em;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: #f6f6f6;
    border-radius: 5px;
}

#patterns section#misc {
    margin: 1em 0;
    padding: 1em 1em 1.5em 1em;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: #f6f6f6;
    border-radius: 5px;
}

#patterns section>section {
    text-align: center;
}

#patterns p {
    margin: 0 0 1em 0;
}

#patterns img {
    margin: 0 1em;
    box-shadow: 0 4px 8px 0 #2d3142;
    border-radius: 10px;
}

#patterns img:hover {
    height: 90%;
}

#tutorials>section {
    background-color: #f6f6f6;
    padding: 2em;
    border-radius: 10px;
}

#tutorials section p {
    margin: 0.5em 1em;
}

#tutorials #contents {
    text-align: center;
    margin: 2em 30%;
}

#tutorials #basics {
    margin: 2em 1em;
}

#tutorials .abbreve {
    font-weight: bold;
    font-style: italic;
}

#tutorials #starting {
    margin: 2em 1em;
}

#tutorials #finishing {
    margin: 2em 1em;
}

#tutorials #contents li {
    list-style: none;
    margin: 0.5em;
}

#tutorials #contents a {
    text-decoration: none;
}

#tutorials #contents h4 {
    margin: 2em 0 1em 0;
    text-decoration: underline;
}

#tutorials h2 {
    text-decoration: none;
}

#tutorials #how-to {
    font-size: 4em;
    text-align: center;
    color: #2d3142;
}

#tutorials #starting ul {
    margin: 0 0 1em 3em;
    list-style: circle;
}

#tutorials>section>section {
    background-color: white;
    padding: 1em;
    margin: 1em;
    border-radius: 5px;
    box-shadow: 0 1px 4px 0 #bfc0c0;
}

#tutorials .demo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
}

#tutorials img {
    margin: 1em;
}

#contact {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 2fr 1fr;
    text-align: center;
}

#contact #description {
    grid-column: 2/3;
    grid-row: 1/2;
}

#contact #enquiry {
    margin: 2em 20% 0 20%;
}

#contact #commission {
    margin: 1em 10% 0 10%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 10% 50% 30% 10%;
}

#contact #commission h2 {
    grid-column: 1/2;
    grid-row: 1/2;
}

#contact #commission h3 {
    margin: 2em 0 0.5em 0;
}

#contact #commission #custom {
    grid-column: 1/2;
    grid-row: 2/3;
}

#contact #commission #exsisting {
    grid-column: 1/2;
    grid-row: 3/4;
}

#contact #commission #note {
    grid-column: 1/2;
    grid-row: 4/5;
    font-weight: bold;
    font-size: 1.1em;
    color: #c99703;
    margin: 2em 0;
}

.key {
    font-weight: bolder;
}

#contact #guide {
    margin: 2em 10% 0 10%;
}

#contact #guide #price-list {
    justify-items: center;
}

#contact #guide table {
    margin: 3em 0;
    text-align: start;
    width: 75%;
}

#contact #guide caption {
    height: 2em;
}

#contact #guide thead {
    height: 2em;
    text-align: left;
}

#contact #guide .size {
    width: 15%;
}

#contact #guide .dimensions {
    width: 20%;
}

#contact #guide .price {
    width: 10%;
}

#contact form {
    grid-column: 2/3;
    grid-row: 2/3;
    text-align: start;
    margin: 2em 10% 0 10%;
}

#contact fieldset {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: repeat(3, 1fr) 6fr 1fr 1fr;
    padding: 1em;
    background-color: #fff3c5;
    border: none;
    border-radius: 5px;
    box-shadow: 1px 1px 8px 0 #2d3142;
}

#contact label {
    grid-column: 1/2;
    margin: 0 0 0.5em 0;
}

#contact input {
    grid-column: 2/3;
    margin: 0 0 0.5em 0;
    border: none;
}

#contact select {
    margin: 0 0 0.5em 0;
    width: 30%;
}

#contact textarea {
    grid-column: 1/3;
    grid-row: 4/5;
    margin: 0 0 0.5em 0;
    border: none;
}

#contact #send {
    grid-column: 1/3;
    grid-row: 6/7;
    width: 6em;
    justify-self: center;
    margin: 0;
    background-color: #ffd760;
    border-color: #b68900;
    border-radius: 10px;
}

#contact #send:hover {
    background-color: #4f5d75;
    color: #f6f6f6;
    border-color: #2d3142;
}

#contact #ex1 {
    grid-column: 1/2;
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}

#contact #ex2 {
    grid-column: 3/4;
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}

#contact img {
    display: block;
    height: 220px;
    width: 180px;
    background-color: #bfc0c0;
}

#contact h2 {
    margin: 0 0 0.5em 0;
}

#about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 4fr 1.5fr;
    padding: 1em;
}

#about #purpose {
    grid-column: 1/2;
    grid-row: 1/2;
    background-color: #2d3142;
    padding: 1.5em;
    margin: 0 0.5em 0 0;
}

#about #me {
    grid-column: 2/3;
    grid-row: 1/2;
    background-color: #4f5d75;
    padding: 1.5em;
    margin: 0 0 0 0.5em;
}

#about #get-in-touch {
    grid-column: 1/3;
    grid-row: 2/3;
    background-color: #fff3c5;
    padding: 1.5em;
    margin: 1em 0 0 0;
    justify-items: center;
}

#about p {
    padding: 1em;
    color: white;
}

#about #me a {
    color: white;
    text-align: center;
}

#about #get-in-touch p {
    padding: 0.5em 1em;
    color: #2d3142;
    text-align: center;
}

#about #purpose h3 {
    color: white;
}

#about #me h3 {
    color: white;
}

footer {
    grid-column: 1/2;
    grid-row: 4/5;
    background-color: #bfc0c0;
    padding: 1em;
}

footer ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 100%;
}

footer a {
    display: block;
    padding: 0.4em;
}

@media screen and (max-width: 750px) {
    #wrapper {
        grid-template-rows: 260px 50px minmax(500px, auto) 240px;
    }

    nav {
        text-align: center;
    }

    header {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 0.5fr 1fr;
        padding-top: 1em;
    }

    header picture {
        grid-row: 1/2;
    }

    header h1 {
        grid-column: 1/2;
        grid-row: 2/3;
        font-size: 3em;
        justify-self: center;
    }

    header p {
        grid-column: 1/2;
        grid-row: 3/4;
        margin: 0;
        justify-self: center;
    }

    header form {
        grid-column: 1/2;
        grid-row: 4/5;
        align-self: start;
    }

    #home {
        grid-template-columns: 1fr;
        grid-template-rows: 1.2fr 1.2fr 1fr 1fr;
    }

    #home #recommended {
        grid-column: 1/3;
        grid-row: 1/2;
    }

    #home #start {
        grid-column: 1/3;
        grid-row: 2/3;
    }

    #home #me {
        grid-column: 1/2;
        grid-row: 3/4;
        width: 100%;
        padding: 2em;
    }

    #home #custom {
        grid-column: 1/2;
        grid-row: 4/5;
        width: 100%;
        padding: 2em;
    }

    #home #recommended article {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr;
        padding: 2em;
        justify-items: center;
        margin: 0 0 1em 0;
    }

    #home #recommended article p {
        grid-column: 1/2;
        grid-row: 2/3;
        margin: 0;
    }

    #home #start article {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr;
        padding: 2em;
        justify-items: center;
    }

    #home #start article p {
        grid-column: 1/2;
        grid-row: 2/3;
        margin: 0;
    }

    #patterns {
        padding: 1em;
    }

    #patterns section#amigurumi {
        flex-wrap: wrap;
        padding: 0 0.5em 1em 0.5em;
    }

    #patterns section#wearables {
        flex-wrap: wrap;
        padding: 0 0.5em 1em 0.5em;
    }

    #patterns section#misc {
        flex-wrap: wrap;
        padding: 0 0.5em 1em 0.5em;
    }

    #patterns p {
        margin: 1em 0 0.5em 0;
    }

    #tutorials {
        padding: 0.5em;
    }

    #tutorials>section {
        padding: 0.5em;
    }

    #tutorials #contents {
        margin: 2em 1em;
    }

    #tutorials #basics {
        margin: 0;
    }

    #tutorials #starting {
        margin: 0;
    }

    #tutorials #finishing {
        margin: 0;
    }

    #tutorials>section>section {
        margin: 0.5em 0;
    }

    #contact {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 2.8fr 1.1fr 1fr;
        padding: 2em 1em;
    }

    #contact #ex1 {
        flex-direction: row;
        flex-wrap: wrap;
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #contact #ex2 {
        flex-direction: row;
        flex-wrap: wrap;
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #contact #description {
        grid-column: 1/3;
    }

    #contact form {
        grid-column: 1/3;
        grid-row: 3/4;
        margin: 0;
    }

    #contact fieldset {
        grid-template-columns: 1fr 3fr;
    }

    #contact input {
        margin: 0 0 0.5em 0.5em;
    }

    #contact select {
        margin: 0 0 0.5em 0.5em;
    }

    #contact #guide table {
        width: 100%;
    }

    #about {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 2fr 1fr;
    }

    #about #purpose {
        margin: 0;
    }

    #about #me {
        grid-column: 1/2;
        grid-row: 2/3;
        margin: 1em 0 0 0;
    }

    #about #get-in-touch {
        grid-column: 1/2;
        grid-row: 3/4;
    }
}

@media screen and (min-width: 751px) and (max-width: 1000px) {
    header {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 1fr);
        padding: 1em;
    }

    header picture {
        grid-column: 2/3;
        grid-row: 1/2;
    }

    header h1 {
        grid-column: 1/2;
        grid-row: 1/3;
    }

    header p {
        grid-column: 1/2;
        grid-row: 3/4;
        margin: 1em 0 0 0;
        align-self: start;
    }

    header form {
        grid-column: 2/3;
        grid-row: 3/4;
        justify-self: center;
        align-self: center;
    }

    #home {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1.2fr;
    }

    #home #recommended {
        grid-column: 1/3;
        grid-row: 1/2;
    }

    #home #start {
        grid-column: 1/3;
        grid-row: 2/3;
    }

    #home #me {
        grid-column: 1/2;
        grid-row: 3/4;
        width: 95%;
    }

    #home #custom {
        grid-column: 2/3;
        grid-row: 3/4;
        width: 95%;
    }

    #patterns {
        padding: 2em 1em;
    }

    #tutorials {
        padding: 2em 0;
    }

    #tutorials #basics {
        padding: 1em 0;
    }

    #tutorials #starting {
        padding: 1em 0;
    }

    #tutorials #finishing {
        padding: 1em 0;
    }

    #tutorials #basics h2 {
        padding: 0.5em 1em;
    }

    #tutorials #starting h2 {
        padding: 0.5em 1em;
    }

    #tutorials #finishing h2 {
        padding: 0.5em 1em;
    }

    #contact {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 3fr 1.5fr 1fr;
    }

    #contact #ex1 {
        flex-direction: row;
        flex-wrap: wrap;
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #contact #ex2 {
        flex-direction: row;
        flex-wrap: wrap;
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #contact #description {
        grid-column: 1/3;
    }

    #contact form {
        grid-column: 1/3;
        grid-row: 3/4;
    }

    #about {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 2fr 1fr;
    }

    #about #purpose {
        margin: 0;
    }

    #about #me {
        grid-column: 1/2;
        grid-row: 2/3;
        margin: 1em 0 0 0;
    }

    #about #get-in-touch {
        grid-column: 1/2;
        grid-row: 3/4;
    }
}