:is(h1.text-pretty) {
  text-wrap: pretty;
  max-inline-size: 33ch;
}
:is(h1.text-balance) {
  text-wrap: balance;
  max-inline-size: 33ch;
}
h1 {
  margin-inline: auto;
  font-weight: 200;
  line-height: inherit;
  font-size: 20px;
}

.container {
  background: none;
  border-radius: 8px;
  padding: 40px;
  max-width: 100%;
  margin: 0 auto;
  box-shadow: none;
}

.container h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 12px;
  color: #000;
}

.demo-section {
  margin-bottom: 40px;
  border-bottom: 1px solid #e0e0e0;
  width: 50%;
  float: left;
  padding: 3%;
  text-align: center;
}

.demo-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.container h2 {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin-bottom: 16px;
  color: #000;
}

.container p {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.container button {
  background: #000;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.container button:hover {
  background: #333;
}

.container button:active {
  transform: scale(0.98);
}

.container .controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.container .controls button {
  flex: 1;
  min-width: 100px;
}

.close-button {
  background: #666;
}

.close-button:hover {
  background: #555;
}

/* Responsive */
@media (max-width: 640px) {
  .container {
    padding: 24px;
  }

.container .controls {
    flex-direction: column;
  }

.container .controls button {
    width: 100%;
  }
}
.demo-section.full {
  width: 100%;
  margin-bottom: 100px;
  padding: 0 25%;
}
.demo-section.third {
  width: 33%;
}
.demo-section.third.smaller button {
  font-size: 13px;
  padding: 10px 15px;
}
.navbar-header button.navbar-toggle {
    display: none;
}
@media (max-width: 1050px) {
  .demo-section.third {
    width: 50% !important;
  }
}
@media (max-width: 888px) {
  .demo-section {
    width: 90% !important;
    margin: 2.5%;
  }
}
@media (max-width: 650px) {
  .demo-section.third {
    width: 100% !important;
  }
}
.red {
    color: wheat;
    font-weight: 600;
}
.demo-section.two p {line-height: normal;margin-bottom: 0;}

html { font-size: 100%; } /* base reference */
h1.before { font-size: 32px; }
@media (max-width: 800px) { h1.before { font-size: 24px; }}
h1.after {
  font-size: clamp(24px, 4vw, 32px);
}
.button.before { padding: 8px 12px; font-size: 14px; }
.button.after {
  padding: clamp(0.5rem, 1vw, 0.75rem);
  font-size: 0.875rem;
}





.original { filter: brightness(1) contrast(1) saturate(1); }
.brighter{ filter:brightness(1.2) contrast(1.16) saturate(1.5); }
.brightest{ filter:brightness(1.5) contrast(1.16) saturate(1.5); }
.little { filter: brightness(1.06) contrast(1.01) saturate(1.09); }
.blur { filter: blur(1px); }
.dark { filter: brightness(0.65) contrast(1.05); }
.grayscale { filter: grayscale(100%); }
.grayscale-half { filter: grayscale(50%); }
.grayscale-88 { filter: grayscale(88%); }
.opacity { filter: opacity(50%); }
.opacity-light { filter: opacity(75%); }
.drop-shadow { filter: drop-shadow(8px 8px 12px rgba(0,0,0,0.79)); }
.drop-shadow-color { filter: drop-shadow(4px 4px 10px #aaf30066); }
.sepia { filter: sepia(100%); }
.sepia-half { filter: sepia(50%); }


.imgFilter{
  filter:brightness(1.07) contrast(1.02) saturate(1.0);
  transition: filter 0.3s ease;
}
.imgFilter:hover {
    filter: brightness(.87513) contrast(1.09) saturate(1.10) opacity(78%) blur(1px);
    cursor: pointer;
}








.demo-section.three.no_margin {
  margin-bottom: 0;
  border-bottom: 1px solid #e0e0e0;
}

.demo-section img {
    width: -webkit-fill-available;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 112, 243, 0.4);
}
.demo-section.three {
  width: 28%;
  margin: 0 1%;
  min-height: 462px;
  min-width: 404px;
}
.stevie.special {
    max-width: 435px;
}
.page {
    margin-top: 31px;
    padding: 1% 5%;
}
.demo-section.three:last-child {
    margin-bottom: 100px;
}
@media (max-width: 1040px) {
.demo-section.three {
  min-height: auto;
}
}
@media (max-width: 640px) {
.demo-section.three.last {
    margin-bottom: 100px;
}
}
.special h5 {
    font-size: .8em;
    margin: 4px 0;
    color: #525252;
}
.stevie.network.special {
    padding-bottom: 0;
}
div#switch_3, div#switch_4, div#switch_5, div#switch_6 {
    width: fit-content;
    float: left;
    margin: 10px 20px;
    cursor: pointer;
}
.switch_3_container.switch_6_container {
    padding: 20px;
    position: relative;
}
div#switch_1 {
    position: relative;
    margin: 5em auto;
}
.switch_bunch {
  width: 100%;
  height: auto;
  overflow: hidden;
  max-width: 340px;
  margin: 0 auto;
  padding: 27px 17px 27px 40px;
}