body {
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  background-color: #222;
  background-image: url(/static/img/star-outline-transparent-21.png);
  background-blend-mode: overlay;
  margin: 0px;
  display: grid;
  grid-template-columns: 1fr 85% 1fr;
  grid-template-areas: ". pageframe .";
  min-height: 97vh;
}

.pageframe {
  grid-area: pageframe;
  display: grid;
  grid-template-columns: 175px 3fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-template-areas:
    "nav content"
    "nav footer";
}

.pageframe {
  margin: 2em;
  border: 10px solid #dac9e2;
  background: linear-gradient(#3e3662, #a37ab6);
}

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

#nav {
  padding: 2em;
}

#footer {
  grid-area: footer;
}

.hs_logo {
  max-width: 100px;
  margin-bottom: 10px;
}


.navLinks {
  grid-area: navLinks;
}

/*
.navLinks img {
  max-width: 50px;
  margin: 0px 0px 10px 0px;
}
*/
ul.navLinks {
  list-style-type: none;
  padding-left: 0em;
  display: flex;
  flex-flow: column wrap;
}


ul.socialList {
  list-style-type: none;
  padding-left: 0em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;

}

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;
}

.catPics {
  grid-area: catPics;
  display: flex;
  justify-content: center;
  align-items: center;
}

.catPics img {
  max-width: 100px;
}

.catPics_intro {
  display: flex;
  margin: 0.5em 0.5em;
}

.catPics_intro img {
  max-width: 200px;
border-radius: 1em;
}

.catPics_intro article {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  border: 1px solid #666;
  margin: 10px;
  padding: 10px;
}


.catPics_gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.catPics_gallery img {
  margin: 0.5em;
  max-width: 200px;
}

.social {
  grid-area: social;
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul.socialList li img {
  height: 35px;
  padding: 5px 0px 5px 0px;
}

.qtext {
  font-size: large;
  font-weight: bold;
  align-content: center;
}

.navEmoji {
  font-size: large;
  font-weight: bold;
}

#content {
  grid-area: content;
  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);
}

#content p {
  color: #0b0b34;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
  color: #0b0b34;
}

.standard_page {
  background-color: #fbfbfe;
  border-radius: 10px;
  border: 1px solid #ebebfa;
  padding: 1.5em;
}

.standard_page_article {
  display: grid;
  grid-template-columns: minmax(.5rem, 1fr) minmax(auto, 65ch) minmax(.5rem, 1fr);
}

.standard_page_article>p {
  grid-column: 2;
  font-size: 1.1rem;
  line-height: 1.8rem;
}

.init_lttr::first-letter {
  -webkit-initial-letter: 2;
  initial-letter: 2;
  padding-right: 5px;
}

@-moz-document url-prefix() {
  .init_lttr::first-letter {
    font-weight: 500;
    font-size: 2em;
    padding-right: 1px;
  }
}

/*
.standard_page_article p+p {
  text-indent: 1rem;
}
*/

.standard_page_article>h3 {
  grid-column: 2;
  justify-content: center;
}

.standard_page_article>h4 {
  grid-column: 2;
  justify-content: center;
}

.standard_page_article>aside {
  grid-column: 2;
}

.standard_page_article>div {
  grid-column: 1 / 4;
  max-width: 100%;
}

.standard_page_article>.sg_image {
  grid-column: 2;
}

.standard_page_columns {
  column-width: 250px;
  column-gap: 4em;
  column-rule: 2px dashed #d1d1f6;
}

.standard_page_columns aside {
  background-color: #fbfbfe;
  border: 2px dashed #bcbcf2;
  padding: 1em;
  text-align: center;

}

.standard_page_columns img {
  margin: 0 auto;
}

.aside_ital {
  font-style: italic;
}

.cat_emoji {
  font-weight: 600;
}

.sg_img_duo, .sg_img_sing {
  display: flex;
  justify-content: center;
  align-items: center;

}

div>figcaption {
  display: flex;
  justify-content: center;
  padding: 0px 10px 10px 10px;
  font-style: italic;
}

.img_duo, .img_sing {
  background-color: #fefbfd;
  border: 2px solid #f9e7f3;
  border-radius: 15px;
  margin: 1em;
}

.img_duo, .img_sing {
  position: relative;
  transform-style: preserve-3d;
  border-radius: 15px;
  box-shadow: -12px 10px 51px -16px rgba(0, 0, 0, 0.66);
  -webkit-box-shadow: -12px 10px 51px -16px rgba(0, 0, 0, 0.66);
  -moz-box-shadow: -12px 10px 51px -16px rgba(0, 0, 0, 0.66);
}

.sg_img_map {
  display: flex;
  justify-content: center;
  margin: 3em 5em;
}

.sg_img_map {
  position: relative;
  transform-style: preserve-3d;
  border-radius: 15px;
}

.sg_img_map::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: radial-gradient(ellipse farthest-corner at bottom right, #F6F6D1 9%, #F6E3D1 18%, #F6D1D1 27%, #F6D1E4 36%, #F6D1F6 45%, #E4D1F6 54%, #D1D1F6 63%, #D1E4F6 72%, #D1F6F6 81%, #D1F6E3 90%, #E4F6D1 99%);
  ;
  filter: blur(20px);
  transform: translate3d(-1px, 0px, -1px);
  border-radius: inherit;
  pointer-events: none;
}

.sg_img_map_one {
  width: 100%;
  height: 100%;
  max-width: 150ch;
  border-radius: 15px;
  border: 2px solid #d1d1f6;
  box-shadow: -12px 10px 51px -16px rgba(0, 0, 0, 0.40);
  -webkit-box-shadow: -12px 10px 51px -16px rgba(0, 0, 0, 0.40);
  -moz-box-shadow: -12px 10px 51px -16px rgba(0, 0, 0, 0.40);
}

.img_float_r {
  float: right;
}

.img_float_l {
  float: left;
}

.frontIntro {
  grid-area: frontIntro;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  text-align: center;
  padding-bottom: 1em;
}

.frontIntro img {
  max-width: 200px;
  border-radius: 50%;
  float: left;
  shape-outside: circle();
  padding-right: 15px;
  margin-bottom: 1em;
  margin-top: 1em;
}

.frontIntro article {
  max-width: 70ch;
}

.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 auto;
}

.frontImgs img {
  max-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;
}

.page_title {
  /*
  clip-path: polygon(85% 14.64%, 80.38% 50%, 89.24% 69.88%, 24.73% 74.65%, 9.11% 54.95%, 18.93% 30.82%);
  background: #F6F6D1;*/
  background: radial-gradient(ellipse farthest-corner at bottom left, #F6F6D1 9%, #F6E3D1 18%, #F6D1D1 27%, #F6D1E4 36%, #F6D1F6 45%, #E4D1F6 54%, #D1D1F6 63%, #D1E4F6 72%, #D1F6F6 81%, #D1F6E3 90%, #E4F6D1 99%);
  padding: 10px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 2px solid #d1d1f6;
  border-radius: 3em;
  margin-bottom: 1em;
}

/*CSS for Portfolio page*/

.portfl_grid {
  display: grid;
  grid-template-columns: minmax(.5rem, 1fr) minmax(auto, 65ch) minmax(.5rem, 1fr);
  grid-template-rows: auto;
  font-size: 1.1rem;
  line-height: 1.8rem;
}

.portfl_intro {
  max-width: 65ch;

  grid-column: 2;
}

.portfl_intro_text>p {
  display: flex;
}

.email_temps {
  display: grid;
  grid-column: 2
}

.logo_intro {
  display: grid;
  grid-column: 2;
}

.dark_bkgrnd {
  background: linear-gradient(#3e3662, #a37ab6);
  border-radius: 1em;
}

.dark_bkgrnd img {
  padding: 10px;
}

.email_temps_gal, .websts_gal, .logo_gal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: space-evenly;
}

.email_temps_gal img, .websts_gal img, .logo_gal img {
  padding: 10px;
}

.websts {
  display: grid;
  grid-column: 2;
}

.portfl_intro_bttn {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  padding: 1em;
}

.portfl_button {
  background: linear-gradient(0.75turn, #776aad, #986aad, #ad6aa1);
  border: 3px double #6a7fad;
  padding: 10px 25px;
  margin: 5px 10px;
  border-radius: 0.5em;
}

.portfl_button:hover {
  background: linear-gradient(0.25turn, #867ab6, #a37ab6, #b67aab);
}

.portfl_button a {
  color: #fff;
  font-size: larger;
  text-decoration: none;
}

.websts_gal div {
  background-color: #fff0f5;
  border: 1px solid #ffd7e4;
  margin-bottom: 1em;
}

.websts_gal figcaption {
  background: linear-gradient(0.75turn, #776aad, #986aad, #ad6aa1);
  padding-top: 10px;
}

.websts_gal figcaption a {
  color: #fff;
  text-decoration: none;
}

/*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-column: 2;
  display: flex;
  flex-flow: column wrap;
  background-color: #fbfdfe;
  border: 2px dashed #bedeef;
  border-radius: 15px;
  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;
}

/*CSS unique to blog page*/
.blogwrap {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: min-content min-content 1fr;
  grid-template-areas:
    "blog blog_title"
    "blog blog_key"
    "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;
}

.blog_key {
  grid-area: blog_key;
  display: flex;
  height: min-content;
}

.sidebar img {
  border-radius: 1em;
  margin: 10px;
  border: 2px solid #d1d1f6;
}

.blog_title {
  grid-area: blog_title;
  background: radial-gradient(ellipse farthest-corner at bottom left, #F6F6D1 9%, #F6E3D1 18%, #F6D1D1 27%, #F6D1E4 36%, #F6D1F6 45%, #E4D1F6 54%, #D1D1F6 63%, #D1E4F6 72%, #D1F6F6 81%, #D1F6E3 90%, #E4F6D1 99%);
  border: 1px solid #d1d1f6;
  padding: 10px;
  margin: 0px 10px 0px 10px;
  border-radius: 15px 15px 0px 0px;
}

.blog_title h2 {
  display: flex;
  justify-content: center;
}

/*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;
  font-size: 1.1rem;
  line-height: 1.5rem;
}

.blog_main img {
  width: 20%;
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;

  shape-outside: margin-box;

}
.artcl {
  background-color: #fbfbfe;
  border: 1px solid #d1d1f6;
}

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: column nowrap;
  justify-content: center;
  margin: 10px 0px 15px 0px;
  text-align: center;
}

.blog_key {
  background-color: #fbfdfe;
  border: 2px dashed #d1d1f6;
  border-radius: 0px 0px 15px 15px;
  padding: 10px;
  margin: 0px 10px 15px 10px;
}

.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;
}

.cat_3dprint {
  background-color: #ceffff;
  border: 1px solid #9bffff;
}

.blog_main a {
  color: #2d68eb;
}

/*Working and Resume CSS*/
.resume {
  background: linear-gradient(#e7f3f9, #ede7f9, #f9e7f3);
  border: ridge 0.5em #ede7f9;
  border-radius: 10px 100px / 120px;
  padding: 50px;
  max-width: 60em;
}

.res_intro {
  margin: 1em;
}

.res_intro img {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 0.5em;
  margin-top: 1em;
  height: 50px;
  width: 50px;
  shape-outside: circle();
}

.res_intro {
  display: grid;
  grid-template-columns: 80% 20%;
  grid-template-rows: repeat(min-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "res_intro_text res_intro_pdf"
    "res_intro_text res_intro_read";
  max-width: 60em;
}

.res_intro_text {
  grid-area: res_intro_text;
}

.res_intro_pdf {
  grid-area: res_intro_pdf;
}

.res_intro_read {
  grid-area: res_intro_read;
}

.res_intro {
  margin-bottom: 1em;
}

.res_intro_pdf,
.res_intro_read {
  display: flex;
  justify-content: space-around;
}

.res_intro_pdf img,
.res_intro_read img {
  height: 50px;
  width: 50px;
}


.section_heading {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 60em;
}

.res_section_icon {
  height: 70px;
  width: 70px;
}

.schoolgrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(min-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "UMass"
    "MCC"
    "CCBC"
    "UMBC"
    "CSM"
    "HS";
}

.UMass {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: repeat(min-content);
  gap: 0px 0px;
  grid-auto-flow: column;
  grid-template-areas:
    "res_school ."
    "res_degree1 res_dates1"
    "res_degree2 res_dates2"
    "res_degree3 res_dates3";
}

.res_school {
  grid-area: res_school;
}

.res_degree1 {
  grid-area: res_degree1;
}

.res_dates1 {
  grid-area: res_dates1;
}

.res_degree2 {
  grid-area: res_degree2;
}

.res_dates2 {
  grid-area: res_dates2;
}

.res_degree3 {
  grid-area: res_degree3;
}

.res_dates3 {
  grid-area: res_dates3;
}

.schoolgrid h3 {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.UMass h4,
.MCC h4,
.CCBC h4,
.UMBC h4,
.CSM h4 {
  padding: 10px 0px 10px 0px;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

.MCC h5,
.CCBC h5,
.UMBC h5,
.CSM h5 {
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding: 5px 0px 10px 0px;
}

.res_degree1,
.res_degree2,
.res_degree3 {
  padding-left: 10px;
}

.res_dates1,
.res_dates2,
.res_dates3 {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.addtl_courses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px 15px;
  grid-template-areas:
    "MCC CCBC"
    "UMBC CSM";
}

.MCC {
  grid-area: MCC;
}

.CCBC {
  grid-area: CCBC;
}

.UMBC {
  grid-area: UMBC;
}

.CSM {
  grid-area: CSM;
}

.res_schools,
.res_program {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.UMass {
  border: 3px dashed #c6dcf4;
  background: linear-gradient(0.75turn, #fcf1f6, #d6e6f7, #f7f1fc);
  padding: 1.5em;
}

.MCC,
.CCBC,
.UMBC,
.CSM {
  padding: 10px;
  border: 1px solid #c6dcf4;
  background-color: #d6e6f7;
}

.work_div {
  text-align: center;
}

.workgrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(min-content);
  gap: 20px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "work_one"
    "work_two"
    "work_three"
    "work_four"
    "work_five"
    "work_six";
}

.job_heading,
.hobby_heading {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "res_company res_company"
    "res_title res_dates";
}

.res_company {
  grid-area: res_company;
}

.res_title {
  grid-area: res_title;
}

.res_dates {
  grid-area: res_dates;
}

.res_dates,
.res_dates_extra {
  display: flex;
  justify-content: flex-end;
}

.job_heading_extra {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "res_title_extra res_dates_extra";
}

.res_title_extra {
  grid-area: res_title_extra;
}

.res_dates_extra {
  grid-area: res_dates_extra;
}

.job_heading h3,
.job_heading h4,
.hobby_heading h3,
.hobby_heading h4,
.job_heading_extra h4 {
  margin: 10px 0px 10px 0px;
}

.res_descrpt,
.res_skills {
  max-width: 60em;
}

.res_descrpt {
  text-indent: 2rem;
}

/*CSS for Resume & Interview Article Pages*/
/*
.resume_article_full,
.interview_article_full {
  background: linear-gradient(#e7f3f9, #ede7f9, #f9e7f3);
  border: ridge 0.5em #ede7f9;
  border-radius: 10px 100px / 120px;
  padding: 50px;
}

.resume_article_intro_text,
.resume_article_text,
.interview_article_intro_text,
.interview_article_text {
  line-height: 1.5rem;
  max-width: 60em;
}

.resume_article p+p {
  text-indent: 2rem;
}

.interview_article p {
  text-indent: 2rem;
}
*/
/*replaced this with standard page css*/
/*CSS for Contact Page*/

.contact_info {
  display: grid;
  grid-template-columns: minmax(.5rem, 1fr) minmax(auto, 65ch) minmax(.5rem, 1fr);
  margin: 1em;
  font-size: 1.1rem;
  line-height: 1.8rem;
}

.contact_info h4, .contact_info p, .contact_info div {
  grid-column: 2;
}

.form_back {
  display: flex;
  background: linear-gradient(#e7f3f9, #ede7f9, #f9e7f3);
  border: 2px solid #d1d1f6;
  /*border-radius: 10px 100px / 120px;*/
  /*background-color: #b6ace3;*/
  padding: 1em;
  flex-flow: column wrap;
  align-content: flex-start;
  justify-content: space-evenly;
}

.contact_form {
  padding: 2em 1em 2em 1em;
  max-width: 100%;
  font-size: 1.1rem;
  line-height: 1.8rem;
}

.contact_label,
.contact_entry,
.contact_submit {
  margin: 10px;
}

.sm_layout, .sm_extra {
  display: flex;
}

.sm_layout img, .sm_extra img {
  max-width: 75px;
  margin: 10px;
}


.contact_submit {
  background: linear-gradient(0.75turn, #776aad, #986aad, #ad6aa1);
  border: 3px double #6a7fad;
  padding: 10px 25px;
  margin: 5px 10px;
  border-radius: 0.5em;
}

.contact_submit:hover {
  background: linear-gradient(0.25turn, #867ab6, #a37ab6, #b67aab);
}

.contact_submit {
  color: #fff;
  text-decoration: none;
}

/*CSS for Advent Page*/

.the-girl-next-door-regular {
  font-family: "The Girl Next Door", cursive;
  font-weight: 700;
  font-style: normal;
  font-size: xx-large;
}

.advent_back {
  background-color: #ddeaf7;
  border: 2px solid #d1e3f6;
  border-radius: 0.25em;
  background-image: url("../static/img/fresh-snow.png");
  padding: 0.5em;
}

/*what about doing trees instead of snow?*/

.advent_cal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "one two three four"
    "five two six seven"
    "eight nine ten seven"
    "eleven twelve thirteen fourteen"
    "eleven fifteen sixteen seventeen"
    "eighteen nineteen twenty twentyone"
    "twentytwo twentythree twenty twentyfour";
}

.advent_cal {
  padding: 20px;
}

.advent_cal_block {
  padding: 5px;
  text-align: center;
  border-radius: 0.25em;
}

.one,
.seven,
.thirteen,
.nineteen {
  background-color: #bcd7f2;
  border: 2px solid #a7caee;
}

.two,
.eight,
.fourteen,
.twenty {
  background-color: #d7bcf2;
  border: 2px solid #caa7ee;
}

.three,
.nine,
.fifteen,
.twentyone {
  background-color: #f6d1e4;
  border: 2px solid #eea6cb;
}

.four,
.ten,
.sixteen,
.twentytwo {
  background-color: #f6e4d1;
  border: 2px solid #eecba6;
}

.five,
.eleven,
.seventeen,
.twentythree {
  background-color: #d1f6e4;
  border: 2px solid #91eabe;
}

.six,
.twelve,
.eighteen,
.twentyfour {
  background-color: #f4f6d1;
  border: 2px solid #dfe67c;
}

.one:hover,
.seven:hover,
.thirteen:hover,
.nineteen:hover {
  background-color: #d1e4f6;
  border: 2px solid #bcd7f2;
}

.two:hover,
.eight:hover,
.fourteen:hover,
.twenty:hover {
  background-color: #e4d1f6;
  border: 2px solid #d7bcf2;
}

.three:hover,
.nine:hover,
.fifteen:hover,
.twentyone:hover {
  background-color: #f9e1ee;
  border: 2px solid #f6d1e4;
}

.four:hover,
.ten:hover,
.sixteen:hover,
.twentytwo:hover {
  background-color: #faf1e6;
  border: 2px solid #f6e4d1;
}

.five:hover,
.eleven:hover,
.seventeen:hover,
.twentythree:hover {
  background-color: #e6faf1;
  border: 2px solid #d1f6e4;
}

.six:hover,
.twelve:hover,
.eighteen:hover,
.twentyfour:hover {
  background-color: #f9fae6;
  border: 2px solid #f4f6d1;
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}

.five {
  grid-area: five;
}

.six {
  grid-area: six;
}

.seven {
  grid-area: seven;
}

.eight {
  grid-area: eight;
}

.nine {
  grid-area: nine;
}

.ten {
  grid-area: ten;
}

.eleven {
  grid-area: eleven;
}

.twelve {
  grid-area: twelve;
}

.thirteen {
  grid-area: thirteen;
}

.fourteen {
  grid-area: fourteen;
}

.fifteen {
  grid-area: fifteen;
}

.sixteen {
  grid-area: sixteen;
}

.seventeen {
  grid-area: seventeen;
}

.eighteen {
  grid-area: eighteen;
}

.nineteen {
  grid-area: nineteen;
}

.twenty {
  grid-area: twenty;
}

.twentyone {
  grid-area: twentyone;
}

.twentytwo {
  grid-area: twentytwo;
}

.twentythree {
  grid-area: twentythree;
}

.twentyfour {
  grid-area: twentyfour;
}

/*CSS for Cross Stitch 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(/static/img/cs_stardew_gems.png) no-repeat center center;
  background-size: cover;
}

.block2 {
  background: url(/static/img/cs_shaymin.png) no-repeat center center;
  background-size: cover;
}

.block3 {
  background: url(/static/img/cs_mnb_weddingbiscornu.png) no-repeat center center;
  background-size: cover;
  grid-column: 3 / 5;
}

.block4 {
  background: url(/static/img/cs_hpbiscornu.png) no-repeat center center;
  background-size: cover;
  grid-row: 2 / 4;
}

.block5 {
  background: url(/static/img/cs_asirra_catslimes.png) no-repeat center center;
  background-size: cover;
  grid-column: 2/4;
}

.block6 {
  background: url(/static/img/cs_snowflakesal.png) no-repeat center center;
  background-size: cover;
}

.block7 {
  background-color: #d1d1f6;
  border-radius: 10px;
  grid-column: 2 / 5;
  padding: 10px;
  border: 2px dashed #e8e7fa;
  margin: 5px;
}

.block7_text {
  padding: 1em;
}

.block7 a {
  color: #0450a3;
}

.block7 a:hover {
  color: #0675ee;
}

.block7 a:active {
  color: #f92d8f;
}

.block8 {
  background: url(/static/img/cs_lpotl.png) no-repeat center center;
  background-size: cover;
}

.block9 {
  background: url(/static/img/cs_firstattempt.png) no-repeat center center;
  background-size: cover;
  grid-column: 2/4;
}

.block10 {
  background: url(/static/img/cs_jpn_biscornu.png) no-repeat center center;
  background-size: cover;
}

.block11 {
  background: url(/static/img/cs_ukrn_bisc_small.png) no-repeat center center;
  background-size: cover;
  grid-column: 1/3;
}

.block12 {
  background: url(/static/img/cs_strawberry_bookmark.png) no-repeat center center;
  background-size: cover;
}

.block13 {
  background: url(/static/img/cs_junimomagnet.png) no-repeat center center;
  background-size: cover;
}

/* CSS for Apple Dumpling 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 Nails Page*/

.nptool_details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.nptool_key {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  max-height: min-content;
}

.nptool_key ol {
  padding-inline-start: 10px;
}

.nptool_entry {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas:
    "nptool_title nptool_title"
    "nptool_desc nptool_img";
}

.nptool_img {
  display: flex;
  justify-content: center;
}

.nptool_img img {
  max-width: 200px;
  max-height: 200px;
  padding: 15px;
}

.nptool_title {
  grid-area: nptool_title;
}

.nptool_desc {
  grid-area: nptool_desc;
}

.nptool_img {
  grid-area: nptool_img;
}

.nptool1, .nptool2, .nptool3 {
  display: grid;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "nptool_hd"
    "nptool_lst";
}

.nptool_hd {
  grid-area: nptool_hd;
}

.nptool_lst {
  grid-area: nptool_lst;
}

.nptool_lst ul {
  list-style-type: none;
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-inline-start: 0px;
}

.nptool_lst ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.nptool_lst ul li {
  padding: 10px;
  margin: 5px 10px;
}

/*CSS for Designing page*/

.sg_image {
  max-width: 300px;
  padding: 15px;
}

.fav_wdtools {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: center;
  grid-column: 2;
}

.fav_wdbutton {
  background: linear-gradient(0.75turn, #776aad, #986aad, #ad6aa1);
  border: 3px double #6a7fad;
  padding: 10px 25px;
  margin: 5px 10px;
  border-radius: 0.5em;
}

.fav_wdbutton:hover {
  background: linear-gradient(0.25turn, #867ab6, #a37ab6, #b67aab);
}

.fav_wdbutton a {
  color: #fff;
  font-size: larger;
  text-decoration: none;
}