@font-face { font-family: "Andika"; src: url(/assets/G-webfonts/Andika-Regular.ttf); font-display: swap; }
@font-face { font-family: "Amatic SC"; src: url(/assets/G-webfonts/AmaticSC-Regular.ttf); font-display: swap; }
html, :root { --mob-pixels: 800px; --body-font-size: 17px; --nav-font-size: 1em; --font-serif: 'Amatic SC', Georgia, serif; --font-sans: Andika, Helvetica, Arial, sans-serif; --font-mono: "Courier New", "Open Sans", Courier, monospace; --header-font-size: 140%; --text-width: 50em; --color-pink: light-dark(oklch(0.6062 0.2298 9.63), oklch(0.7782 0.1484 9.63)); --body-color: light-dark(oklch(0.9491 0 0), oklch(0.1822 0 0)); --body-color-text: light-dark(oklch(0.2603 0 0), white); --color-1: light-dark(oklch(0.7074 0.1752 47.85), oklch(0.4842 0.1316 47.85)); --color-1-light: light-dark(oklch(0.8046 0.1392 61.53), oklch(0.5702 0.1392 61.53)); --color-1-dark: light-dark(oklch(0.5532 0.1625 43.45), oklch(0.4691 0.1295 43.45)); --color-triad-2: light-dark(oklch(0.8734 0.1506 182.14), oklch(0.5097 0.0995 182.4)); --color-triad-2-dark: light-dark(oklch(0.5747 0.1019 182.14), oklch(0.8188 0.0953125 180.89)); --color-pink: light-dark(oklch(0.6062 0.2298 9.63), oklch(0.7782 0.1484 9.63)); --color-active: var(--color-1-dark); --smiley-color: light-dark(oklch(0.9797 0.1147 108.34), oklch(0.4424 0.0941 109.7)); --header-color-text: var(--body-color-text); --nav-color-text: var(--body-color-text); --footer-bottom: var(--color-1-dark); --footer-bottom-text: light-dark(white, oklch(0.2603 0 0)); --scrollbar-back: light-dark(oklch(0.9491 0 0), oklch(0.1822 0 0)); --scrollbar-thumb: var(--color-triad-2); }

:root { caret-color: var(--color-1); accent-color: var(--color-pink); --mob-pixels: 800px; }

::selection { background: var(--color-triad-2); }

html, body { height: 100%; max-width: 100%; scroll-behavior: smooth; }

body { font-size: var(--body-font-size); color: var(--body-color-text); background-color: var(--body-color); font-family: var(--font-sans); margin: 0; }

button, input { font: inherit; color: inherit; }

header { display: flex; flex-direction: column; flex: 0 0 auto; width: 100%; }

.w3-panel { padding: 0.01em 16px; margin-top: 16px; margin-bottom: 16px; }

.w3-card-2 { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.w3-button { border: none; display: inline-block; padding: 8px 16px; vertical-align: middle; overflow: hidden; text-decoration: none; color: inherit; background-color: inherit; text-align: center; cursor: pointer; white-space: nowrap; }

.w3-animate-zoom { animation: animatezoom 0.6s; }

@keyframes animatezoom { from { transform: scale(0); }
  to { transform: scale(1); } }
.w3-spin { animation: w3-spin 2s infinite linear; }

@keyframes w3-spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); } }
.w3-content { margin-left: auto; margin-right: auto; max-width: 980px; }

.w3-input { padding: 8px; display: block; border: none; border-bottom: 1px solid #ccc; width: 100%; font: inherit; margin: 0; }

.w3-section { margin-top: 16px; margin-bottom: 16px; }

.w3-round-large { border-radius: 8px; }

.w3-animate-fading { animation: fading 10s infinite; }

@keyframes fading { 0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; } }
.w3-border { border: 1px solid #ccc; }

.w3-ripple:active { opacity: 0.5; }

.w3-ripple { transition: opacity 0s; }

.w3-hide { display: none; }

.w3-show { display: block; }

.w3-circle { border-radius: 50%; }

.w3-card-4 { box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); }

.dark-mode-toggle { display: inline-grid; place-items: center; vertical-align: middle; color: var(--alert-text); border: 2px solid currentColor; background: transparent; cursor: pointer; border-radius: 5px; width: 25px; height: 25px; font: initial; }

.sticky_anchor { display: grid; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); }

h2 { font-size: 200%; }

h3 { font-size: 160%; }

.larger { font-size: 120%; }

.topline { display: flex; justify-content: space-between; align-items: center; padding: 5px 16px; }

.banner { display: flex; justify-content: center; align-items: center; padding: 10px; }

img { max-width: var(--text-width); }

#intersectionObserver1 { position: absolute; top: 0px; height: 120vh; max-height: 400px; width: 0; }

.svg-arrow { fill: transparent; stroke: var(--body-color-text); }

.svg-circle { fill: var(--color-pink); stroke: var(--color-pink); transition: fill .3s ease, stroke .3s ease; }

.topbtn { font-size: 0; opacity: 0; pointer-events: none; position: fixed; bottom: 20px; right: 30px; z-index: 599; border: none; outline: none; background-color: transparent; cursor: pointer; margin: 0; padding: 0; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); transition: opacity 100ms ease-in; border-radius: 50%; }
.topbtn svg { background-color: transparent; }
.topbtn__show { opacity: 1; pointer-events: all; transition: opacity 300ms ease-in; }
.topbtn:hover { opacity: 1 !important; }
.topbtn:hover .svg-circle { fill: var(--color-triad-2); stroke: var(--color-triad-2); }

.momism_card { transition: .5s; }

.switch { position: relative; display: inline-block; width: 60px; height: 34px; }

.switch input { opacity: 0; width: 0; height: 0; }

.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; padding: 15px; }

.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }

input:checked + .slider { background-color: var(--color-1-light); }

input:focus + .slider { box-shadow: 0 0 1px #2196F3; }

input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }

/* Rounded sliders */
.slider.round { border-radius: 34px; }

.slider.round:before { border-radius: 50%; }

.menu { cursor: pointer; transition: color .5s; color: var(--body-color-text); }

.pink-text { color: var(--color-pink); }

.w3-pink, .w3-hover-pink:hover { background-color: var(--color-pink); }

.menu:hover { color: #e91e63; }

.down_a_bit { vertical-align: sub; position: relative; bottom: 7px; }

.down_a_bit_more { vertical-align: sub; position: relative; bottom: 2px; }

.bit_left { margin: 0 0 0 -3px; }

#content { display: flex; flex-direction: column; align-items: center; transition: margin-left .5s; height: 100%; }

.list_button { width: 100%; padding: 0.3em 2em; border: none; text-align: left; }

.list_div { padding-left: 4em; }

.abc { position: sticky; top: 0; width: 100%; background: var(--color-1); font-weight: bold; font-size: 120%; z-index: 150; }

.fix_anchor { scroll-margin: 2.01rem 0 0 0; scroll-padding: 2.01rem 0 0 0; scroll-snap-margin: 2.01rem 0 0 0; scroll-snap-padding: 2.01rem 0 0 0; }

.fix_anchor:target { border: .15em solid magenta; }

.tooltip { position: relative; display: inline-block; }

.tooltip-link { text-decoration: none; }

.tooltip .tooltiptext { transform: scale(0); width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: -1em; left: 50%; margin-left: -75px; opacity: 0; transition: opacity ease-out 0.3s, bottom ease-out 0.3s, transform ease-out 0.3s; }

.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }

.tooltip:hover .tooltiptext { transform: scale(1); bottom: 120%; opacity: 1; }

.gallery > .gallery__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); grid-template-rows: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 1rem; grid-auto-flow: dense; padding: 0; margin-left: calc(-4em + 16px); max-width: 100%; }

#myInput { border: 1px dotted var(--color-pink); }

/* This will create 2x images every 4 elements */
.gallery > .gallery__list > li { list-style-type: none; margin: auto; display: grid; place-items: center; }

.gallery { margin: 0; }

.gallery > .gallery__list > li:nth-child(3n) { grid-column: span 2; /* Spans two columns */ grid-row: span 2; /* Spans two rows */ }

.gallery > .gallery__list > li > img { max-width: min(60%, 300px); object-fit: scale-down; }

.img_container { display: flex; flex-wrap: wrap; justify-content: center; }

.img_size { object-fit: cover; max-width: 100%; }

.imgs { display: flex; justify-content: center; height: 100%; }

.w3-serif { font-family: serif; }

.w3-xxlarge { font-size: 36px; }

.larger_font { font-size: 120%; font-family: var(--font-mono); font-weight: bold; }

.active { background: var(--smiley-color); }

.title { text-align: center; text-decoration: none; }

.banner .title { font-size: var(--header-font-size); color: var(--header-color-text); font-family: var(--font-sans); font-weight: bold; }

.nolink, .nolink:hover, .nolink:visited, .nolink:link { text-decoration: none; }

.nohover:hover { color: inherit; }

main { flex: 1 0 auto; min-height: auto; margin: 0; padding: 0 40px; text-align: left; max-width: var(--text-width); }

a { cursor: pointer; color: inherit; }

a:hover { color: var(--color-1-dark); }

.center { text-align: center; align-self: center; }

footer { flex-shrink: 0; width: 100%; text-align: center; background-color: var(--color-1); line-height: 2; }

footer > a { padding: 10px 14px; text-decoration: underline; text-wrap: nowrap; }

.footer-small { font-size: 80%; }

.footer-bottom { background-color: var(--footer-bottom); color: var(--footer-bottom-text); }

footer > a:hover { color: var(--smiley-color); }

.footer-bottom > a:hover { color: var(--smiley-color); }

.mobile_only { display: none; }

@media all and (min-width: 800px) { .main-nav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: var(--color-triad-2); overflow-x: hidden; transition: 0.5s; padding-top: 86px; }
  .main-nav > a:not(:first-child) { padding: 14px 20px; font-size: var(--nav-font-size); overflow-x: hidden; color: var(--nav-color-text); display: block; white-space: nowrap; border-bottom: 3px solid var(--color-triad-2); }
  .main-nav > a:not(:first-child):hover { background: var(--smiley-color); }
  .main-nav .closebtn { visibility: hidden; position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 70px; padding-top: 15px; transition: .3s; }
  .main-nav .closebtn:hover { color: var(--smiley-color); } }
@media all and (max-width: 800px) { .main-nav { flex-direction: column; padding: 0; display: flex; flex: 0 0 auto; list-style-type: none; justify-content: flex-start; }
  .main-nav > a { padding: 14px 20px; font-size: var(--nav-font-size); color: var(--nav-color-text); background: var(--color-triad-2); flex-basis: 100%; text-align: left; font-size: 1em; display: none; }
  .main-nav > a:hover { background: var(--smiley-color); }
  .active { background: var(--smiley-color !important); }
  footer > a > .mobile_only { display: block; }
  .main-nav > a:not(:first-child):hover { background: var(--smiley-color); }
  #closeBtn { display: none; }
  .main-nav > .mobile_only { display: none; }
  .larger_font ~ .mobile_only { display: block; }
  main { display: flex; justify-content: center; flex-direction: column; padding: 0 15px; max-width: 100%; }
  .img_container { flex-direction: column; } }
.color-1 { background-color: var(--color-1); }

.color-1-text { color: var(--color-1); }

.color-1-dark-text { color: var(--color-1-dark); }

.color-1-light { background-color: var(--color-1-light); }

.color-triad-2 { background-color: var(--color-triad-2); }

.color-triad-2-text { color: var(--color-triad-2); }

.gradient { background: linear-gradient(to right, var(--color-1), var(--color-1-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background .5s; }

.smiley { background: var(--smiley-color); }

.turquoise:hover { background: var(--color-triad-2) !important; }

.wrap { white-space: normal; }

.randombtn:hover { color: white; cursor: default; }

.default-cursor { cursor: text; }

.textwhite { color: light-dark(white, black) !important; }

.textblack { color: black; }

@font-face { font-family: "Open Sans"; src: url("/assets/open_sans/OpenSans-Regular.ttf"); }
@font-face { font-family: "Open Sans"; src: url("/assets/open_sans/OpenSans-Bold.ttf"); font-weight: bold; }
#randomMom { text-align: center; font-weight: bold; font-family: var(--font-serif); align-self: center; font-size: 215%; padding-bottom: 50px; }

#linkFinal2:hover { color: var(--color-triad-2-dark); }

#defLabel, #randomDefinition { font-size: 120%; }

#mommLabel, #randomMommentary { font-weight: bold; }

#exLabel, #randomExample { font-style: italic; }

#defLabel, #randomDefinition, #mommLabel, #randomMommentary, #exLabel, #randomExample { max-width: 400px; text-align: center; color: var(--color-triad-2-dark); padding-bottom: 10px; align-self: center; }

#hoverparent { display: flex; flex-direction: column; object-fit: cover; }

#hoverparent:hover #defLabel, #hoverparent:hover #randomDefinition, #hoverparent:hover #mommLabel, #hoverparent:hover #randomMommentary, #hoverparent:hover #exLabel, #hoverparent:hover #randomExample, #hoverparent:hover #randomMom { color: var(--smiley-color); }

#hoverparent #defLabel, #hoverparent #randomDefinition, #hoverparent #mommLabel, #hoverparent #randomMommentary, #hoverparent #exLabel, #hoverparent #randomExample, .darkturquoise { color: var(--color-triad-2-dark); }

a[href$="\.pdf" i]::after { font-family: "Font Awesome 6 Free"; content: '\f1c1'; font-weight: 400; margin-left: .3em; text-decoration: none; background-color: inherit; color: var(--color-1-dark); display: inline-block; }

a[href^="http" i]::after { font-family: "Font Awesome 6 Free"; content: '\f35d'; font-weight: 900; font-size: .6em; margin: 0 0 .05em .4em; color: var(--color-triad-2-dark); text-decoration: none; background-color: transparent; display: inline-block; }

a[href^="https://m.smrh.xyz/" i]::after { content: none; }

a[href^="https://www.summerhays.net/" i]::after { content: none; }

body::-webkit-scrollbar { width: .5em; }

body::-webkit-scrollbar-track { background-color: var(--scrollbar-back); border-radius: 100vw; margin-block: .05em; }

body::-webkit-scrollbar-thumb { background-color: var(--color-1-light); border: 0.05em solid var(--scrollbar-back); opacity: 70%; border-radius: 100vw; transition: background .3s; }
body::-webkit-scrollbar-thumb:hover { background-color: var(--color-1); }
body::-webkit-scrollbar-thumb:active { background-color: var(--color-1-dark); }

@supports (scrollbar-color: red blue) { * { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-back); } }