/* Mantis Org — custom styles */

:root {
  --brand: #4caf50;
}

.roboto-mono-<uniquifier> {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.lexend-<uniquifier> {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

html {
  overflow-x: clip;
}

body {
  background-color: #191919;
  margin: 0;
  font-family: "Lexend", sans-serif;
  color: #ffffff;
  overflow-x: clip;
}
.section-padder {
  padding-top:10%;
  padding-bottom:10%;
}

@media (max-width: 767px) {
  #top-images .fly-left,
  #top-images .fly-right {
    max-width: 75px;
  }
}
.img-md { max-width: 200px; }
.top-logo{
  max-width: 220px;
}
h1 {
  font-weight: 700;
}
.miscbox{
  max-width: 240px;
}
@media(max-width:576px) {
  .miscbox {
    max-width: 175px;
    padding-top: 40px;
  }
}
.oldbooks{
  max-width: 275px;
}
.oldbooks {

}
@media(max-width:576px) {
  .oldbooks {
    max-width: 225px;
    padding-top: 40px;
  }
}
ul.nonBulleted {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.container-buffer {
  margin-top: 50px;
  margin-bottom:50px;
}
.services-buffer{
  margin-top: 15px;
  margin-bottom: 15px;
}
.services-list li{
  font-size: 1.2em;
  padding-top:20px;
  padding-bottom: 20px;
}
.top-text {
  font-size: 1.75em;
}
.dissolve {
  --reveal: -20%;
  -webkit-mask-image: linear-gradient(to top, transparent var(--reveal), black calc(var(--reveal) + 20%));
          mask-image: linear-gradient(to top, transparent var(--reveal), black calc(var(--reveal) + 20%));
}
/* Sink row image sizes (desktop) */
#sink-images .spray-img   { max-width: 120px; }
#sink-images .paste-img   { max-width: 300px; }
#sink-images .deo-img     { max-width: 125px; }
#sink-images .shampoo-img { max-width: 155px; }
#sink-images .sink-img    { max-width: 450px; }

/* Below 768px: pairs side by side, sink shrinks to fit the screen */
@media (max-width: 767px) {
  #sink-images .spray-img   { max-width: 24%; }
  #sink-images .paste-img   { max-width: 52%; }
  #sink-images .deo-img     { max-width: 21%; }
  #sink-images .shampoo-img { max-width: 21%; }
  #sink-images .sink-img    { max-width: 100%; }
  #sink-images .deo-pair    { gap: 45px; }
  #sink-images .col-md-6    { margin: 60px 0; }
}

/* Contain fly animations locally on phones so they can't create horizontal scroll */
@media (max-width: 767px) {
  .fly-row {
    overflow-x: clip;
  }
  /* Clip at the container too — reliably contains transformed images (basket, deodorant, shampoo) */
  .container-buffer,
  .section-padder {
    overflow-x: clip;
  }
}

/* Self-portrait */
@media (max-width: 767px) {
  .self-portrait {
    max-width: 66%;
    margin-bottom: 30px;
  }
}