/* Section Elements */
/* Soundbite Section */
#soundbiteCont {
  width: clamp(340px, 80vw, 1200px);
  height: clamp(340px, 80vh, 900px);
  position: relative;
  display: grid;
  grid-template-areas: 
    "head head"
    "diff aff"
    "bott bott";
  grid-template-columns:
    minmax(70%, 625px)
    minmax(20%, 115px);
  grid-template-rows: 
    minmax(1%, 75px) 
    minmax(60%, auto) 
    minmax(15%, 250px);
  gap: clamp(.25rem, 1.5%, 1rem);
  justify-content: center;
  align-content: center;
}

#soundbiteCont p {
  font-weight: bold;
}
#soundbiteCont > * { border-radius: 25px; }

#diffTop {
  font-size: clamp(22px, 4vw, 50px);
  text-wrap: nowrap;
  text-align: center;
  grid-area: head;
  justify-self: start;
  align-self: flex-end;
}

#alterSvgs {
  padding: 1rem;
  background: var(--container-bg);
  grid-area: diff;
  justify-content: space-around;
}

#alterSvgs h2 { color: var(--header-color); }

.dfSvgLeft, .dfSvgRight {
  height: clamp(50px, 15%, 7rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.dfWording {
  width: clamp(150px, 100%, 500px);
}

.dfWording > h2, .dfWording > p {
  width: clamp(175px, 87%, 500px);
  flex-shrink: 0;
}

.dfWording > h2 {
  font-size: clamp(12px, 2vw, 22px);
}
.dfWording > p {
  padding: 10px 0 0 0;
  font-size: clamp(8px, 1vw, 16px); 
}

.dfSvgIcon {
  width: clamp(30px, 14%, 7rem);
  aspect-ratio: 1 / 1;
  margin: 5px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.dfSvgIcon * {
  width: clamp(50px, 100%, 10rem);
  height: auto;
  aspect-ratio: 1 / 1;
}

#affirmations {
  position: relative;
  overflow: hidden;
  background: var(--container-bg);
  grid-area: aff;
  align-items: center;
}

#affirmations > p { 
  padding: 1rem 0;
  font-size: clamp(8px, 1.5vw, 16px);
}
#affirmations > div > p { 
  padding: 1em 0;
  text-align: center;
}

#diffBottom {
  overflow-x: hidden;
  background: var(--container-bg);
  grid-area: bott;
  align-items: center;
}

#diffBottom > hr {
  width: clamp(50px, 15%, 150px);
  margin: 0 2em;
  border: 2px solid var(--gen-text-color);
  border-radius: 25px;
}

.miniDiff {
  width: clamp(12px, 15%, 190px);
  justify-content: center;
  align-items: center;
}

.miniDiff > p {
  font-size: clamp(.5em, 1vw, 2em) !important;
  text-align: center;
  text-wrap: wrap;

}

svg.miniIcons , svg.miniIcons path {
  width: clamp(30px, 35%, 150px);
  height: auto;
  aspect-ratio: 1 / 1;
}

#missState {
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#missStateCont {
  width: clamp(30px, 75vw, 650px);
  height: clamp(260px, 75vh, 900px);
  position: relative;
  padding: 1em clamp(1em, 10%, 5em) 2.5em clamp(1em, 10%, 5em);
  border-radius: 25px;
  background-color: var(--container-bg);
  justify-content: center;
  align-items: center;
}

#missStateCont > div:nth-child(2) > h1 {
  text-align: center;
  margin: 0 0 .5em 0; 
  text-wrap: nowrap;
  font-size: min(26px, 52px);
}

#missStateCont > div:nth-child(3) {
  width: 100%;
  height: clamp(200px, 60vh, 800px);
  border-radius: 10px;
  scroll-behavior: auto;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#missStateCont > div:nth-child(3) > p { text-indent: 2rem; }
#missStateCont:hover > #scrollDown { opacity: .25; }

#scrollDown {
  position: absolute;
  padding: .4em .05em 0 .4em;
  top: 7em;
  border-radius: 5px;
  background-color: var(--stack-fg);
  transition: opacity .5s linear;
}
#scrollDown svg polyline {
  stroke: var(--gen-text-color);
  animation: bounce 1s infinite alternate ease-in-out;
}

#missStateCont > div:nth-child(4) > h3 {
  text-align: center;
  margin: 1rem 0 0 0;
  font-size: clamp(12px, 1.5vw, 20px);
}

/* Examples */
#examplesCont {
  width: clamp(100px, 80vw, 60rem) !important;
  padding: 1rem;
  border-radius: 25px;
  background-color: var(--container-bg);
  justify-content: center;
  align-items: center;
} 

#examplesCont > h1 { font-size: min(26px, 52px); }

#examplesScroll {
  width: clamp(90px, 60vw, 55rem) !important;
  padding: 1.5rem;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  border-radius: 25px;
}

.example {
  width: clamp(200px, 32%, 50rem) !important;
  aspect-ratio: 1 / 1;
  margin: 0 7rem;
  border-radius: 25px;
  background-color: var(--svg-fill);
  background-size: contain;
  background-position: 0 0;
  color: var(--menu-text-color);
  justify-content: end;
  align-items: center;
  flex-shrink: 0;
}

.example > p {
  background: white;
  opacity: .5;
  border-radius: 5px;
  margin: 0 0 .5em .5em;
  align-self: start;
}

div#examplesScroll > .example:nth-child(1) { background-image: url(./../images/thumbnails/business.png); }
div#examplesScroll > .example:nth-child(2) { background-image: url(./../images/thumbnails/desktopMetaphor.png); }
div#examplesScroll > .example:nth-child(3) { background-image: url(./../images/thumbnails/webRipper.png); }
div#examplesScroll > .example:nth-child(4) { background-image: url(./../images/thumbnails/timebasedPassword.png); }
div#examplesScroll > .example:nth-child(5) { background-image: url(./../images/thumbnails/reusableCode.png); }

#clickHere {
  top: -1.5rem;
  position: absolute;
  color: var(--gen-text-color);
  text-wrap: nowrap;
}

#clickHere > div svg, #clickHere > div svg path {
  stroke: var(--gen-text-color);
  animation: bounce 1s infinite alternate ease-in-out;
}

/* Stack Scroll Menu */
#stack > h1 {
  font-size: clamp(18px, 4vw, 44px);
}

#stackCont {
  width: clamp(300px, 50%, 45rem);
  aspect-ratio: 1 / 1;
  align-items: center;
}

#stackDisplay {
  width: clamp(350px, 100%, 45rem);
  height: clamp(280px, 80%, 45rem);
  border-radius: 25px 25px 0 0;
  background-color: var(--container-bg);
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

#stackOptions {
  width: clamp(350px, 100%, 45em);
  height: clamp(30px, 10%, 2em);
  padding: 1% 0;
  background-color: var(--stack-fg);
  border-radius: 0 0 25px 25px;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  contain: content;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#stackOptions::-webkit-scrollbar {
  display: none;
}

#stackOptions > fieldset {
  margin: 0 50%;
  width: inherit;
  text-wrap: nowrap;
  contain: content;
}
#stackOptions > fieldset > * {
  margin: 0 5em;
  font-size: clamp(16px, 2.5vw, 18px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  scroll-snap-align: center;
}
#stackOptions > fieldset > label:nth-child(1){ 
  margin: 0 5em 0 0;
}

.clusterStack {
  width: fit-content;
  min-width: 0px;
  max-width: 550px;
  max-height: 95%;
  margin: 5%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: absolute;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-shrink: 0;
  justify-content: center;
  align-content: space-evenly;
  align-items: flex-start;
  background-color: var(--stack-fg);
  transition: transform .5s ease-out;
}

.itemStack {
  width: clamp(100px, 35%, 225px);
  min-width: 0;
  min-height: 0;
  height: auto;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.itemStack > div {    
  width: 45%;
  height: 45%;
  flex: 0 0 auto;
}
.itemStack > div * {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--stack-fill);
}

.itemStack > h3 {
  font-size: clamp(10px, 2vw, 18px);
}

#stackOptions h2, .itemStack > h3 { color: var(--stack-text-color); }

#stackDisplay > .clusterStack:nth-child(1) > .itemsStack > .itemStack:nth-child(3) {
  margin: 0 15em;
}

#podmanIcon { 
  width: 5em;
  height: 5em;
  background-image: url("./../images/svgs/icons/podman.png"); 
  background-size: 100%;
  background-position: center;
}

/* About Section */
#aboutCont {
  display: inline-grid;
  grid-template:
  "head head"
  "map like"
  "map like";
  grid-template-columns: repeat(2, fit-content(100%));
  grid-template-rows: 
    5%
    repeat(2, fit-content(100%));
  gap: clamp(.3rem, 5%, 2rem);
  justify-content: center;
  align-items: center;
}

@media (max-width: 550px) {
 #aboutCont {
  grid-template:
  "head head"
  "map map"
  "like like";
  grid-template-columns: repeat(2, fit-content(100%));
  grid-template-rows: 
    5%
    repeat(2, fit-content(100%));
 }
 #aboutLikes { 
  width: clamp(350px, 90vw, 600px) !important;
  height: clamp(250px, 35vh, 600px) !important;;
  }
}

#aboutCont > h1 {
  grid-area: head;
  align-self: center;
  justify-self: center;
  font-size: clamp(28px, 5vw, 44px);
}

#aboutMap {
  width: clamp(280px, 35vw, 35rem);
  height: clamp(280px, 35vw, 35rem);
  aspect-ratio: 1 / 1;
  border-radius: 20rem;
  background-image: var(--map-bg);
  background-size: cover;
  grid-area: map;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  justify-self: center;
  align-self: center;
  transition: transform .5s ease-out;
}

#aboutMap:hover {
  transform: scale(1.05);
}

#aboutMap > #aboutMapMe {
  width: 5rem;
  aspect-ratio: 1 / 1;
  border-radius: 20rem;
  background-image: url("./../images/thumbnails/mug.jpg");
  background-size: cover;
}

#aboutLikes {
  width: clamp(200px, 35vw, 600px);
  height: clamp(250px, 100%, 600px);
  border-radius: 15px;
  background-color: var(--container-bg);
  grid-area: like;
}

/* FAQ Section */
#FAQ {
  align-items: center;
}

#FAQCont {
  width: clamp(340px, 80vw, 1200px);
  align-items: center;
}

#FAQCont > h1 {
  font-size: min(20px, 42px);
}

.faqDropdown {
  width: clamp(340px, 50vw, 750px);
  margin: .5rem 0;
  position: relative;
  overflow: hidden;
}

.faqHead {
  padding: 1rem;
  background-color: var(--container-bg);
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  z-index: 1;
}

.faqHead > div {
  transform: rotate(180deg);
}

.faqHead > div:nth-child(2) {
  width: 25px;
  height: 25px;
}

.faqHead > div > * {
  fill: var(--dropdown-svg);
}

.faqQ {
  width: 100%;
  font-size: clamp(12px, 1vw, 18px);
}

.faqA {
  max-height: 0;
  padding: 0 1rem 0 1rem;
  top: -.25rem;
  position: relative;
  z-index: 0;
  overflow: hidden;
  background-color: var(--container-bg);
  border-radius:  0 0 5px 5px;
  line-height: 1.5;
  transition: max-height 1s linear;
}

.faqABuffer {
  width: 1rem;
  aspect-ratio: 1 / 1;
}

.faqA > hr {
  height: 1px;
  width: 100%;
  display: block;
  flex-shrink: 0;
  transform: scaleY(1); 
  border: none;
  background-color: var(--menu-shadow);
}

#footerCopyright {
  padding: 5px;
  font-size: 12px;
  text-wrap: nowrap;
}

#linksFooter {
  height: 2.5rem;
  margin: 0 1rem 0 0;
  justify-content: flex-end;
  align-items: center;
}

footer #linksFooter > * { margin: .25rem .5rem; }
footer #linksFooter svg, footer #linksFooter svg path {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--footer-svg);
}
footer > div:nth-child(1) {
  justify-content: space-between;
  align-items: center;
}

footer > div:nth-child(2) * {
  width: 100vw;
  height: .7rem;
  bottom: 0;
  position: absolute;
}

footer #path1 { fill: var(--footer-fill1) }
footer #path2 { fill: var(--footer-fill2) }
footer #path3 { fill: var(--footer-fill3) }
footer #path4 { fill: var(--footer-fill4) }
footer #path5 { fill: var(--footer-fill5) }
footer #path6 { fill: var(--footer-fill6) }