/* Entry point for your PostCSS build */

/* fuuuuuuck */

.oni-article-comment:not(:last-child) {
  margin-bottom: 1.2rem;
}

.oni-article-comment__poster-name {
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.oni-article-comment__posted-at {
  font-size: 80%;
  margin-bottom: 0.6rem;
}

.oni-article__comment-form textarea {
  height: 12rem;
  min-width: 50%;
}

.oni-article__comment-form input[type="text"] {
  min-width: 50%;
}

.oni-article {
  background-color: rgba(0,0,0,0.77);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.1rem;
  letter-spacing: .05rem;
  line-height: 1.3;
  padding: 3rem 5rem 5rem 5rem;
  overflow-wrap: anywhere;
}

.oni-article h1,
.oni-article h2,
.oni-article h3,
.oni-article h4,
.oni-article h5,
.oni-article h6 {
  color: #f6d8f2;
  font-weight: bold;
  letter-spacing: .2rem;
  line-height: 1.3;
  text-shadow: #b14a98 -4px -4px 4px, #286ad2 -4px 4px 4px;
  text-transform: uppercase;
}

.oni-article h1 {
  font-size: 2.7rem;
}

.oni-article h2 {
  margin-bottom: 1.5rem;
  margin-top: 2rem;
}

.oni-article pre {
  //background-color: rgba(0,0,0,0.87);;
  //box-shadow: #b14a98 -4px -4px 4px, #286ad2 -4px 4px 4px;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 1rem 2rem;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
}

.oni-article a:link, .oni-article a:visited {
  color: #2ac131;
  text-decoration: underline;
}

.oni-article a:hover, .oni-article a:active {
  color: lighten(#2ac131, 30%);
  text-decoration: underline;
}

.oni-article img {
  max-width: 100%;
}

@media (max-width: 1200px) {
  .oni-article {
    padding: 0.4rem;
  }
}

.browse-by-category {
  background-color: rgba(0,0,0,0.77);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.1rem;
  letter-spacing: .05rem;
  line-height: 1.3;
  padding: 3rem 5rem 5rem 5rem;
}

@media (max-width: 1200px) {
  .browse-by-category {
    padding: 2rem;
  }
}

.browse-by-category__header h1,
.browse-by-category__header h2,
.browse-by-category__header h3,
.browse-by-category__header h4,
.browse-by-category__header h5,
.browse-by-category__header h6 {
  color: #f6d8f2;
  font-weight: bold;
  letter-spacing: .2rem;
  line-height: 1.3;
  text-shadow: #b14a98 -4px -4px 4px, #286ad2 -4px 4px 4px;
  text-transform: uppercase;
}

.browse-by-category__header h1 {
  font-size: 2.7rem;
}

.browse-by-category__header h2 {
  margin-bottom: 1.5rem;
  margin-top: 2rem;
}

.browse-by-category__item {
  margin-bottom: 1.5rem;
}

.browse-by-category__item a:link, .browse-by-category__item a:visited {
  color: #2ac131;
  text-decoration: underline;
}

.browse-by-category__item a:hover, .browse-by-category__item a:active {
  color: lighten(#2ac131, 30%);
  text-decoration: underline;
}

.pagination {
  background-color: rgba(0,0,0,0.77);
  color: #9be99e;
  display: flex;
  font-size: 3.45rem;
  font-family: "Oni Montserrat Black", sans-serif;
  font-variant: small-caps;
  font-weight: bold;
  gap: 1rem;
  justify-content: space-between;
}

.pagination a:link, .pagination a:visited {
  color: #f6d8f2;
  text-decoration: none;
  text-shadow: #b14a98 -4px -4px 4px, #286ad2 -4px 4px 4px;
}

.pagination a:hover, .pagination a:active {
  color: lighten(#f6d8f2, 20%);
  text-decoration: underline;
}

.pagination__first,
.pagination__next,
.pagination__last,
.pagination__prev {
  flex: 1;
}

.pagination__next,
.pagination__last {
  text-align: right;
}

.pagination__line {
  display: flex;
}

.pagination__pagenums {
  text-align: center;
}

@media (max-width: 1200px) {
  .pagination {
    flex-direction: column;
  }
}

.latest-articles {
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}

.latest-articles__items {
  background-color: rgba(0,0,0,0.77);
  flex: 1;
  padding: 3rem 5rem 3rem 5rem;
}

.latest-articles__header {
  font-size: 2.45rem;
  font-family: "Oni Montserrat Black", sans-serif;
  font-weight: bold;
  letter-spacing: .4rem;
  text-shadow: #b14a98 -4px -4px 4px, #286ad2 -4px 4px 4px;
  text-transform: uppercase;
}

.latest-articles-item a:link, .latest-articles-item a:visited {
  color: #2ac131;
  text-decoration: none;
}

.latest-articles-item a:hover, .latest-articles-item a:active {
  color: lighten(#2ac131, 30%);
  text-decoration: underline;
}

.latest-articles-item__title-lead {
  color: #f6d8f2;
  font-weight: bold;
  padding-right: .4rem;
  text-shadow: #b14a98 -4px -4px 4px, #286ad2 -4px 4px 4px;
}

.latest-articles-item__title {
  letter-spacing: .15rem;
  text-transform: uppercase;
}

.latest-articles .pagination {
  padding: 2rem;
}

@media (max-width: 1200px) {
  .latest-articles__items {
    padding: 2rem;
  }
}

.oni-footer {
  background-color: rgba(0,0,0,0.77);
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.3rem;
  gap: 1rem;
  letter-spacing: .2rem;
  line-height: 1.3;
  margin: .11rem 0 0 0;
  padding: 3rem 5rem 5rem 5rem;
  text-transform: uppercase;
}

.oni-footer__country {
  height: 1.2rem;
}

.oni-footer__details,
.oni-footer__navigation {
  flex: auto;
}

.oni-footer__specs {
  margin-top: 3rem;
}

.oni-footer__details-list,
.oni-footer__specs-list,
.oni-footer__navigation-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.oni-footer__h1,
.oni-footer__level1-symbol,
.oni-footer__level2-symbol,
.oni-footer__fancy,
.oni-footer em,
.oni-footer strong {
  color: #f6d8f2;
  font-weight: bold;
  text-shadow: #b14a98 -4px -4px 4px, #286ad2 -4px 4px 4px;
}

.oni-footer__h1 {
  margin: 0 0 1rem 0;
}

.oni-footer__level2-symbol {
  font-size: 1.1rem;
}

.oni-footer a:link, .oni-footer a:visited {
  color: #2ac131;
  text-decoration: none;
}

.oni-footer a:hover, .oni-footer a:active {
  color: lighten(#2ac131, 30%);
  text-decoration: underline;
}

@media (max-width: 1200px) {
  .oni-footer {
    flex-direction: column-reverse;
    padding: 0.4rem;
  }

  .oni-footer__details, .oni-footer__navigation {
    margin-bottom: 0;
  }
}

.oni-header {
  background-color: rgba(0,0,0,0.77);
  color: #dff6dd;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin-bottom: .2rem;
  padding: 1.33rem;
  text-align: center;
  text-shadow: #b14a98 -4px -4px 4px, #286ad2 -4px 4px 4px;
}

.oni-header a:link,
.oni-header a:visited {
  color: white;
  text-decoration: none;
}

.oni-header a:hover,
.oni-header a:active {
  color: lighten(#9be99e, 20%);
  text-decoration: underline;
}

.oni-logo {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.oni-logo__svg {
  width: 4rem;
}

.oni-header__happy-slogan {
  font-size: 1.2rem;
  text-transform: uppercase;
}

@font-face {
  font-family: "Oni Caveat Bold";
  font-style: normal;
  font-weight: bold;
  src: local("Caveat Bold"),
    url("<%= asset_path("Caveat-Bold.ttf") %>") format("truetype");
}

@font-face {
  font-family: "Oni Caveat";
  font-style: normal;
  font-weight: normal;
  src: local("Caveat Regular"),
    url("<%= asset_path("Caveat-Regular.ttf") %>") format("truetype");
}

@font-face {
  font-family: "Oni Montserrat Black";
  font-style: normal;
  font-weight: 900;
  src: local("Montserrat Black"),
    url("<%= asset_path("Montserrat-Black.ttf") %>") format("truetype");
}

@font-face {
  font-family: "Oni Montserrat Black";
  font-style: normal;
  font-weight: 900;
  src: local("Montserrat Black"),
    url("<%= asset_path("Montserrat-Black.ttf") %>") format("truetype");
}

@font-face {
  font-family: "Oni IBM Plex Sans Regular";
  font-style: normal;
  font-weight: normal;
  src: local("IBM Plex Sans Regular"),
    url("<%= asset_path("IBMPlexSans-Regular.ttf") %>") format("truetype");
}

@font-face {
  font-family: "Oni IBM Plex Sans Bold";
  font-style: normal;
  font-weight: 900;
  src: local("IBM Plex Sans Bold"),
    url("<%= asset_path("IBMPlexSans-Bold.ttf") %>") format("truetype");
}

.oni-form-input-group {
  margin: 1.8rem 0;
}

.oni-form-label-wrapper {
  margin-bottom: 0.8rem;
}

.oni-form-submit {
  background-color: #000;
  border: 1px solid #fff;
  color: #f6d8f2;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: .2rem;
  line-height: 1.3;
  padding: 0.8rem 1.2rem;
  text-shadow: #b14a98 -4px -4px 4px, #286ad2 -4px 4px 4px;
  text-transform: uppercase;
}

.oni-form-input-group input[type=text],
.oni-form-input-group textarea
 {
  font-size: 1rem;
  padding: 0.2rem;
}

html {
  background-color: #000;
  color: white;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html, body {
  margin: 0;
  padding: 0;
}

.oni {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.oni-content {
  flex: 1;
}

.oni-container {
  background-color: rgba(0,0,0,0.77);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.1rem;
  letter-spacing: .05rem;
  line-height: 1.3;
  padding: 3rem 5rem 5rem 5rem;
}

.oni-container img {
  max-width: 100%;
}

.oni-container-narrow {
  background-color: rgba(0,0,0,0.77);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.1rem;
  letter-spacing: .05rem;
  line-height: 1.3;
  padding: 3rem 5rem 3rem 5rem;
  margin: 0.3rem 0;
}

.oni code.highlight {
  display: block;
  padding: 1rem 0.5rem;
}

.oni .highlight table td { padding: 5px; }

.oni .highlight table pre { margin: 0; }

.oni .highlight .gh {
  color: #999999;
}

.oni .highlight .sr {
  color: #f6aa11;
}

.oni .highlight .go {
  color: #888888;
}

.oni .highlight .gp {
  color: #555555;
}

.oni .highlight .ge {
  font-style: italic;
}

.oni .highlight .ges {
  font-weight: bold;
  font-style: italic;
}

.oni .highlight .gs {
  font-weight: bold;
}

.oni .highlight .gu {
  color: #aaaaaa;
}

.oni .highlight .nb {
  color: #f6aa11;
}

.oni .highlight .cm {
  color: #75715e;
}

.oni .highlight .cp {
  color: #75715e;
}

.oni .highlight .c1 {
  color: #75715e;
}

.oni .highlight .cs {
  color: #75715e;
}

.oni .highlight .c, .oni .highlight .ch, .oni .highlight .cd, .oni .highlight .cpf {
  color: #75715e;
}

.oni .highlight .err {
  color: #960050;
}

.oni .highlight .gr {
  color: #960050;
}

.oni .highlight .gt {
  color: #960050;
}

.oni .highlight .gd {
  color: #49483e;
}

.oni .highlight .gi {
  color: #49483e;
}

.oni .highlight .kc {
  color: #66d9ef;
}

.oni .highlight .kd {
  color: #66d9ef;
}

.oni .highlight .kr {
  color: #66d9ef;
}

.oni .highlight .no {
  color: #66d9ef;
}

.oni .highlight .kt {
  color: #66d9ef;
}

.oni .highlight .mf {
  color: #ae81ff;
}

.oni .highlight .mh {
  color: #ae81ff;
}

.oni .highlight .il {
  color: #ae81ff;
}

.oni .highlight .mi {
  color: #ae81ff;
}

.oni .highlight .mo {
  color: #ae81ff;
}

.oni .highlight .m, .oni .highlight .mb, .oni .highlight .mx {
  color: #ae81ff;
}

.oni .highlight .sc {
  color: #ae81ff;
}

.oni .highlight .se {
  color: #ae81ff;
}

.oni .highlight .ss {
  color: #ae81ff;
}

.oni .highlight .sd {
  color: #e6db74;
}

.oni .highlight .s2 {
  color: #e6db74;
}

.oni .highlight .sb {
  color: #e6db74;
}

.oni .highlight .sh {
  color: #e6db74;
}

.oni .highlight .si {
  color: #e6db74;
}

.oni .highlight .sx {
  color: #e6db74;
}

.oni .highlight .s1 {
  color: #e6db74;
}

.oni .highlight .s, .oni .highlight .sa, .oni .highlight .dl {
  color: #e6db74;
}

.oni .highlight .na {
  color: #a6e22e;
}

.oni .highlight .nc {
  color: #a6e22e;
}

.oni .highlight .nd {
  color: #a6e22e;
}

.oni .highlight .ne {
  color: #a6e22e;
}

.oni .highlight .nf, .oni .highlight .fm {
  color: #a6e22e;
}

.oni .highlight .vc {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight .nn {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight .nl {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight .ni {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight .bp {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight .vg {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight .vi {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight .nv, .oni .highlight .vm {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight .w {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight .n, .oni .highlight .py, .oni .highlight .nx {
  color: #ffffff;
  background-color: #272822;
}

.oni .highlight .ow {
  color: #f92672;
}

.oni .highlight .nt {
  color: #f92672;
}

.oni .highlight .k, .oni .highlight .kv {
  color: #f92672;
}

.oni .highlight .kn {
  color: #f92672;
}

.oni .highlight .kp {
  color: #f92672;
}

.oni .highlight .o {
  color: #f92672;
}

h1 {
	font-size: 2.7rem;
}

h2 {
	font-size: 1.3rem;
}

h3 {
  font-size: 1.1rem;
}

.what-is-my-ip-addresses {
  text-align: center;
}

.what-is-my-ip-addresses__header, .what-is-my-ip-addresses__ip-address {
  font-size: 3rem;
  text-transform: uppercase;
}

.oni-sorceress__gallery-component {
  margin: 1rem 0;
}

.oni-sorceress__gallery-component .oni-sorceress__gallery-title {
    margin-bottom: 1rem;
  }

.oni-sorceress__gallery-component .oni-sorceress__gallery-img-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

@media (width <= 1200px) {
    .oni-sorceress__gallery-component .oni-sorceress__gallery-img-wrapper {
      grid-template-columns: 1fr 1fr;
    }
  }

@media (width <= 600px) {
    .oni-sorceress__gallery-component .oni-sorceress__gallery-img-wrapper {
      grid-template-columns: 1fr;
    }
  }

.oni-sorceress__image-component img {
    max-width: 100%;
  }

.oni-sorceress__image-component a {
    display: block;
    max-width: 100%;
  }

.oni-sorceress__image-component--medium-preview {
  max-width: 40vw;
}

@media (max-width: 600px) {
  .oni-sorceress__image-component--medium-preview {
    max-width: 100%;
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  .oni-sorceress__image-component--medium-preview {
    max-width: 700px;
  }
}

@media(min-width: 1201px) and (max-width: 2200px) {
  .oni-sorceress__image-component--medium-preview {
    max-width: 700px;
  }
}

@media(min-width: 2201px) and (max-width: 3200px) {
  .oni-sorceress__image-component--medium-preview {
    max-width: 700px;
  }
}

.oni-sorceress__video-component video {
    display: block;
    height: auto;
    max-width: 100%;
  }