body {
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  background-color: #222;
  background-image: url(../img/star-outline-transparent-21.png);
  background-blend-mode: overlay;
  margin: 0px;
  min-height: 97vh;
  display: grid;
  grid-template-columns: 1fr 80% 1fr;
  grid-template-areas: ". content .";
}
#content {
  display: grid;
  grid-area: content;
  grid-template-columns: 150px 3fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "nav page";
}
#content {
  margin: 2em;
  border: 10px solid #dac9e2;
  background: linear-gradient(#3e3662, #a37ab6);
}

#nav {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr min-content;
  gap: 0px 0px;
  grid-template-areas:
    "navLinks"
    "social";
  grid-area: nav;
}
#nav {
  padding: 2em;
}

.navLinks {
  grid-area: navLinks;
}
ul.navLinks,
ul.socialList {
  list-style-type: none;
  padding-left: 0em;
  display: flex;
  flex-flow: column wrap;
}
ul.navLinks li {
  padding: 10px 0px 10px 0px;
}
ul.navLinks li a {
  color: #fff;
  padding: 10px;
  border-bottom: none;
  text-decoration: none;
  padding: 10px 0px 10px 0px;
}
ul.navLinks li a:hover {
  color: #e5e3ef;
  text-decoration: none;
}
.social {
  grid-area: social;
}
ul.socialList li img {
  height: 35px;
  padding: 5px 0px 5px 0px;
}

.frontpage {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content min-content min-content;
  gap: 10px 10px;
  grid-template-areas:
    "frontIntro"
    "frontimgs"
    "frontcontact";
}
#page {
  grid-area: page;
  padding: 2em;
  background-color: lavender;
  margin: 2em;
  border-radius: 0.25em;
  box-shadow: 0px 0px 16px 5px rgba(52, 45, 82, 0.75);
  -webkit-box-shadow: 0px 0px 16px 5px rgba(52, 45, 82, 0.75);
  -moz-box-shadow: 0px 0px 16px 5px rgba(52, 45, 82, 0.75);
}
#page p {
  color: #0b0b34;
}
#page h1, #page h2, #page h3, #page h4, #page h5, #page h6 {
  color: #0b0b34;
}
.frontIntro {
  grid-area: frontIntro;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  text-align: center;
  padding-bottom: 1em;
}
.frontIntro img {
  width: 200px;
  border-radius: 50%;
}
.frontIntro article {
  max-width: 50%;
}
.frontIntro h4, .acnh_info h4 {
  color: #0b0b34;
}
.frontIntro p {
  margin: 0em 2em;
  color: #0b0b34;
}
.acnh_info {
  display: flex;
  flex-flow: column wrap;
  background-color: #fcfcfe;
  border: 5px solid #d6d6f2;
  margin: 1em 2em;
  padding: 1em 2em;
}
.acnh_info h4 {
  margin: 0px 10px 10px 10px;
}
.acnh_info ul {
  list-style-type: none;
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-inline-start: 0px;
}
.acnh_info ul li {
  color: #0b0b34;

}
.frontImgs {
  grid-area: frontimgs;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.frontImgs {
  padding: 0em 4em;
}
.frontImgs > * {
  flex: 1 1 280px;
}

.frontImgs img {
  width: 200px;
  margin: 0.5em;
  border: 2px solid #3e3662;
  border-radius: 1.5em;
}

.frontContact {
  grid-area: frontcontact;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

/*CSS for Designs page*/
.desgngrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  gap: 20px 20px;
  grid-template-areas: "mom_quote" "intro" "sites_dy_hd" "sites_dy" "sites_st_hd" "sites_st";
}
.mom_quote {
  grid-area: mom_quote;
  display: flex;
  flex-flow: column wrap;
  background-color: #fcfcfe;
  border: 2px solid #d6d6f2;
  margin: 0.5em 2em;
  padding: 1.5em 2em;
}
.intro {
  grid-area: intro;
  display: grid;
  grid-template-columns: 3fr min-content;
  gap: 10px 10px;
  grid-template-areas: "introtext introimg";
}
.introtext {
  line-height: 1.5em;
  padding: 0.5em 2em;
}
.sites_dy {
  grid-area: sites_dy;
}
.sites_st {
  grid-area: sites_st;
}
.sites_dy,
.sites_st {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: space-around;
}
.sites_dy_hd {
  grid-area: sites_dy_hd;
}
.sites_st_hd {
  grid-area: sites_st_hd;
}
.sites_dy_hd,
.sites_st_hd {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(#cfd5e6, #c6bfdd);
  border-radius: 20em 20em;
  margin: 1em 1em 0.5em 1em;
  text-align: center;
  border: 2px solid #d1d1f6;
}
.sitethumb {
  max-width: 300px;
  margin: 5px 20px 25px 20px;
}
.sitethumb img {
  max-width: 300px;
  border: 2px solid #222;
}
.introtext {
  grid-area: introtext;
}
.introimg {
  grid-area: introimg;
}
.introimg img {
  max-height: 200px;
  margin: 1em 2em;
}
.mom_quote_text {
  font-style: italic;
}
.mom_quote_credit {
  margin-left: 10px;
}
.footer {
  background-color: #3e3662;
  border-color: #a37ab6;
}
/* Contact Form */
/*
#contactform {
  padding: 1em;
  text-align: center;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
form li + li {
  margin-top: 0.5em;
}
label {
  display: inline-block;
  padding-top: 5px;
}
input,
textarea {
  font: 1em sans-serif;
  width: 300px;
  box-sizing: border-box;
  border: 1px solid #d1d1f6;
}

input:focus,
textarea:focus {
  border-color: #333;
}

textarea {
  vertical-align: top;
  height: 4em;
  background-color: #fbfbfe;
}
#contactform button {
  margin: 1em;
  padding: 1em 3em;
  background-color: #516693;
  color: #fbfbfe;
  font-weight: bold;
  border-radius: 2em;
  border: 2px solid #3f4f72;
}
#contactform button:focus,
#contactform button:hover {
  background-color: #6a7fad;
}
#contactform button:active {
  background-color: #776aad;
}*/
/*CSS unique to blog page*/
.blogwrap {
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-areas: "blog sidebar";
  gap: 0em 1em;
}
.blog {
  grid-area: blog;
  padding: 0px 10px 0px 10px;
}
.sidebar {
  grid-area: sidebar;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
}
.sidebar img {
  border-radius: 1em;
  margin-bottom: 20px;
  border: 2px solid #222;
}
/*Commenting out as this was a placeholder for images that may be needed in future.
.sidebarsquare {
  width: 200px;
  height: 200px;
  border: 2px solid #222;
  background-color: #a37ab6;
  margin-bottom: 20px;
  border-radius: 1em;
}*/
.blog_main {
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
}
.artcl {
  background-color: #fbfbfe;
  border: 1px solid #bcbcf2;
}
article h5 {
  margin: 0px;
}
article h6 {
  margin: 0px;
  font-size: 16px;
  text-align: left;
  font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
}
.blog_key {
  display: flex;
  flex-flow: row wrap;
  margin: 10px 0px 15px 0px;
}
.catgs {
  display: flex;
  flex-flow: row wrap;
  border-top: 1px solid #e7e7fa;
  padding-top: 10px;
}
.catbutton {
  padding: 10px;
  margin: 5px 10px;
  border-radius: 0.5em;
}
.cat_cross_stitch {
  background-color: #bcd7f2;
  border: 1px solid #a7caee;
}
.cat_tech_projects {
  background-color: #d7bcf2;
  border: 1px solid #caa7ee;
}
.cat_recipe {
  background-color: #f6d1e4;
  border: 1px solid #eea6cb;
}
.cat_photography {
  background-color: #f6e4d1;
  border: 1px solid #eecba6;
}
.cat_jewelry {
  background-color: #d1f6e4;
  border: 1px solid #91eabe;
}
.cat_writing {
  background-color: #f4f6d1;
  border: 1px solid #dfe67c;
}
.blog_main a {
  color: #2d68eb;
}
/*CSS for internal recipe page*/
.recipe {
  padding: 0px 20px;
}
.recipe_intro h2,
.recipe_intro h3 {
  display: flex;
  flex-flow: column wrap;
  align-content: center;
}
.recipe_img {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.recipe_intro img {
  border-radius: 1em;
  padding: 0.5em;
}
.recipe ul {
  list-style-type: circle;
  margin: 1em;
}
.ingredients {
  display: flex;
  flex-flow: row-wrap;
  align-content: center;
  justify-content: space-around;
  align-items: flex-start;
}
.appl_dough,
.appl_filling,
.appl_syrup {
  max-width: 35%;
}
/*CSS for crossstitch_081621 page*/
.crossstitch_display {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 280px);
  grid-gap: 20px;
}
.cs_shadow {
  box-shadow: 10px 14px 20px 0px #666;
}
.block1 {
  background: url(../img/cs_stardew_gems.png) no-repeat center center;
  background-size: cover;
}
.block2 {
  background: url(../img/cs_shaymin.png) no-repeat center center;
  background-size: cover;
}
.block3 {
  background: url(../img/cs_mnb_weddingbiscornu.png) no-repeat center center;
  background-size: cover;
  grid-column: 3 / 5;
}
.block4 {
  background: url(../img/cs_hpbiscornu.png) no-repeat center center;
  background-size: cover;
  grid-row: 2 / 4;
}
.block5 {
  background: url(../img/cs_asirra_catslimes.png) no-repeat center center;
  background-size: cover;
  grid-column: 2/4;
}
.block6 {
  background: url(../img/cs_snowflakesal.png) no-repeat center center;
  background-size: cover;
}
.block7 {
  background-color: #d1d1f6;
  border-radius: 10px;
  grid-column: 2 / 5;
  padding: 10px;
}
.block7_text {
  padding: 1.5em 2em;
  border: 2px dashed #e8e7fa;
}
.block7 a {
  color: #0450a3;
}
.block7 a:hover {
  color: #0675ee;
}
.block7 a:active {
  color: #f92d8f;
}
.block8 {
  background: url(../img/cs_lpotl.png) no-repeat center center;
  background-size: cover;
}
.block9 {
  background: url(../img/cs_firstattempt.png) no-repeat center center;
  background-size: cover;
  grid-column: 2/4;
}
.block10 {
  background: url(../img/cs_jpn_biscornu.png) no-repeat center center;
  background-size: cover;
}
.block11 {
  background: url(../img/cs_ukrn_bisc_small.png) no-repeat center center;
  background-size: cover;
  grid-column: 1/3;
}
.block12 {
  background: url(../img/cs_strawberry_bookmark.png) no-repeat center center;
  background-size: cover;
}
.block13 {
  background: url(../img/cs_junimomagnet.png) no-repeat center center;
  background-size: cover;
}