@charset "UTF-8";
/*
Theme Name: Melatonin Twenty Twenty-Two Child
Theme URI: https://melatonin.dev
Author: csstune
Author URI: https://csstune.com/
Description: A child theme for Twenty Twenty Two.
Tested up to: 6.2
Requires PHP: 5.6
Version: 2.96
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: melatonin-twentytwentytwo-child
Template: twentytwentytwo
Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/
/* ------------------------------- */
/* VARIABLES */
/* RESET */
/* LAYOUT */
/* HEADER */
/* BLOG AND CATEGORY INDEXES */
/* POST */
/* ENTRY CONTENT */
/* COMMENTS */
/* RELATED POSTS */
/* IMAGES */
/* CALLOUTS */
/* INLINE CODE BLOCKS */
/* SYNTH BANNER */
/* YOUTUBE EMBED */
/* MAILCHIMP */
/* CARDS */
/* OPEN SOURCE PAGE */
/* MANUAL */
/* HOME PAGE */
/* ------------------------------- */
/* VARIABLES */
/* RESET */
a:focus, button:focus, input:focus, :focus {
  outline: none !important;
  background-color: transparent !important;
}
img {
  color: transparent;
}
/* LAYOUT */
.wp-site-blocks {
  padding-right: 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
@media only screen and (max-width: 830px) {
  .wp-container-7 > :where(:not(.alignleft):not(.alignright)) {
    max-width: 90% !important;
  }
  .wp-container-8 > :where(:not(.alignleft):not(.alignright)) {
    max-width: 90% !important;
  }
  .wp-container-core-post-content-layout-1 > :where(:not(.alignleft):not(.alignright)) {
    max-width: 90% !important;
  }
}
main > .wp-container-12, .wp-container-18, main > .wp-container-32, main > .wp-container-20, main > .wp-container-33, main > .center-content {
  margin-top: 0 !important;
}
.wp-container-6 > figure.alignwide {
  max-width: none;
}
footer p {
  margin-bottom: 0;
}
/* HEADER */
.wp-block-navigation__responsive-container {
  display: block !important;
  position: static !important;
}
.wp-block-navigation__responsive-container-open {
  display: none !important;
}
.wp-block-navigation__responsive-container-close {
  display: none !important;
}
.wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background {
  margin-bottom: -24px;
  height: 101px;
  padding-top: 0;
  margin-top: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  background: linear-gradient(180deg, #210346 0%, #210445 48.05%, #1c043a 84.77%, #17032e 100%);
}
@media only screen and (max-width: 480px) {
  .wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background {
    height: 80px;
  }
}
.wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background .wp-block-site-title {
  background-image: url("https://melatonin.dev/wp-content/uploads/2022/01/moon-logo-large.png");
  width: 108px;
  height: 90px;
  text-indent: -9999px;
  background-size: 100%;
  position: relative;
  top: 5px;
  padding-bottom: 0;
}
@media only screen and (max-width: 480px) {
  .wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background .wp-block-site-title {
    background-image: url("https://melatonin.dev/wp-content/uploads/2022/01/moon-logo-large.png");
    width: 90px;
    height: 70px;
    text-indent: -9999px;
    background-size: 100%;
    position: relative;
    top: 5px;
    left: -18px;
    padding-bottom: 0;
  }
}
.wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background .wp-block-site-title a {
  display: block;
  width: 100%;
  height: 100%;
}
.wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background .wp-container-5 {
  max-width: 100%;
}
.wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background .wp-container-core-group-layout-2 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background .wp-container-4 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background .wp-container-3 {
  position: relative;
  top: 8px;
}
.wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background .wp-container-3 a {
  color: #aca6fb !important;
}
@media only screen and (max-width: 480px) {
  .wp-site-blocks > .wp-block-template-part > .melatonin-header.wp-block-group.has-background .wp-container-3 {
    left: -26px;
  }
}
/* BLOG AND CATEGORY INDEXES */
body.blog .page-header {
  display: none;
}
body.category .wp-block-query-title {
  max-width: 1240px;
  padding-top: 80px;
  margin-bottom: 0 !important;
  font-weight: 400;
  font-size: 48px !important;
}
@media only screen and (max-width: 1250px) {
  body.category .wp-block-query-title {
    max-width: 90% !important;
  }
}
/* POST */
.melatonin-page-title {
  margin-left: auto;
  margin-right: auto;
  max-width: 750px !important;
  margin-bottom: 0 !important;
  font-size: 48px;
  font-weight: 400 !important;
}
@media only screen and (max-width: 830px) {
  .melatonin-page-title {
    max-width: 90% !important;
  }
}
.post-meta {
  max-width: 750px !important;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
}
.post-meta .taxonomy-category {
  align-self: start;
}
.post-meta > .wp-block-group:first-child {
  gap: 0;
}
@media only screen and (max-width: 830px) {
  .post-meta {
    max-width: 90% !important;
  }
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ccc;
  width: 100%;
  border: 0;
  height: 1px;
}
.below-post-hr {
  height: 1px !important;
}
/* ENTRY CONTENT */
.entry-content p, .entry-content ul, .entry-content ol {
  margin-bottom: 20px !important;
  margin-top: 0 !important;
}
.entry-content > h1 {
  margin-bottom: 30px;
}
.entry-content h2 {
  margin-top: 52px !important;
  margin-bottom: 13px !important;
  position: relative;
}
.entry-content h3 {
  margin-block-end: 30px !important;
}
.entry-content .anchor {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  left: -40px;
  top: 1px;
}
@media only screen and (max-width: 830px) {
  .entry-content .anchor {
    display: none;
  }
}
/* COMMENTS */
.single-comment {
  background-color: rgba(238, 187, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
}
.wp-block-comment-reply-link {
  margin-top: 0;
}
.comment-form > p input[type="email"], .comment-form > p input[type="text"], .comment-form > p input[type="url"], .comment-form > p textarea {
  border-radius: 8px;
  border-width: 1px;
}
#respond #submit {
  color: #fff;
  border-radius: 8px;
  border-width: 1px;
  background-color: #210346;
  border: 1px solid #210346;
}
#respond #submit:hover {
  color: #000;
  background-color: transparent;
}
.read-comments {
  max-width: 750px !important;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 830px) {
  .read-comments {
    max-width: 90% !important;
  }
}
/* RELATED POSTS */
.related-posts-heading {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  margin-block-start: 60px !important;
  text-align: center;
}
@media only screen and (max-width: 830px) {
  .related-posts-heading {
    max-width: 90%;
  }
}
.related-posts {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (max-width: 830px) {
  .related-posts {
    max-width: 90%;
  }
}
.related-posts a {
  display: block;
  box-sizing: border-box;
  margin-top: 0;
  border: 1px solid #efefef;
  background-color: #fcfcfc;
  margin-left: 0;
  margin-right: 40px;
  margin-bottom: 40px;
  width: calc(50% - 20px) !important;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
}
.related-posts a:nth-child(2) {
  margin-right: 0 !important;
}
@media only screen and (max-width: 830px) {
  .related-posts a {
    width: 100% !important;
    margin-right: 0 !important;
  }
}
.related-posts a .title {
  font-size: 20px;
  font-weight: 500;
  line-height: 22px;
  padding: 16px;
}
.related-posts a img {
  width: 100%;
  height: auto;
}
/* IMAGES */
.wp-block-image.alignleft {
  max-width: 50%;
}
@media only screen and (max-width: 830px) {
  .wp-block-image.alignleft {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
}
.wp-block-image.alignright {
  max-width: 50%;
}
@media only screen and (max-width: 830px) {
  .wp-block-image.alignright {
    max-width: 90% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.entry-header .post-thumbnail, .singular .post-thumbnail, .alignfull [class*="inner-container"] > .alignwide, .alignwide [class*="inner-container"] > .alignwide {
  max-width: none;
  width: 100%;
  margin-top: -30px;
}
.post-thumbnail .wp-post-image {
  max-width: none !important;
  margin-top: 0 !important;
}
.wp-block-image:not(.is-style-rounded) img {
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.45);
  margin-left: auto;
  margin-right: auto;
  height: auto !important;
}
.wp-block-image:not(.is-style-rounded) > div {
  margin-left: auto;
  margin-right: auto;
}
figure.wp-block-image {
  margin-bottom: 30px;
  text-align: center;
  margin-top: 30px;
}
figure figcaption {
  font-size: 16px !important;
  color: #000 !important;
}
/* CALLOUTS */
.callout-note, .callout-tip, .callout-warning {
  border-radius: 8px;
  padding: 24px 64px 18px 64px;
  position: relative;
}
.callout-note::before, .callout-tip::before, .callout-warning::before {
  content: "";
  display: block;
  position: absolute;
  left: 17px;
  top: 24px;
  font-size: 22px;
}
.callout-note h4, .callout-tip h4, .callout-warning h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 7px;
  margin-bottom: 20px;
}
.callout-note p, .callout-tip p, .callout-warning p {
  max-width: 100% !important;
}
.callout-note {
  background-color: #fefdf8;
  border: 1px solid #fbebb6;
}
.callout-note::before {
  content: "📝";
}
.callout-tip {
  background-color: #f3faf4;
  border: 1px solid #9dc6a1;
}
.callout-tip::before {
  content: "💡";
}
.callout-warning {
  background-color: #fdf9f8;
  border: 1px solid #c14e3e;
}
.callout-warning::before {
  content: "⚠️";
}
/* INLINE CODE BLOCKS */
.wp-block-code {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.45);
  background-color: #222;
  margin-bottom: 20px;
  color: #d9e0ed;
  box-sizing: border-box;
  font-size: 16px;
}
.wp-block-code:focus {
  background-color: #222 !important;
}
.wp-block-code > code {
  border: 0 !important;
  color: #d9e0ed !important;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
}
p code, li code {
  color: #000000;
  background-color: rgba(238, 187, 255, 0.42);
  border-radius: 4px;
  padding: 2px 5px 2px 5px;
  position: relative;
  top: -0.5px;
  -webkit-font-smoothing: antialiased;
}
/* SYNTH BANNER */
.synth-banner {
  width: 100% !important;
  margin: 0 !important;
  margin-top: 52px !important;
  background-color: #100521;
  max-width: none !important;
  min-height: 212px;
}
.synth-banner .synth-banner-inner {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 30px;
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
  display: flex;
}
@media only screen and (max-width: 830px) {
  .synth-banner .synth-banner-inner {
    flex-direction: column-reverse;
  }
}
.synth-banner .synth-banner-inner .synth-banner-inner-left {
  padding-top: 48px;
  text-align: center;
}
.synth-banner .synth-banner-inner .synth-banner-inner-left p {
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 6px !important;
}
@media only screen and (max-width: 830px) {
  .synth-banner .synth-banner-inner .synth-banner-inner-left p br {
    display: none;
  }
}
.synth-banner .synth-banner-inner .synth-banner-inner-left a {
  color: #ffc83b;
  font-weight: 700;
  text-decoration: underline;
  font-size: 18px;
}
.synth-banner .synth-banner-inner .yellow-arrow {
  padding-top: 62px;
}
@media only screen and (max-width: 830px) {
  .synth-banner .synth-banner-inner .yellow-arrow {
    display: none;
  }
}
.synth-banner .synth-banner-inner .synth-banner-inner-right .screenshot .image {
  display: block;
  width: 170px;
  position: relative;
  left: 20px;
  top: 33px;
  box-shadow: 0 -6px 64px #7178ff80, 0 24px 64px #ff9a6180;
  border-radius: 6px;
}
@media only screen and (max-width: 830px) {
  .synth-banner .synth-banner-inner .synth-banner-inner-right .screenshot .image {
    margin-left: auto;
    margin-right: auto;
    left: 0;
  }
}
.synth-banner .synth-banner-inner .synth-banner-inner-right .screenshot .image img {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
}
/* YOUTUBE EMBED */
figure.wp-block-embed-youtube iframe {
  border-radius: 8px;
  overflow: hidden;
}
/* MAILCHIMP */
.mailchimp-container {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 60px;
  padding: 60px 20px 50px 20px;
  border-radius: 8px;
  background: linear-gradient(0deg, #210346 0%, #853fdb 160%);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.45);
  color: #aca6fb;
}
.mailchimp-container .mailchimp-heading {
  font-weight: bold;
  margin-bottom: 60px;
  font-size: 32px;
  margin-left: auto;
  margin-right: auto;
}
.mailchimp-container #mc4wp-form-1 {
  margin-left: auto;
  margin-right: auto;
}
.mailchimp-container #mc4wp-form-1 input[type="submit"] {
  border-radius: 8px;
  padding: 15px 30px;
  background-color: #000000 !important;
  margin-top: 20px;
  border: 0;
  font-size: 18px;
  color: #fff;
}
.mailchimp-container #mc4wp-form-1 label {
  display: block;
}
.mailchimp-container #mc4wp-form-1 input[type="text"], .mailchimp-container #mc4wp-form-1 input[type="email"] {
  box-sizing: border-box;
  border: 1px solid #333333;
  width: 300px;
  font-weight: 600;
  background-color: #ffffff !important;
  color: #000 !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  height: 52px;
  line-height: 30px;
  margin: 0 2px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  padding-left: 8px;
  padding-right: 8px;
}
.mailchimp-container #mc4wp-form-1 input[type="email"] {
  margin-top: 10px;
}
/* CARDS */
.cards {
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 1250px) {
  .cards {
    max-width: 90% !important;
  }
}
.cards > ul {
  display: flex;
  flex-wrap: wrap;
  padding-top: 80px;
  padding-left: 0;
  padding-right: 0;
}
.cards > ul > li {
  margin-top: 0;
  border: 1px solid #efefef;
  background-color: #fcfcfc;
  margin-left: 0;
  margin-right: 40px;
  margin-bottom: 40px !important;
  width: calc(33% - 26.6666px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}
.cards > ul > li:nth-child(3n) {
  margin-right: 0;
}
@media only screen and (max-width: 1250px) {
  .cards > ul > li {
    width: calc(50% - 22px) !important;
    margin-right: 40px !important;
  }
  .cards > ul > li:nth-child(2n) {
    margin-right: 0 !important;
  }
}
@media only screen and (max-width: 800px) {
  .cards > ul > li {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.cards > ul > li img {
  width: 100%;
}
.cards > ul > li h2, .cards > ul > li h3 {
  margin-top: 16px !important;
  line-height: 26px !important;
  font-weight: 500;
  padding: 0 28px;
  text-decoration: none;
  font-size: 24px;
  font-weight: 500;
  text-decoration: none !important;
}
.cards > ul > li h2 a, .cards > ul > li h3 a {
  text-decoration: none !important;
  font-size: 24px;
  font-weight: 500;
}
.cards > ul > li .wp-block-post-excerpt {
  font-size: 16px;
  margin-top: 0px;
  margin-bottom: -6px;
  padding: 0 28px;
}
.cards > ul > li .wp-block-post-excerpt p {
  line-height: 1.35;
  margin-top: 0;
}
.cards > ul > li .wp-block-post-date, .cards > ul > li .wp-block-post-terms {
  padding: 0 28px;
}
.cards > ul > li .wp-block-post-date a {
  text-decoration: none;
}
.cards > ul > li .post-thumbnail-container {
  width: 100%;
  height: 0;
  padding-bottom: 25%;
}
.cards > ul > li figure {
  margin-top: 0 !important;
  margin-bottom: 0;
}
.cards > ul > li figure img {
  height: auto !important;
}
.cards > ul > li .taxonomy-category {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}
/* OPEN SOURCE PAGE */
body.open-source .melatonin-page-title {
  max-width: 1240px !important;
  margin-top: 100px;
}
@media only screen and (max-width: 830px) {
  body.open-source .melatonin-page-title {
    max-width: 90% !important;
  }
}
body.open-source .entry-content > * {
  max-width: 1240px !important;
}
@media only screen and (max-width: 830px) {
  body.open-source .entry-content > * {
    max-width: 90% !important;
  }
}
body.open-source .open-source {
  padding-top: 0;
  max-width: 1240px !important;
}
@media only screen and (max-width: 830px) {
  body.open-source .open-source {
    max-width: 90% !important;
  }
}
body.open-source .open-source ul {
  margin-top: 0 !important;
  padding-top: 0;
}
body.open-source .open-source ul a {
  text-decoration: none !important;
}
/* MANUAL */
body:not(.single-manual) .sidebar-toc {
  display: none !important;
}
body:not(.single-manual) .sidebar-right-buffer {
  display: none !important;
}
body:not(.single-manual) .breadcrumbs {
  display: none !important;
}
body:not(.single-manual) .inline-toc {
  display: none !important;
}
body:not(.single-manual) .manual-prev-next {
  display: none !important;
}
body:not(.single-manual) .search-bar {
  display: none !important;
}
.search-bar {
  margin-block-start: 66px !important;
}
.wp-block-search__button {
  background-color: #210346;
  border-radius: 8px;
}
.wp-block-search__label {
  display: none;
}
.wp-block-search__input {
  border-radius: 8px;
}
body.search-results .search-bar {
  display: block !important;
  padding-bottom: 20px !important;
}
body.search-results .wp-block-post-template {
  max-width: 750px !important;
}
body.search-results .breadcrumbs {
  display: block !important;
  max-width: none !important;
  font-size: 40px;
}
body.search-results .breadcrumbs :nth-child(1) {
  display: none;
}
body.search-results .breadcrumbs :nth-child(2) {
  display: none;
}
body.search-results .search-results-excerpt {
  margin-block-start: 0px;
}
body.single-manual main {
  display: flex;
}
body.single-manual main .toc.sidebar-toc {
  padding-top: 25px;
  padding-left: 20px;
  flex: 1;
  min-width: 250px;
}
@media only screen and (max-width: 830px) {
  body.single-manual main .toc.sidebar-toc {
    display: none;
  }
}
body.single-manual main .toc.inline-toc {
  display: none;
}
@media only screen and (max-width: 830px) {
  body.single-manual main .toc.inline-toc {
    display: block !important;
    max-width: 90%;
  }
}
body.single-manual main .toc h5 {
  font-size: 24px;
  margin-bottom: 10px;
  text-transform: capitalize;
  font-weight: 600;
}
body.single-manual main .toc a {
  font-size: 18px;
  text-decoration: none;
}
body.single-manual main .toc a.topic {
  font-size: 19px;
}
body.single-manual main .toc a:hover {
  text-decoration: underline;
}
body.single-manual main .wp-container-12 {
  width: 750px;
}
body.single-manual main .sidebar-right-buffer {
  flex: 1;
  min-width: 20px;
}
@media only screen and (max-width: 830px) {
  body.single-manual main .sidebar-right-buffer {
    display: none;
  }
}
@media only screen and (max-width: 830px) {
  body.single-manual main .wp-container-7 > :where(:not(.alignleft):not(.alignright)) {
    max-width: 90% !important;
  }
}
body.single-manual main .breadcrumbs {
  margin-top: 70px;
}
@media only screen and (max-width: 830px) {
  body.single-manual main .breadcrumbs {
    max-width: 90%;
  }
}
body.single-manual main .melatonin-page-title {
  margin-top: 40px;
}
@media only screen and (max-width: 830px) {
  body.single-manual main .melatonin-page-title {
    max-width: 90% !important;
  }
}
body.single-manual main .post-meta {
  display: none;
}
body.single-manual main .below-post-hr {
  display: none;
}
body.single-manual main .manual-prev-next {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
@media only screen and (max-width: 830px) {
  body.single-manual main .manual-prev-next {
    max-width: 90% !important;
  }
}
body.single-manual main .manual-prev-next a {
  text-decoration: none;
  font-size: 18px;
}
body.single-manual main .manual-prev-next a:hover strong {
  text-decoration: underline;
}
/* HOME PAGE */
body.home .wp-container-8 {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 830px) {
  body.home .wp-container-8 {
    max-width: 90% !important;
  }
}
body.home .wp-container-core-post-content-layout-1 {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 830px) {
  body.home .wp-container-core-post-content-layout-1 {
    max-width: 90% !important;
  }
}
body.home .melatonin-header {
  background: transparent !important;
  margin-bottom: -125px;
  position: relative;
  z-index: 100;
}
@media only screen and (max-width: 830px) {
  body.home .melatonin-header {
    margin-bottom: 0;
    background: linear-gradient(180deg, #210346 0%, #210445 48.05%, #1c043a 84.77%, #17032e 100%) !important;
  }
}
body.home .melatonin-page-title {
  display: none;
}