@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Syne:wght@400..800&display=swap");
html {
  margin: 0;
  padding: 0; }

body {
  font-family: 'IBM Plex Mono', sans-serif;
  line-height: 1.88889;
  background-image: url("starry_background.png"); }

.page-wrapper {
  width: 95%;
  margin: 75px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

#zen-supporting {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto; }

p {
  margin-top: 0;
  color: #FFFEFE; }

h1 {
  font: 4rem 'Syne', sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  color: #fefefe;
  margin-bottom: 18rem;
  position: relative; }

h1::after {
  content: "";
  position: absolute;
  background-image: url("planete.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 400px;
  height: 400px;
  left: 290px;
  top: 100px; }

header {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-direction: column;
  width: 65%;
  height: 500px;
  text-align: center;
  background: rgba(0, 123, 255, 0.15);
  border: solid 1px #007BFF;
  border-radius: 12px;
  margin-right: 1rem;
  margin-bottom: 40px; }

h2 {
  text-transform: uppercase;
  color: #93C155; }

h3 {
  font: 1.4em 'Syne', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px; }

.summary {
  position: relative; }

.summary::before {
  content: "";
  position: absolute;
  background-image: url("sparkles.png");
  background-repeat: repeat-y;
  background-size: contain;
  width: 50px;
  height: 510px;
  left: -65px; }

.summary::after {
  content: "";
  position: absolute;
  background-image: url("smiley.png");
  background-repeat: repeat-y;
  background-size: contain;
  width: 180px;
  height: 180px;
  top: 350px;
  right: 90px; }

#zen-summary {
  width: 25%;
  height: 300px;
  background-color: rgba(173, 144, 189, 0.15);
  border: solid 1px #AD90BD;
  border-radius: 12px;
  padding: 15px;
  margin-left: 1.5rem; }

#zen-intro {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 3rem; }

#zen-preamble, #zen-requirements {
  background-color: rgba(173, 144, 189, 0.15);
  border: solid 1px #AD90BD;
  border-radius: 12px;
  width: 70%;
  padding: 15px; }

#zen-preamble {
  position: relative;
  margin-left: 370px; }

#zen-preamble::before {
  content: "";
  position: absolute;
  background-image: url("gradientsparkle1.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 180px;
  height: 180px;
  left: -275px;
  top: 95px; }

#zen-preamble h3, #zen-requirements h3 {
  color: #AD90BD; }

#zen-explanation h3 {
  color: #007BFF; }

#zen-explanation {
  background-color: rgba(0, 123, 255, 0.15);
  border: solid 1px #007BFF;
  border-radius: 12px;
  padding: 15px;
  margin: 50px auto;
  position: relative;
  width: 70%;
  margin-left: 0; }

#zen-explanation::after {
  content: "";
  position: absolute;
  background-image: url("alienhead.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 250px;
  height: 250px;
  right: -300px;
  top: 100px; }

#zen-participation h3 {
  color: #93C155; }

#zen-participation {
  background-color: rgba(147, 193, 85, 0.15);
  border: solid 1px #93C155;
  border-radius: 12px;
  padding: 15px;
  width: 40%;
  position: relative;
  margin: 50px 15% 50px 0px; }

#zen-participation::after {
  content: "";
  position: absolute;
  background-image: url("bluesparkle.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 175px;
  height: 175px;
  top: 200px;
  right: -200px; }

#zen-benefits h3 {
  color: #DC8E3E; }

#zen-benefits {
  background-color: rgba(220, 142, 62, 0.15);
  border: solid 1px #DC8E3E;
  border-radius: 12px;
  padding: 15px;
  width: 30%;
  margin: 50px 0px; }

#zen-requirements {
  margin: 25px 25px 50px 25px;
  width: 60%;
  position: relative; }

#design-selection h3 {
  color: #DC8E3E;
  background-color: rgba(220, 142, 62, 0.15);
  border: solid 1px #DC8E3E;
  border-radius: 12px;
  padding: 15px; }

#design-selection nav li {
  background-color: rgba(147, 193, 85, 0.15);
  border: solid 1px #93C155;
  border-radius: 12px;
  padding: 15px;
  width: 35%;
  height: 75px; }

#design-selection nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 50%;
  gap: 25px;
  margin: 0 auto; }

#design-selection {
  position: relative; }

#design-selection::before {
  position: absolute;
  content: "";
  background-image: url("gradientsparkle1.png");
  width: 250px;
  height: 250px;
  background-size: contain;
  background-repeat: no-repeat;
  top: 200px;
  left: 50px; }

#design-selection::after {
  position: absolute;
  content: "";
  background-image: url("purpleorangesparkle.png");
  width: 250px;
  height: 250px;
  background-size: contain;
  background-repeat: no-repeat;
  top: 200px;
  right: 50px; }

#zen-resources {
  color: #DC8E3E;
  background-color: rgba(220, 142, 62, 0.15);
  border: solid 1px #DC8E3E;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  width: 30%;
  margin: 100px 0px 50px 50%;
  position: relative; }

#zen-resources::before {
  content: "";
  background-image: url("spaceship.png");
  background-repeat: no-repeat;
  height: 350px;
  width: 350px;
  position: absolute;
  background-size: contain;
  left: -500px; }

#zen-resources li {
  list-style: none;
  text-decoration: underline;
  line-height: 2rem; }

#design-archives nav ul li {
  display: inline-block; }

#design-archives nav ul {
  width: 95%;
  margin: 0 auto;
  text-align: center; }

a:link {
  font-weight: bold;
  text-decoration: none;
  background: -webkit-linear-gradient(#007BFF, #93C155);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

a:visited {
  font-weight: bold;
  text-decoration: none;
  background: -webkit-linear-gradient(#AD90BD, #DC8E3E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

a:hover, a:focus, a:active {
  text-decoration: underline;
  background: -webkit-linear-gradient(#93C155, #007BFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

#zen-intro {
  display: flex; }

#zen-summary {
  width: 25%;
  background-color: rgba(173, 144, 189, 0.15);
  border: solid 1px #AD90BD;
  border-radius: 12px;
  position: relative; }

footer::before {
  content: "";
  position: absolute;
  background-image: url("sparkles.png");
  background-repeat: repeat-y;
  background-size: contain;
  width: 50px;
  height: 800px;
  left: -65px;
  top: -165px; }

footer {
  display: flex;
  flex-direction: column;
  width: 25%;
  margin-left: 4rem;
  position: relative;
  background: rgba(0, 123, 255, 0.15);
  border: solid 1px #007BFF;
  border-radius: 12px;
  padding: 15px; }

footer a {
  margin-bottom: 25px; }

footer a:first-child::after {
  content: " - Check the validity of this Site's HTML"; }

footer a:nth-child(2)::after {
  content: " - Check the validity of this site's CSS"; }

footer a:nth-child(3)::after {
  content: " - View the Creative Commons license of this site: Attribution-NonCommercial-ShareAlike."; }

footer a:nth-child(4)::after {
  content: " - Read about the accessibility of this site"; }

footer a:nth-child(5)::after {
  content: " - Fork this site on Github"; }

/*media queries */
@media screen and (max-width: 600px) {
  .page-wrapper {
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 95%;
    margin: 0 auto; }

  header {
    height: 500px;
    width: 90%;
    margin: 25px auto; }

  h1 {
    margin-bottom: 16rem;
    font-size: 3rem; }

  h1::after {
    content: "";
    position: absolute;
    background-image: url("planete.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 400px;
    height: 400px;
    left: 5px;
    top: 115px; }

  .summary::before {
    content: "";
    position: absolute;
    background-image: url("sparkles_mobile.png");
    background-repeat: repeat-x;
    background-size: contain;
    height: 50px;
    width: 95%;
    top: -75px;
    left: 15px; }

  #zen-summary {
    height: 200px;
    margin: 25px auto;
    width: 95%; }

  #zen-preamble::before {
    content: "";
    position: absolute;
    background-image: url("gradientsparkle1.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 180px;
    height: 180x;
    top: -200px;
    left: 125px; }

  #zen-preamble {
    margin: 150px auto 200px;
    width: 95%; }

  .summary::after {
    content: "";
    position: absolute;
    background-image: url("smiley.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 180px;
    height: 180px;
    top: 1050px;
    left: 140px; }

  #zen-explanation, #zen-participation, #zen-benefits, #zen-requirements {
    width: 95%; }

  #zen-explanation {
    margin: 25px auto 250px; }

  #zen-explanation::after {
    top: 700px;
    left: 100px; }

  #zen-participation {
    margin: 25px auto 250px; }

  #zen-participation::after {
    top: 950px;
    left: 100px; }

  #zen-participation::after {
    top: 850px;
    left: 145px; }

  footer::before {
    content: "";
    position: absolute;
    background-image: url("sparkles_mobile.png");
    background-repeat: repeat-x;
    background-size: contain;
    height: 50px;
    width: 110%;
    top: -60px; }

  footer::after {
    content: "";
    position: absolute;
    background-image: url("sparkles_mobile.png");
    background-repeat: repeat-x;
    background-size: contain;
    height: 50px;
    width: 110%;
    top: 450px;
    left: -40px; }

  footer {
    width: 95%;
    margin: 25px auto 100px; }

  #design-selection nav ul {
    width: 95%;
    justify-content: center;
    align-content: center; }

  #design-selection::before {
    display: none; }

  #design-selection::after {
    display: none; }

  #zen-resources::before {
    left: 150px; }

  #zen-resources {
    margin: 50px auto 250px;
    width: 85%; }

  #zen-resources::before {
    top: 350px;
    left: 50px; } }