/* reset */
:root {
  --header-bg-color: hsla(195, 100%, 15%, 1);
  --header-bg-color-light: rgb(5, 68, 91);
  --lightgreen: rgb(200, 245, 200);
  --color-code-lightsalmon-darker: hsl(17, 100%, 49%);
  --lightsalmon: hsla(17, 100%, 74%, 1);
  --color-code-lightsalmon-light: hsla(17, 100%, 74%, .2);
  --color-code-lightsalmon-lighter: hsla(17, 100%, 74%, .1);
  --orange-very-light: hsl(24, 81%, 87%);
  --orange-very-very-light: hsl(24, 40%, 87%);
  /* --box-shadow: rgb(161, 213, 247); */
  --box-shadow: hsla(204, 84%, 80%, 1);
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #777;
  --color-light: #efefef;
  --color-light-grey: #f1f2f3;
  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: var(--color-white);
  --formula: #fff2e6;
  --formula-background: var(--formula);

  --color-code-comment: #a9aaad;
  --color-code-white: #c5c9c6;
  --color-code-red-darker: hsl(0, 54%, 36%);
  --color-code-red: #d16464;
  --color-code-red-light: hsla(0, 54%, 61%, .15);
  --color-code-red-lighter: hsla(0, 54%, 61%, .075);
  --color-code-orange-darker: hsl(25, 66%, 37%);
  --color-code-orange: #de935f;
  --color-code-orange-light: hsla(25, 66%, 62%, .2);
  --color-code-orange-lighter: hsla(25, 66%, 62%, .1);
  --color-code-yellow-darker: hsl(40, 81%, 35%);
  --color-code-yellow: #f0c674;
  --color-code-yellow-light: hsla(40, 81%, 70%, .2);
  --color-code-yellow-lighter: hsla(40, 81%, 70%, .1);
  --color-code-green-darker: hsl(76, 39%, 32%);
  --color-code-green: #a7bd68;
  --color-code-green-light: hsla(76, 39%, 57%, .2);
  --color-code-green-lighter: hsla(76, 39%, 57%, .1);
  --color-code-aqua-darker: hsl(172, 29%, 39%);
  --color-code-aqua: #8abeb7;
  --color-code-aqua-light: hsla(172, 29%, 64%, .2);
  --color-code-aqua-lighter: hsla(172, 29%, 64%, .1);
  --color-code-blue--darker: hsla(214, 34%, 37%);
  --color-code-blue: #7e9abf;
  --color-code-blue--light: hsla(214, 34%, 62%, .2);
  --color-code-blue-lighter: hsla(214, 34%, 62%, .1);
  --color-code-purple-darker: hsl(286, 22%, 41%);
  --color-code-purple: #b294bb;
  --color-code-purple-light: hsla(286, 22%, 66%, .2);
  --color-code-purple-lighter: hsla(286, 22%, 66%, .1);
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

ul,
h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0;
}

/* End reset */

:root {
  --box-shadow: hsla(220, 89%, 62%, 1);
  --header-bg-color: hsla(195, 100%, 15%, 1);
  --header-text-color: hsla(54, 100%, 50%, 1);
  --nav-text-color: hsla(54, 100%, 75%, 1);
  --white: #fff;
}

html {
  font-size: 10px;
}

body {
  margin: 0 auto;
  line-height: 1.5;
  padding: 0;
  max-width: 1024px;
}

body {
  padding: 0;
}


/* This group is the header for project and projects */

.additional-info {
  font-family: serif;
  font-style: italic;
  color: var(--color-grey);
  margin-top: .8rem
}

.alignleft {
  text-align: left;
}

header.projects {
  margin-top: 1.5rem;
  margin-bottom: 1.2vw;
}

.headline {
  font-size: clamp(2rem, 1.81vw + .87rem, 3.4rem);
}

.subheadline {
  font-size: clamp(1.4rem, .76vw + 1.13rem, 2.2rem);
  margin-top: .8rem;
}

/* End project and projects header group */


@media screen and (min-width: 640px) {
  article p {
    max-width: 65ch;
  }
}

article p {
  margin: 0 auto .8rem auto;
  margin-block-start: 0;
  margin-inline-start: 1.2rem;
  margin-block-end: .8rem;
  margin-inline-end: 1.2rem;
  max-width: 100%;
}

.bulleted {
  margin-left: 2rem;
}

li {
  font-size: clamp(1.4rem, .76vw + 1.13rem, 2.2rem);
}

@media screen and (min-width: 640px) {
  h3 {
    font-size: 2.5rem;
  }
}

h1 {
  font-size: clamp(2.4rem, 1.81vw + .87rem, 3.4rem);
}

h2 {
  font-size: clamp(1.8rem, 1.43vw + .5rem, 2.5rem);
}

h2.page-title {
  font-size: clamp(2.4rem, 1.81vw + .87rem, 3.4rem);
}

h2.project-title {
  margin-bottom: 2.5rem;
}

h3 {
  font-size: clamp(2.2rem, .76vw + 1.13rem, 2.8rem);
  margin-block-end: .8rem;
  font-weight: 500;
}

.column h3 {
  font-weight: 700;
}

h4 {
  font-size: 1.95rem;
  margin-block-start: 1rem;
}

h4+p {
  margin-block-start: 1rem;
}

h5 {
  font-size: 1.8rem;
}

h6 {
  font-size: 1.65rem;
}

.center {
  text-align: center;
}

@media screen and (min-width: 640px) {
  cite p {
    font-size: 1.6rem;
    line-height: 1.4;
  }
}

cite p {
  color: var(--dk-grey);
  color: grey;
  display: block;
  caption-side: bottom;
  font-size: 1.6rem;
}

cite {
  color: var(--dk-grey);
  color: grey;
  display: block;
  caption-side: bottom;
  font-size: 1.6rem;
  line-height: 1.4;
  margin-block-end: .8rem;
}

code {
  font-size: 1.6rem;
  padding: .8rem;
}

.coverintro {
  margin: 2rem auto 0 auto;
}

figure {
  display: block;
  text-align: center;
  padding: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  border: solid 4px transparent;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
}

figcaption {
  caption-side: bottom;
  font-size: 1.6rem;
  margin: 0 .4rem .2rem .4rem;
  color: var(--color-text);
  line-height: 1.25;
}

@media screen and (min-width: 640px) {
  figcaption {
    font-size: 1.6rem;
    line-height: 1.4;
    margin-block-end: .8rem;
  }
}

figcaption p.caption {
  font-size: 1.6rem;
  padding: 0;
  margin: 0;
}

figcaption p {
  caption-side: bottom;
  font-size: 1.8rem;
  color: var(--color-text);
  line-height: 1.4;
  margin-block-start: 0;
  margin-block-end: .8rem;
}

figcaption p.citation {
  font-size: 1.4rem;
  font-style: italic;
  padding: 0;
  margin: 0;
}

.figure {
  max-width: 100%;
  transition: box-shadow 200ms ease-out;
  border-radius: 0;
}

.figure p {
  font-size: 1.2rem;
  padding-top: 0;
  padding-bottom: 0;
}

.figure .figure-caption {
  display: inline-block;
}

.figure-lft {
  margin: 1.6rem 40px 1.6rem 0;
}


.footer::before {

  content: "";
  display: block;
  height: 2px;
  background: var(--color-black);
  margin-bottom: 1.5rem;
}

.floatleft {
  float: left;
  margin-left: 4rem;
  margin-right: 4rem;
}

.gradient-text {
  background-image: linear-gradient(45deg, var(--color-code-purple), var(--color-code-aqua), var(--color-code-green), var(--color-code-yellow), var(--color-code-orange), var(--color-code-red));
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

hr {
  margin: 3rem 5rem;
}

img {
  max-width: 100%;
  height: auto;
  margin-block-end: .8rem;
  font-size: 2.4rem;
}

/* puts a dashed border around images lacking the alt tag */

img[alt=""],
img:not([alt]) {
  border: 3px dashed #c00
}

li {
  line-height: 1.25;
  list-style: none;
}

@media screen and (min-width: 640px) {
  li.project-list:nth-of-type(1n) {
    grid-template-columns: 3fr 2fr;
  }

  li.project-list:nth-of-type(1n) .project-text {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    padding-right: 3rem;
  }

  li.project-list:nth-of-type(1n) .project-image {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: center;
  }

  li.project-list:nth-of-type(2n) {
    grid-template-columns: 2fr 3fr;
  }

  li.project-list:nth-of-type(2n) .project-image {
    grid-column: 1 / 2;
    align-self: center;
  }

  li.project-list:nth-of-type(2n) .project-text {
    grid-column: 2 / 3;
    padding-left: 3rem;
  }
}

.margin-2 {
  margin-bottom: 2rem;
}

p {
  /*font-size: clamp(140%, .76vw + 1.33rem, 160%);*/
  font-size: 1.8rem;
  line-height: 1.5;
  margin-block-end: 1rem;
}


@media screen and (min-width: 640px) {
  p {
    font-size: clamp(1.6rem, .76vw + 1.33rem, 2.4rem);
  }
}


p.ch-width-60 {
  max-width: 60ch;
}

.page-header-nav a:hover {
  text-decoration: underline;
  background: #0083b3;
  font-weight: 800;
}

.page-subtitle {
  font-size: clamp(1.8rem, 1.43vw + .5rem, 2.5rem);
  font-weight: bold;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0;
}

.page-header {
  background-color: hsla(195, 100%, 15%, 1);
  background-color: var(--main-header-color);
  padding: 2rem 0 2.4rem 0;
}

/* check .project-list use in home page- perhaps change class */
.project-list {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.project-text ul li {
  margin-left: 4rem;
  font-size: 1.85rem;
}

.project-title {
  grid-row: 1;
  text-align: center;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  margin: 10px auto;
}

/* check .project-list use in home page- perhaps change class */
@media screen and (min-width: 640px) {
  .project-list {
    display: grid;
    gap: 20px;
  }

  .project-title {
    grid-column: 1/3;
  }
}

.text-left {
  text-align: left;
}

ul.projects {
  padding-left: 0;
}

ul.projects li:first-child {
  margin-top: 2rem;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Set grid for header and nav */

.header-main {
  display: grid;
  grid-template-columns: 27.5% 72.5%;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

.header-logo-box {
  grid-column: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  padding-left: 1rem;
  position: relative;
  z-index: 2;
  padding-top: 2px;
}

.header-top {
  grid-row: 1;
  grid-column: 1 / 3;
  background-color: #fff;
  padding-top: 2px;
}

.header-spacer {
  grid-column: 1;
  grid-row: 2;
  /* background-color: var(--header-bg-color); */
}

.header-text {
  grid-column: 2;
  grid-row: 2;
  /* background-color: var(--header-bg-color); */
  padding-top: clamp(.7rem, 2.19vw - .07rem, 3rem);
  padding-bottom: clamp(.7rem, 1.24vw + .27rem, 2rem)
}

.header-bottom {
  grid-row: 3;
  grid-column: 1 / 3;
  background-color: #fff;
  z-index: 1;
}

.header-nav {
  grid-column: 1 / 3;
  grid-row: 4;
  /* background-color: var(--header-bg-color); */
  border-top: 2px solid var(--white);
}

.header-nav-xtra {
  grid-column: 1 / 3;
  grid-row: 5;
  background-color: var(--header-bg-color);
}

.nav-main {
  display: flex;
  flex: 0 1 auto;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.nav-main li {
  text-decoration: none;
  list-style: none;
  text-align: center;
  border-right: 1px solid var(--box-shadow);
  font-size: clamp(1.6rem, .95vw + .67rem, 2rem);
}

.nav-colors li:nth-child(8n+1) {
  background-color: hsla(286, 22%, 66%, .2);
}

.nav-colors li:nth-child(8n+2) {
  background-color: hsla(40, 81%, 70%, .2);
}

.nav-colors li:nth-child(8n + 3) {
  background-color: hsla(172, 29%, 64%, .2);
}

.nav-colors li:nth-child(8n + 4) {
  background-color: hsla(0, 54%, 61%, .15);
}

.nav-colors li:nth-child(8n + 5) {
  background-color: hsla(214, 34%, 62%, .2);
}

.nav-main li:nth-child(8n + 6) {
  background-color: hsla(25, 66%, 62%, .2);
}

.nav-colors li:nth-child(8n + 7) {
  background-color: hsla(76, 39%, 57%, .2);
}

.nav-colors li:nth-child(8n + 8) {
  background-color: hsla(17, 100%, 74%, .2);
}

.nav-main li a {
  color: var(--header-bg-color);
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  text-decoration: none;
  padding: .5rem 1rem;
  display: flex;
  flex: 1;
  align-content: center;
  /* will vertically center multi-line text */
  align-items: center;
  /* will vertically center single-line text */
}

.nav-main li:last-child {
  border-right: none;
}

.nav-main li:hover {
  text-decoration: underline;
}

/* End mobile header and nav elements */


/* Set large screen header and nav elements */

@media screen and (min-width: 960px) {
  .header-main {
    grid-template-rows: 3rem auto auto 3rem;
  }

  .header-logo-box {
    grid-column: 1;
    grid-row: 1 / 5;
    align-self: center;
  }

  img .header-logo {
    width: 100%;
  }

  .header-top {
    grid-row: 1;
    grid-column: 1 / 3;
  }

  .header-text {
    grid-column: 2;
    grid-row: 2;
    /* background-color: hsla(195, 100%, 15%, 1); */
  }

  .header-spacer {
    grid-column: 1;
    grid-row: 2 / 4;
    /* background-color: hsla(195, 100%, 15%, 1); */
  }

  .header-bottom {
    grid-row: 4;
    grid-column: 1 / 3;
  }

  .header-nav {
    grid-column: 2;
    grid-row: 3;
    /* background-color: hsla(195, 100%, 15%, 1); */
    border-top: none;
  }

  .nav-main {
    /* background-color: hsla(195, 100%, 15%, 1); */
    justify-content: center;
    border-top: none;
  }

  .header-nav li a {
    padding: 1rem 1.35rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* End large screen set header and nav elements */

.page-margin {
  margin-left: 2rem;
  margin-right: 2rem;
}

.page-title {
  margin: 0;
  text-align: center;
  font-weight: bold;
  letter-spacing: .2rem;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  color: var(--header-bg-color);
}

.page-subtitle {
  color: var(--main-header-color);
  font-family: Georgia, serif;
  font-style: italic;
  text-align: center;
  letter-spacing: .15rem;
}

/*
@media screen and (max-width: 640px) {
  .page-subtitle {
    display: none;
  }
}
*/
.floatright {
  float: right;
  margin: 0 1rem;
}



.red {
  color: red;
}

/* Might want to put this in the blog.css */
.clearboth {
  clear: both
}

body.home li.home a,
body.articles li.articles a,
body.blog li.blog a,
body.contact li.contact a,
body.panels-for-sale li.panels-for-sale a,
body.publicprojects li.publicprojects a {
  box-shadow: 0 0 20px 0 var(--box-shadow);
  background-color: var(--header-bg-color);
  color: var(--orange-very-light);
  border-bottom: 1px solid var(--box-shadow);
}

@media screen and (min-width: 640px) {
  br.responsive {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  br.responsive {
    display: inline;
  }
}

hr.intro {
  width: 40rem;
  margin: 2rem auto;
}

.noborder {
  border: none;
}

img:not([alt]) {
  border: 3px solid red;
}

/* Moved here from starter.css- 10rem changed to 16rem */
.autogrid {
  --gutter: 1rem;
  --min: 16rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
  align-items: center;
}

/* Gather the projects grid components */


@media screen and (min-width: 640px) {
  .grid-gallery {
    display: grid;
    --columns: 24;
    --gutter: 3rem;
    grid-column-gap: var(--gutter);
    grid-template-columns: repeat(24, 1fr);
    grid-row-gap: 1rem;
  }
}

/* 
@media screen and (min-width: 640px) {
  .grid-gallery {
    display: grid;
    --columns: 24;
    --gutter: 3rem;
    grid-column-gap: var(--gutter);
    grid-template-columns: 1fr;
  }
} */

@media screen and (max-width: 639px) {
  .grid-gallery {
    display: block;
    /* --columns: 24; */
    --gutter: 3rem;
    grid-column-gap: var(--gutter);
    grid-template-columns: 1fr;
  }
}

.grid {
  --columns: 24;
  --gutter: 3rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}

@media screen and (min-width: 640px) {

  .grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }

  /* Could be we need grid-column: span var(--span) */
  .grid>.column {
    grid-column: span var(--columns);
  }
}


@media screen and (min-width: 640px) {
  .grid {
    --columns: 12;
    --gutter: 3rem;
    display: grid;
    grid-gap: var(--gutter);
    /* grid-template-columns: 1fr; */
  }
}

.grid>.column {
  /* margin-bottom: var(--gutter); */
  align-self: center;
}

.gallery-image {
  display: grid;
  grid-gap: 1.2rem;
}

/* .grid-list {
  grid-row: 1 / 4;
  display: grid;
} */
@media screen and (min-width: 640px) {
  .grid-figure {
    margin: 0;
  }
}

.grid-figure {
  display: grid;
  grid-row: 1 / 4;
  grid-template-rows: subgrid;
  margin-top: 1rem;
}

section.grid {
  margin: 1rem 0 0 0;
}

@media screen and (min-width: 640px) {
  section.grid {
    margin: 1rem auto 0 auto;
  }
}


/* End gather project grid components */

.grid-figure a {
  align-self: center;
  /* margin-top: 3rem; */
}

@media screen and (min-width: 640px) {
  .grid-figure a {
    margin-top: 0;
  }
}


.grid-figure figcaption {
  margin: 0;
}

.page-link a {
  color: brown;
  font-size: 1.6rem;
  font-style: italic;
}

@media screen and (min-width: 640px) {
  .page-link a {
    font-size: 2.4rem;
  }
}

.project-title a {
  color: brown;
}

.text h1,
.h1,
.intro {
  text-align: center;
}

li.projects:nth-of-type(8n+1) {
  background-color: var(--color-code-purple-lighter);
}

li.projects:nth-of-type(8n+2) {
  background-color: var(--color-code-yellow-lighter);
}

li.projects:nth-of-type(8n+3) {
  background-color: var(--color-code-aqua-lighter);
}

li.projects:nth-of-type(8n+4) {
  background-color: var(--color-code-red-lighter);
}

li.projects:nth-of-type(8n+5) {
  background-color: var(--color-code-blue-lighter);
}

li.projects:nth-of-type(8n+6) {
  background-color: var(--color-code-orange-lighter);
}

li.projects:nth-of-type(8n+7) {
  background-color: var(--color-code-green-lighter);
}

li.projects:nth-of-type(8n+8) {
  background-color: var(--color-code-lightsalmon-lighter);
}

.projects li {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  margin-left: -2rem;
  margin-right: -2rem;
  padding-top: 1rem;
  list-style: none;
}

.blocks ul {
  margin-top: 1.2rem;
}

.blocks li {
  font-size: clamp(1.4rem, .76vw + 1.13rem, 2.2rem);
  list-style-type: disc;
  list-style-position: inside;
  text-indent: -20px;
  margin-left: 20px;
}

.blog-intro {
  text-align: left;
}

.formula {
  font-family: Calibri, 'Courier New', Courier, monospace;
  background-color: #fff2e6;
  font-size: 2rem;
  margin-block-start: 1rem;
}

.h3 {
  margin-inline-start: 0;
  font-size: clamp(1.6rem, .76vw + 1.13rem, 2.4rem);
  font-weight: 500;
  text-align: left;
}

pre {
  text-align: center;
  margin-block-start: 1.8rem;
  margin-block-end: 1.8rem;
  background: #f5f2f0;
  background: oklch(94.71% 0.025 69.88);
  border: .005rem solid black;
  padding-block-start: .8rem;
  padding-block-end: .8rem;
}

pre {
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
}

code {
  background: #f5f2f0;
  background: oklch(94.71% 0.025 69.88);
  /* border: .005rem solid black; */
  padding-block-start: 0;
  padding-block-end: 0;
}