body {
  margin:0px;
  padding:0px;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8rem;
}
a{
  font-weight:bold;
  color:#385617;
}
a:hover{
  font-weight:bold;
  color:#84d337;
}
h1{
  font-size:2rem;
  font-weight:bold;
}
h2{
  font-size:1.2rem;
  font-weight: normal;
}
h3{
  margin:0px;
  padding:0px;
  font-size:1.6rem;
  font-weight: bold;
}
h4{
  font-size:1.2rem;
  font-weight: bold;
}
p,ul li{
  font-size: 1.2rem;
  line-height:1.4rem;
}
.mozaic-container{
  width:100vw;
}
.column.align-left{
  text-align:left;
}
.column.align-right{
  text-align:right;
}
.row{
  display:flex;
  flex-direction:row;
  padding-left:5vw;
  padding-right:5vw;
}
.row .column{
  width:100%;
}
.row .column.half{
  width:50%;
}
.row .column.two-third{
  width:66%;
}
.row .column.third{
  width:33%;
}
.row .column.quarter{
  width:25%;
}
.row .column.auto-adjust{
  width:auto;
}
.row .column.align-bottom{
  align-self: flex-end;
}
.row.full-width{
  padding-left:0vw;
  padding-right:0vw;
}
.row.navigation .column.logo a{
  margin-bottom:0px;
  margin-left:0px;
}
.mozaic-container .row.navigation .column a{
  display:inline-block;
  font-size:16px;
  padding-top:10px;
  padding-left:5px;
  padding-right:5px;
  margin-left:1vw;
  text-decoration:none;
  text-transform: uppercase;
  color:#000000;
  border-bottom-color:#e1e100;
}
.mozaic-container .row.navigation .column a:hover{
  border-bottom-color:#000000;
}
.mozaic-container .row.navigation .column.active a{
  border-bottom-style:solid;
  border-bottom-width:5px;
  border-bottom-color:#000000;
}
.mozaic-container .row.navigation .column:not(.logo) a{
  padding-bottom:8px;
  border-bottom-style:solid;
  border-bottom-width:5px;
}
.mozaic-container .row.navigation .column.logo a:hover{
  background-color:transparent;
}
.mozaic-container .subscriber-header{
  height:90px;
}
.mozaic-container .button-container{
  margin-top:2rem;
  margin-bottom:2rem;
}
.mozaic-container .button-container button:not(:first-child){
  margin-left:.75rem;
}
.index .polygon-bg{
  position:relative;
}
.index .polygon-bg::before{
  width:100%;
  height: 90px;
  background: #e1e100;
  content: "";
  position: absolute;
  clip-path: polygon(0% 20%, 100% 50%,100% 100%, 0% 100%);
  z-index:0;
}
.index.mozaic-container .row.navigation{
  background-color:#e1e100;
}
.index.mozaic-container .subscriber-header a{
  display:inline-block;
  color:#000000;
  padding:.8rem;
}
.index .row.clouds{
  min-height:100px;
  background-image:url(../images/clouds.png);
  background-size:cover;
  background-repeat:no-repeat;
  background-position: 0px center;
  background-color:#e1e100;
  animation: move-clouds 100s linear infinite;
}
@keyframes move-clouds {
  from {
    background-position: 1500px center;
  }
  to {
    background-position: -2000px center; /* match roughly the width of one cloud tile */
  }
}
.index .row.bonzai-tree{
  min-height:35vw;
  background-image:url(../images/bonzai-illustration.png);
  background-size:146vw;
  background-repeat:no-repeat;
  background-position:bottom right;
  background-color:#e1e100;
}
.index button,.secondary button{
  all: unset;
  box-sizing: border-box; /* Re-apply box-sizing so padding behaves predictably */
  display: inline-flex;
  height:50px;
  min-width:200px;
  align-items: center;
  background-color:#ffffff;
  justify-content:center;
  font-weight:bold;
  font-size:1rem;
  border-style:solid;
  border-width:5px;
  border-radius: 50px;
  cursor:pointer;
}
.index .primary a:hover,.index button.primary:hover{
  color:#898929;
  border-color:#b7ba31;
  background-color:#f7f7d0;
}
.index .content.about-mozshare{
  padding-left:1.3rem;
  border-left-style:solid;
  border-left-width:7px;
  border-left-color:#e1e100;
}
.index .mozshare-demo{
  display: grid;
  place-items: center;
}
.secondary a{
  color:#000000;
  text-decoration: none;
}
.secondary a:hover{
  text-decoration: underline;
}
.secondary .subscriber-header{
  background-color:#f4f4f4;
}
.secondary .subscriber-header{
  padding-top:1rem;
}
.secondary .subscriber-header a{
  margin-right:2vw;
}
.secondary .navigation-container{
  padding-bottom:4vh;
  margin-bottom:2vh;
  background-color:#f4f4f4;
}
.mozaic-header .mozaic-logo{
  margin:0px auto;
  text-align:center;
}
.mozaic-code.mozaic-header .mozaic-logo img{
  width:350px;
  height:350px;
}
.mozshare-mozaic.mozaic-header .mozaic-logo img{
  width: 75px;
  height: 75px;
}
.mozaic-display-container{
  min-height: 95vh;
  display: flex;
  flex-direction:column;
}
.mozaic-code.mozaic-display-container{
  justify-content: center;
  align-items: center;
}
.mozaic-display-container .mozaic-code-container{
  margin:0px auto;
  text-align:center;
}
.mozaic-display-container .mozaic-code-container .mozaic-code-prompt input{
  all: unset;
  box-sizing: border-box; /* Re-apply box-sizing so padding behaves predictably */
  font-size: 2.2rem;
  font-weight: bold;
  text-align:center;
  color:#000000;
  background-color:#ffffff;
  border-style:solid;
  border-width:7px;
  border-radius: 50px;
  border-color:#84d337;
}
.mozaic-display-container .mozaic-code-container .mozaic-code-prompt input::placeholder,.mozaic-display-container .mozaic-code-container .mozaic-code-prompt input::-moz-placeholder{
  color:#666666;
}
.mozaic-display-container .mozaic-code-container .mozaic-code-entry button{
  all: unset;
  box-sizing: border-box; /* Re-apply box-sizing so padding behaves predictably */
  display: inline-flex;
  align-items: center;
  background-color:#84d337;
  width:90px;
  justify-content:center;
  margin-left:25px;
  border-radius: 50%;
  cursor:pointer;
}
.mozaic-display-container .mozaic-code-container .mozaic-code-entry button:hover{
  background-color:#d8e535;
}
.mozaic-display-container .mozaic-code-container .mozaic-code-entry button .triangle-right{
  width: 17px;
  height: 30px;
  background-color: white;
  /* Coordinates form three points: Top-Left, Bottom-Left, Middle-Right */
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}
.mozaic-display-container .mozaic-code-container .mozaic-code-helper-container{
  width:60%;
  margin:50px auto;
  text-align:center;
}
.mozaic-display-container .mozaic-code-container .mozaic-code-prompt input,.mozaic-display-container .mozaic-code-container .mozaic-code-entry button{
  height:90px;
  
}
/*START mozshare mozaic time*/
.mozaic-display-container .mozaic-chooser{
  display: flex;
  min-height:88vh;
  justify-content: center;
  align-items: center;
}
.mozaic-display-container .mozaic-container {
  width: var(--mosaic-width);
  height: var(--mosaic-height);
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.mozaic-display-container .mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;                    /* constant gap */
  grid-auto-flow: dense;       /* fills holes */
  width: 100%;
  height: 100%;
}

.mozaic-display-container .mosaic .tile {
  position: relative;
  overflow: hidden;
  background-color: #84d337;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

.mozaic-display-container .mosaic .tile.materialized {
  opacity: 1;
  transform: scale(1);
}

.mozaic-display-container .mosaic .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}

.mozaic-display-container .mosaic .tile.loaded img {
  opacity: 1;
}
/*END mozshare mozaic time*/
.mozaic-footer{
  min-height: 3vh;
  color:#666666;
  text-align: center;
}
/*icons*/
.x-icon {
  width: 24px;
  height: 24px;
  stroke: #84d337;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease, transform 0.2s ease;
}
/*components*/
.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
/* Hover effect */
.close-btn:hover {
  background-color: #84d337;
}

.close-btn:hover .x-icon {
  stroke: #ffffff; /* Turns red on hover */
  transform: scale(1.05); /* Slight growth effect */
}

/* Active click effect */
.close-btn:active .x-icon {
  transform: scale(0.95);
}
/*modules*/
/*popup*/
.mozshare-modal-background{
  position:absolute;
  display: flex;
  flex-direction:column;
  top:0px;
  left:0px;
  min-height: 100%;
  min-width:100%;
  margin:0px auto;
  background-color:rgba(216,229,53,.8);
  justify-content: center;
  align-items: center;
  overflow:hidden;
}
.mozshare-modal-background .mozshare-modal-container{
  display:flex;
  flex-direction: column;
  min-height:600px;
  min-width:660px;
  margin-top:0px;
  padding:1rem;
  text-align: center;
  align-items: center;
  border-style:solid;
  border-radius: 0px 50px 0px 50px;
  border-color:#84d337;
  border-width:20px;
  background-color:#ffffff;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-button-row{
  width:100%;
  text-align:right;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-innerContent{
  min-height:535px;
  margin-left:1.5rem;
  margin-right:1.5rem;
  width: 710px;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-innerContent h1{
  margin:0px;
  padding:0px;
  margin-top:-1.5rem;
  margin-bottom:1rem;
  font-size:2.5rem;
  color:#666666;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-innerContent h2{
  margin:0px;
  padding:0px;
  margin-bottom:.5rem;
  font-size:1.2rem;
  color:#666666;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-innerContent .mozshare-modal-content-container{
  display:flex;
  flex-direction: column;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-innerContent .mozshare-modal-content-container p{
  font-size:1.1rem;
  color:#666666;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-innerContent .mozshare-modal-content-container .row{
  margin:0px;
  padding:0px;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-innerContent .mozshare-modal-content-container .mozshare-hotkey-container{
  min-width:240px;
  text-align:center;
  align-items: center;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-innerContent .mozshare-modal-content-container .mozshare-hotkey-button-container{
  margin-top:.75rem;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-innerContent .mozshare-modal-content-container button.primary{
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  height:75px;
  min-width:260px;
  align-items: center;
  background-color:#84d337;
  justify-content:center;
  font-weight:bold;
  font-size:1.4rem;
  color:#ffffff;
  border-style:solid;
  border-width:5px;
  border-color:#84d337;
  border-radius: 50px;
  cursor:pointer;
}
.mozshare-modal-background .mozshare-modal-container .mozshare-modal-innerContent .mozshare-modal-content-container button.primary:hover{
  background-color:#d8e535;
}
/*animations*/
/* Attach the animation to your element class */
.mozaicAnimateButton {
  animation: buttonFade 1s ease-out forwards; 
}
@keyframes buttonFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Phones (portrait) */
@media (max-width: 479px) {
  body {
    min-height: auto;
  }
  h1{
    margin:0px;
    padding-top:1rem;
    padding-left:2rem;
    padding-right:2rem;
    text-align:center;
  }
  p{
    line-height:1.5rem;
  }
  .row{
    flex-direction:column !important;
  }
  .row .column.half{
    width:100%;
  }
  .row .column.two-third{
    width:100%;
  }
  .row .column.third{
    width:100%;
  }
  .row .column.quarter{
    width:100%;
  }
  .row .column.auto-adjust{
    width:auto;
  }
  .row .column{
    
  }
  .row .column.align-bottom{
    margin:0px auto;
  }
  .row .column.align-bottom a{
    margin:0px;
    padding:0px;
  }
  .index.mozaic-container{
    width:auto;
    margin:0px;
    padding:0px;
  }
  .index.mozaic-container .subscriber-header{
    background-color:#000000;
  }
  .index.mozaic-container .subscriber-header a,.index.mozaic-container .subscriber-header a:visited{
    margin-right:1.5rem;
    color:#ffffff;
  }
  .index.mozaic-container .row.navigation .column{
    width:100%;
  }
  .index.mozaic-container .row.navigation .column a{
    width:88vw;
    margin:0px;
    line-height:30px;
    min-height:30px;
    text-align:center;
  }
  .index.mozaic-container .row.navigation .column a:hover{
    margin:0px;
  }
  .index.mozaic-container .clouds{
    display:none;
  }
  .index .row.bonzai-tree{
    min-height:100vh;
  }
  .index .button-container{
    margin:0px auto;
    margin-top:50px;
    text-align:center;
  }
  .index .button-container button,.secondary .button-container button{
    width:80vw;
    height:65px;
    clear:both;
  }
  .index.mozaic-container .button-container button:not(:first-child){
    margin-left:0px;
    margin-top:4vh;
  }
  .index .content.about-mozshare{
   padding-left:0px;
  }
  .index .content.about-mozshare h3{
    padding-left:1rem;
    text-align:left;
  }
  .index .content.about-mozshare p{
    padding-left:1rem;
  }
  .secondary h1{
    text-align:left;
    padding-left:0px;
    padding-right:0px;
  }
  .secondary h2{
    text-align:left;
    padding-left:0px;
    padding-right:0px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  body {
    min-height: auto;
  }
  h1{
    margin:0px;
    padding-top:1rem;
    padding-left:2rem;
    padding-right:2rem;
    text-align:center;
  }
  p{
    line-height:1.5rem;
  }
  .row{
    flex-direction:column !important;
  }
  .row .column.half{
    width:100%;
  }
  .row .column.two-third{
    width:100%;
  }
  .row .column.third{
    width:100%;
  }
  .row .column.quarter{
    width:100%;
  }
  .row .column.auto-adjust{
    width:auto;
  }
  .row .column{
    
  }
  .row .column.align-bottom{
    margin:0px auto;
  }
  .row .column.align-bottom a{
    margin:0px;
    padding:0px;
  }
  .index.mozaic-container{
    width:auto;
    margin:0px;
    padding:0px;
  }
  .index.mozaic-container .subscriber-header{
    background-color:#000000;
  }
  .index.mozaic-container .subscriber-header a,.index.mozaic-container .subscriber-header a:visited{
    margin-right:1.5rem;
    color:#ffffff;
  }
  .index.mozaic-container .row.navigation .column{
    width:100%;
  }
  .index.mozaic-container .row.navigation .column a{
    width:88vw;
    margin:0px;
    line-height:30px;
    min-height:30px;
    text-align:center;
  }
  .index.mozaic-container .row.navigation .column a:hover{
    margin:0px;
  }
  .index.mozaic-container .clouds{
    display:none;
  }
  .index .row.bonzai-tree{
    min-height:86vh;
  }
  .index .button-container{
    margin:0px auto;
    margin-top:50px;
    text-align:center;
  }
  .index .button-container button,.secondary .button-container button{
    width:80vw;
    height:65px;
    clear:both;
  }
  .index.mozaic-container .button-container button:not(:first-child){
    margin-left:0px;
    margin-top:4vh;
  }
  .index .content.about-mozshare{
   padding-left:0px;
  }
  .index .content.about-mozshare h3{
    padding-left:1rem;
    text-align:left;
  }
  .index .content.about-mozshare p{
    padding-left:1rem;
  }
  .secondary h1{
    text-align:left;
    padding-left:0px;
    padding-right:0px;
  }
  .secondary h2{
    text-align:left;
    padding-left:0px;
    padding-right:0px;
  }
}

/* Tablets and up */
@media (min-width: 768px) and (max-width: 1023px) {
  .index.mozaic-container .subscriber-header{
    background-color:#000000;
  }
  .index.mozaic-container .subscriber-header a,.index.mozaic-container .subscriber-header a:visited{
    margin-right:1.5rem;
    color:#ffffff;
  }
  .index .row.bonzai-tree{
    min-height:60vh;
  }
  @keyframes move-clouds {
  from {
    background-position: 800px center;
  }
  to {
    background-position: -1500px center; /* match roughly the width of one cloud tile */
  }
}

/* Desktops */
@media (min-width: 1024px) { }