/*
User: Kiwi
Created @ Jul 3, 2022 6:16:11 PM
*/
/* 
    Created on : Jul 3, 2022, 6:16:11 PM
    Author     : Kiwi
*/
/*
User: Kiwi
Created @ Mar 23, 2025 9:39:07 AM
*/
/* 
    Created on : Mar 23, 2025, 9:39:07 AM
    Author     : Kiwi
*/
@font-face {
  font-family: asix;
  src: url(../fonts/ASIX-FOUNDER.otf); }
@font-face {
  font-family: asix-italic;
  src: url(../fonts/ASIX-FOUNDER-Italic.otf); }
@font-face {
  font-family: audionugget;
  src: url(../fonts/AudioNugget.ttf); }
@font-face {
  font-family: cageroll;
  src: url(../fonts/Cageroll-Standard.otf); }
@font-face {
  font-family: cageroll-outline;
  src: url(../fonts/Cageroll-Cage.otf); }
@font-face {
  font-family: cageroll-curl;
  src: url(../fonts/Cageroll-Roll.otf); }
@font-face {
  font-family: epoxy;
  src: url(../fonts/EpoxyDEMO-Regular.ttf); }
@font-face {
  font-family: excelerate;
  src: url(../fonts/Excelerate-Font.otf); }
@font-face {
  font-family: giga;
  src: url(../fonts/Giga.otf); }
@font-face {
  font-family: grafmassa;
  src: url(../fonts/Grafmassa-Regular.ttf); }
@font-face {
  font-family: grafmassa-italic;
  src: url(../fonts/Grafmassa-Italic.ttf); }
@font-face {
  font-family: graphy;
  src: url(../fonts/GraphyDEMO-Filled.ttf); }
@font-face {
  font-family: khavi;
  src: url(../fonts/Khavi-DEMO.otf); }
@font-face {
  font-family: morage;
  src: url(../fonts/Morage-DEMO.ttf); }
@font-face {
  font-family: nuklear;
  src: url(../fonts/NUKLEAR.otf); }
@font-face {
  font-family: protomo;
  src: url(../fonts/Protomo.otf); }
@font-face {
  font-family: protomo-outline;
  src: url(../fonts/Protomo-Outline.otf); }
@font-face {
  font-family: punkcyber;
  src: url(../fonts/PunkCyberDEMO-Regular.ttf); }
@font-face {
  font-family: synkopy;
  src: url(../fonts/Synkopy-Regular.otf); }
@font-face {
  font-family: synkopy-flipped;
  src: url(../fonts/Synkopy-Flipside.otf); }
@font-face {
  font-family: year;
  src: url(../fonts/Year.otf); }
@font-face {
  font-family: y-1999-k;
  src: url(../fonts/y-1999-k-sans.otf); }
@font-face {
  font-family: web-symbols;
  src: url(../fonts/WebSymbols-Regular.otf); }
@font-face {
  font-family: tif;
  src: url(../fonts/today-i-feel.regular.ttf); }
/*
User: Kiwi
Created @ Jul 4, 2022 10:50:05 PM
*/
/* 
    Created on : Jul 4, 2022, 10:50:05 PM
    Author     : Kiwi
*/
.md {
  left: 50%;
  /*padding: 0 0 0 12px;*/
  overflow: auto;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
  font-size: 15px;
  line-height: 1.3; }
  .md * {
    box-sizing: border-box; }
  .md hr {
    margin: 1em 0;
    border: 0;
    border-bottom: 1px solid #ccc; }
  .md blockquote {
    margin-left: 0;
    padding: 0.5em 0 0.5em 2em;
    border-left: 3px solid #d3daea;
    margin-left: 40px; }
  .md li, .md code {
    margin: 0.4em 0; }
  .md h1, .md h2, .md h3, .md h4, .md h5, .md h6, .md h7, .md p {
    padding: 0px 15px; }
  .md li {
    padding-right: 15px; }
  .md p {
    margin: 0.9em 0; }
    .md p:has(img) {
      margin: 0;
      padding: 0; }
  .md code {
    background: rgba(211, 218, 234, 0.25); }
  .md pre > code {
    display: block;
    padding: 0.5em 4em; }
  .md table {
    border-spacing: 0;
    border-collapse: collapse; }
  .md td {
    padding: 4px 8px; }
  .md tr:nth-child(2n) {
    /*background: #f3f3f3;*/
    background: #0000004f; }
  .md th {
    /*border-bottom: 1px solid #aaa;*/
    border-bottom: 1px solid #0000004f; }
  .md img {
    /*max-width: 96px;*/
    max-width: 100%;
    width: 100%;
    text-align: center;
    display: block;
    margin: 0 auto; }
    .md img.left {
      margin: unset !important;
      text-align: left; }
    .md img.center {
      margin: 0 auto; }
    .md img.native {
      width: unset;
      padding: 0 15px; }
    .md img.pad5 {
      padding-top: 5px;
      padding-bottom: 5px; }
    .md img.pad10 {
      padding-top: 10px;
      padding-bottom: 10px; }
  .md .plain, .md .markdown, .md .md {
    position: absolute;
    width: 50%;
    height: 100%;
    margin: 0; }
  .md .plain {
    border: 0;
    border-right: 1px solid #000;
    padding: 12px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 12px;
    resize: none; }
  .md .youtube {
    text-align: center; }

/*@import '_effects.scss';*/
/*@import '_fishtank.scss';*/
/*
User: Kiwi
Created @ May 15, 2024 4:56:35 PM
*/
/* 
    Created on : May 15, 2024, 4:56:35 PM
    Author     : Kiwi
*/
.whos-who-sidebar-bg {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 200px;
  background-color: #fffcce;
  display: none; }

#whos_who {
  display: flex;
  flex-wrap: wrap;
  width: -moz-available;
  position: absolute;
  /*left: 138px;*/
  left: 277px;
  top: 0px;
  /*z-index: 9999;*/
  justify-content: center;
  height: 100vh;
  transition: all ease .4s;
  overflow-x: hidden;
  /*    .card[data-character*=""] {
          background-size: cover;
          background-position: center center;
      }*/
  /*    .card[data-character="Luffy"] {
          background-image: url('https://www.w3schools.com/images/colorpicker2000.png');
      }*/ }
  @media (max-width: 1024px) {
    #whos_who {
      left: 0;
      align-content: first baseline; } }
  #whos_who.full {
    left: 0; }
  #whos_who .banner {
    background-color: #eee;
    height: 110px;
    width: 100%;
    background-image: url("https://i.imgur.com/PWbGaZA.jpeg");
    background-repeat: no-repeat;
    background-position: center -60px;
    background-size: 100% auto;
    display: table-cell;
    border-bottom: 1px solid #9d2424;
    user-select: none; }
    @media (max-width: 1024px) {
      #whos_who .banner {
        height: 30px;
        margin-top: 33px; } }
    #whos_who .banner .header-text {
      color: #dd2222;
      text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
      font-weight: bold;
      background-position: 200px auto;
      font-size: 85px;
      text-align: center;
      line-height: 110px;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 200, 200, 0.8);
      font-family: cageroll-curl;
      overflow: hidden; }
      @media (max-width: 1024px) {
        #whos_who .banner .header-text {
          font-size: 24px;
          line-height: 35px; } }
  #whos_who .me-container {
    /*background-color: #ccc;*/
    border: 1px solid black;
    width: 80%;
    height: 200px;
    margin-top: 20px;
    display: grid;
    text-align: center;
    justify-content: center; }
    @media (max-width: 1024px) {
      #whos_who .me-container {
        border: 0;
        border-bottom: 1px solid black;
        padding: 0;
        margin: 0;
        padding-bottom: 10px;
        margin-bottom: 15px;
        height: 120px;
        margin-top: 40px; } }
    @media (max-width: 1024px) {
      #whos_who .me-container .me-text {
        /*display: none;*/ } }
  #whos_who .clear_x {
    cursor: pointer;
    background-color: #daf0f0;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
    font-size: 14px; }
  #whos_who .cards-container {
    border: 1px solid black;
    /*width: 80%;*/
    margin-top: 20px;
    /*display: grid;*/
    text-align: center;
    justify-content: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
    gap: 5px;
    margin-bottom: 50px; }
    @media (max-width: 1420px) {
      #whos_who .cards-container {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } }
    @media (max-width: 1100px) {
      #whos_who .cards-container {
        grid-template-columns: 1fr 1fr 1fr 1fr; } }
    @media (max-width: 767px) {
      #whos_who .cards-container {
        grid-template-columns: 1fr 1fr 1fr; } }
    @media (max-width: 1024px) {
      #whos_who .cards-container {
        display: block;
        border: 0;
        margin: 0; } }
    #whos_who .cards-container .card {
      display: inline-block;
      margin: 3px; }
  #whos_who .card {
    background-color: #111;
    height: 150px;
    width: 130px;
    border: 1px solid #ddd;
    background-color: #1b2128;
    background-image: repeating-linear-gradient(45deg, #1c1c27 25%, transparent 25%, transparent 75%, #1c1c27 75%, #1c1c27), repeating-linear-gradient(45deg, #1c1c27 25%, #1b2128 25%, #1b2128 75%, #1c1c27 75%, #1c1c27);
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
    position: relative; }
    @media (max-width: 1024px) {
      #whos_who .card {
        height: 100px;
        width: 87px; } }
    #whos_who .card:hover .char_name {
      opacity: 1; }
  #whos_who .card .char_name {
    background-color: rgba(255, 255, 255, 0.6);
    color: white;
    color: #006e99;
    color: #df5151;
    text-shadow: 0px 0px 6px #fff;
    font-weight: bold;
    cursor: default;
    user-select: none;
    width: calc(100% - 2px);
    text-align: center;
    position: absolute;
    bottom: 0;
    padding: 1px;
    transition-delay: .4s;
    /*transition-timing-function: ease;*/
    opacity: 0;
    transition: opacity .3s; }
  #whos_who .card[style*="background"] {
    background-size: cover;
    background-position: center center; }
  #whos_who .card img {
    display: none; }
  #whos_who .card.x img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.7);
    /*        padding: 20px;
            height: 110px;
            width: 90px;*/ }

#BLDB_disclaimer {
  background-color: #0007;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  height: 100vh;
  overflow: hidden;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center; }
  #BLDB_disclaimer > div {
    background-color: aliceblue;
    width: 50%;
    max-width: 500px;
    padding: 30px 30px;
    border-radius: 50px;
    text-align: center;
    position: fixed;
    z-index: 99;
    /*        margin: 0 auto;
            top: 20vh;
            left: 0;
            right: 0;
            border: 0;*/
    text-align: center; }
    @media (max-width: 767px) {
      #BLDB_disclaimer > div {
        width: unset;
        max-width: 80%;
        padding: 30px; }
        #BLDB_disclaimer > div img {
          display: none; } }
    #BLDB_disclaimer > div b {
      background-color: red;
      color: white;
      padding: 2px 5px; }
    #BLDB_disclaimer > div ul li {
      text-align: left; }
    #BLDB_disclaimer > div button {
      background-color: #57bb8a;
      padding: 2px 10px;
      font-size: 21px;
      color: white;
      border: 2px solid green;
      cursor: pointer; }

#bl {
  min-height: 100vh;
  height: 100%; }
  #bl .bl-container {
    max-width: 1200px;
    margin: 0 auto; }
    @media (max-width: 1200px) {
      #bl .bl-container {
        max-width: 100%; } }
    @media (max-width: 767px) {
      #bl .bl-container .content-minus-header {
        padding: 0 10px; } }
    #bl .bl-container .tag {
      background-color: #ccc;
      border-radius: 8px;
      margin: 1px 1px;
      padding: 1px 9px;
      display: inline-block;
      font-size: 13px; }
      #bl .bl-container .tag.BL {
        color: #e6ffff;
        background-color: #fd8181; }
      #bl .bl-container .tag.Str8, #bl .bl-container .tag.GL, #bl .bl-container .tag.Gender_Bender, #bl .bl-container .tag.Role_Reversal {
        color: #ffcfc9;
        background-color: #b10202; }
      #bl .bl-container .tag.ROM {
        color: #b10202;
        background-color: #ffcfc9; }
      #bl .bl-container .tag.dudes_are_DUDES {
        color: #ffcfc9;
        background-color: #b10202; }
      #bl .bl-container .tag.Str8_2_GeY_Pipeline {
        color: #ff29cf;
        background-color: #faf1ec; }
      #bl .bl-container .tag.Age_gap {
        color: #fdbe73;
        background-color: #681616; }
      #bl .bl-container .tag.Action {
        color: #11734b;
        background-color: #d4edbc; }
      #bl .bl-container .tag.Fantasy {
        color: #5a3286;
        background-color: #e6cff2; }
      #bl .bl-container .tag.Slice_of_Life, #bl .bl-container .tag.School, #bl .bl-container .tag.College, #bl .bl-container .tag.Work {
        color: #473821;
        background-color: #ffe5a0; }
      #bl .bl-container .tag.Friendship {
        color: #473821;
        background-color: #ffe5a0; }
      #bl .bl-container .tag.Funny {
        color: #473821;
        background-color: #ffe5a0; }
      #bl .bl-container .tag.Suspense {
        color: #0a53a8;
        background-color: #bfe1f6; }
      #bl .bl-container .tag.Horror, #bl .bl-container .tag.Science_Fiction {
        color: #bfe0f6;
        background-color: #0a53a8; }
      #bl .bl-container .tag.Historical_Biographical {
        color: #215a6c;
        background-color: #c6dbe1; }
      #bl .bl-container .tag.Reverse_Harem, #bl .bl-container .tag.Harem {
        color: #f8f8f8;
        background-color: #f12500; }
      #bl .bl-container .tag.Isekai {
        color: #11734b;
        background-color: #d4edbc; }
      #bl .bl-container .tag.Videogame_Tower_etc {
        color: #d4edbc;
        background-color: #11734b; }
      #bl .bl-container .tag.Furry {
        color: #c6dbe1;
        background-color: #215a6c; }
      #bl .bl-container .tag.Royalty {
        color: #ffe5a0;
        background-color: #473822; }
      #bl .bl-container .tag.Shounen {
        color: #0a53a8;
        background-color: #bfe1f6; }
      #bl .bl-container .tag.Seinen {
        color: #bfe0f6;
        background-color: #0a53a8; }
      #bl .bl-container .tag.Shojo {
        color: #753800;
        background-color: #ffc8aa; }
      #bl .bl-container .tag.Josei {
        color: #ffc8aa;
        background-color: #753800; }
      #bl .bl-container .tag.Time_Travel {
        color: #11734b;
        background-color: #d4edbc; }
      #bl .bl-container .tag.Reincarnation {
        color: #d4edbc;
        background-color: #11734b; }
      #bl .bl-container .tag.I_Know_the_Plot_Fuckery {
        color: #db8aa0;
        background-color: #312041; }
      #bl .bl-container .tag.OMEGAVERSE {
        color: #c1ffbd;
        background-color: #272c23; }
      #bl .bl-container .tag.Noncon {
        color: #ffcfc9;
        background-color: #b10202; }
      #bl .bl-container .tag.Crime {
        color: #bfe0f6;
        background-color: #0a53a8; }
      #bl .bl-container .tag.Sports {
        color: #215a6c;
        background-color: #c6dbe1; }
    #bl .bl-container .flag-container {
      display: flex;
      margin: 11px 0;
      gap: 4px; }
      #bl .bl-container .flag-container .flag {
        /*width: 50%;*/
        display: flex;
        font-weight: bold; }
        #bl .bl-container .flag-container .flag .mini .full {
          display: none; }
    #bl .bl-container .flag {
      background-color: #ccc;
      padding: 4px 9px;
      border-radius: 9px; }
      #bl .bl-container .flag.green {
        background-color: #96d570; }
      #bl .bl-container .flag.yellow {
        background-color: #f7e39e; }
      #bl .bl-container .flag.orange {
        background-color: #f0893d; }
      #bl .bl-container .flag.red {
        background-color: #d14b4b; }
      #bl .bl-container .flag.black {
        background-color: #3d3d3d;
        color: white; }
      #bl .bl-container .flag.none {
        /*opacity: 0;*/
        display: none; }
      #bl .bl-container .flag.pure {
        background-color: #e9fcff; }
      #bl .bl-container .flag.lewd {
        background-color: #ececee; }
      #bl .bl-container .flag.mild {
        background-color: #ececee; }
      #bl .bl-container .flag.medium {
        background-color: #f0dcdd; }
      #bl .bl-container .flag.hot {
        background-color: #f4cccc; }
    #bl .bl-container #filters {
      margin-bottom: 25px; }
    #bl .bl-container #clearFiltersBtn {
      background-color: lightgray; }
      #bl .bl-container #clearFiltersBtn:hover {
        background-color: crimson;
        color: white; }
    #bl .bl-container .filter,
    #bl .bl-container .sorter,
    #bl .bl-container #clearFiltersBtn {
      border-radius: 4px;
      padding: 8px;
      margin-right: 5px;
      margin-bottom: 5px;
      font-size: 12px; }
      #bl .bl-container .filter.active,
      #bl .bl-container .sorter.active,
      #bl .bl-container #clearFiltersBtn.active {
        background-color: cornflowerblue !important;
        color: white !important; }
      #bl .bl-container .filter.negative,
      #bl .bl-container .sorter.negative,
      #bl .bl-container #clearFiltersBtn.negative {
        background-color: red !important;
        color: white !important; }
      #bl .bl-container .filter:hover,
      #bl .bl-container .sorter:hover,
      #bl .bl-container #clearFiltersBtn:hover {
        background-color: lightgray;
        color: black;
        /*cursor: pointer;*/ }
    #bl .bl-container #manga_tiles {
      margin-top: 25px;
      display: flex;
      flex-direction: column; }
      #bl .bl-container #manga_tiles.starred .card_container:not(.recc) {
        display: none; }
    #bl .bl-container .card_container {
      /*padding: 15px 0;*/ }
      @media (max-width: 767px) {
        #bl .bl-container .card_container .title-box.summary {
          display: none; }
        #bl .bl-container .card_container .card .card-body .box-row .title-box.animalrama {
          display: none; }
        #bl .bl-container .card_container .card {
          /*width: fit-content;*/
          margin: 0px auto 15px auto;
          /*flex-direction: column;*/ }
          #bl .bl-container .card_container .card .card-img .card-img2 {
            opacity: 1; }
          #bl .bl-container .card_container .card .card-body {
            /*width: unset;*/ }
            #bl .bl-container .card_container .card .card-body .box-row .name-row {
              width: 100%; }
              #bl .bl-container .card_container .card .card-body .box-row .name-row .title-box.name {
                width: 100%; }
        #bl .bl-container .card_container.open .title-box.summary, #bl .bl-container .card_container.open .card .card-body .box-row .title-box.animalrama {
          display: block; }
        #bl .bl-container .card_container.open .card {
          width: fit-content;
          margin: 0px auto 15px auto;
          flex-direction: column !important; }
          #bl .bl-container .card_container.open .card .card-img {
            background-color: unset;
            height: 200px !important;
            margin: 0 auto;
            background-size: cover;
            width: 100% !important;
            background-image: unset !important; }
            #bl .bl-container .card_container.open .card .card-img .card-img2 {
              opacity: 1;
              background-position: center center; }
          #bl .bl-container .card_container.open .card .card-body {
            width: 100% !important; }
            #bl .bl-container .card_container.open .card .card-body .box-row .name-row {
              flex-direction: column; }
              #bl .bl-container .card_container.open .card .card-body .box-row .name-row .title-box.name {
                flex-direction: column;
                width: auto; }
                #bl .bl-container .card_container.open .card .card-body .box-row .name-row .title-box.name .genres {
                  width: 100%;
                  margin-bottom: 7px; }
                #bl .bl-container .card_container.open .card .card-body .box-row .name-row .title-box.name .flag-container .flag .icon {
                  opacity: .2; }
                  #bl .bl-container .card_container.open .card .card-body .box-row .name-row .title-box.name .flag-container .flag .icon.number {
                    opacity: .1; }
                #bl .bl-container .card_container.open .card .card-body .box-row .name-row .title-box.name .flag-container .flag .mini {
                  z-index: 2;
                  width: 100%;
                  padding: 5px 0; }
              #bl .bl-container .card_container.open .card .card-body .box-row .name-row .title-box.read {
                display: none; }
            #bl .bl-container .card_container.open .card .card-body .box-row .title-box.summary, #bl .bl-container .card_container.open .card .card-body .box-row .title-box.review {
              max-height: unset !important; }
              #bl .bl-container .card_container.open .card .card-body .box-row .title-box.summary p, #bl .bl-container .card_container.open .card .card-body .box-row .title-box.review p {
                width: 100%;
                text-align: justify; } }
      #bl .bl-container .card_container * {
        transition: all .3s ease; }
      #bl .bl-container .card_container.recc, #bl .bl-container .card_container.recc .card-body .box-row .title-box h5.card-title {
        /*background-color: #fffce8;*/
        /*background-color: #ece8ce;*/ }
        #bl .bl-container .card_container.recc.recc .star, #bl .bl-container .card_container.recc .card-body .box-row .title-box h5.card-title.recc .star {
          display: inline-block !important; }
      #bl .bl-container .card_container .star {
        display: none;
        font-size: 21px;
        color: #caca1d;
        line-height: 0;
        margin-left: 1px; }
      #bl .bl-container .card_container.open {
        /*opacity: .3;*/ }
        #bl .bl-container .card_container.open .card {
          min-height: 400px; }
          #bl .bl-container .card_container.open .card .card-img {
            width: 25%;
            height: auto;
            /*background-position: center center;*/ }
            #bl .bl-container .card_container.open .card .card-img .card-img2 {
              width: auto;
              /*background-position: center center;*/ }
          #bl .bl-container .card_container.open .card .card-body {
            width: 75%; }
            #bl .bl-container .card_container.open .card .card-body .box-row {
              flex-direction: column; }
              #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name {
                width: 75%;
                display: flex;
                flex-grow: 1; }
                #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name h5.card-title {
                  position: absolute;
                  z-index: 99; }
                #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name .flag-container {
                  order: 2;
                  width: auto;
                  flex-grow: 1;
                  margin: 0; }
                  #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name .flag-container .flag {
                    width: 50%;
                    padding-left: 5px;
                    /*display: flex;*/
                    position: relative;
                    display: flex;
                    justify-content: flex-end; }
                    #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name .flag-container .flag .icon {
                      font-size: 33px;
                      padding-top: 1px;
                      /*float: left;*/
                      position: absolute;
                      left: 0px; }
                      #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name .flag-container .flag .icon.number {
                        font-size: 60px;
                        line-height: 59px;
                        opacity: .2;
                        color: #480000;
                        left: 10px;
                        text-align: right;
                        display: block; }
                    #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name .flag-container .flag .mini {
                      font-weight: bold;
                      font-size: 20px;
                      width: 80%;
                      max-width: 180px;
                      padding-bottom: 1px; }
                      #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name .flag-container .flag .mini .full {
                        display: block;
                        font-size: 12px;
                        font-weight: normal;
                        /*padding-left: 80px;*/ }
                  #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name .flag-container .smextrum.flag .mini .full {
                    /*                                                padding-left: 80px;*/ }
                #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name .genres {
                  flex-grow: 1;
                  width: 25%;
                  padding-top: 10px;
                  margin-top: 0; }
                #bl .bl-container .card_container.open .card .card-body .box-row .title-box.name .serial {
                  display: none; }
              #bl .bl-container .card_container.open .card .card-body .box-row .title-box.read {
                display: block; }
              #bl .bl-container .card_container.open .card .card-body .box-row .title-box.animalrama {
                display: none; }
              #bl .bl-container .card_container.open .card .card-body .box-row .title-box.review {
                display: block; }
              #bl .bl-container .card_container.open .card .card-body .box-row .title-box, #bl .bl-container .card_container.open .card .card-body .box-row .title-box review, #bl .bl-container .card_container.open .card .card-body .box-row .title-box.summary {
                width: fit-content;
                /*max-height: unset;*/ }
                #bl .bl-container .card_container.open .card .card-body .box-row .title-box p, #bl .bl-container .card_container.open .card .card-body .box-row .title-box review p, #bl .bl-container .card_container.open .card .card-body .box-row .title-box.summary p {
                  /*height: unset;*/ }
              #bl .bl-container .card_container.open .card .card-body .box-row .rating-container {
                width: auto; }
    #bl .bl-container .card {
      /*padding: 15px;*/
      position: relative;
      background-color: #a29393;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
      margin-bottom: 15px;
      transition: all .25s ease;
      font-size: 12px;
      flex-grow: 1;
      display: flex;
      /*height: 140px;*/
      justify-content: center;
      border: 1px solid #0004;
      /*background: #eee;*/
      background-color: #acacac; }
      #bl .bl-container .card .card-img {
        width: 120px;
        height: stretch;
        background-color: gray;
        background-image: url("../../img/meta.png");
        background-size: cover;
        background-repeat: no-repeat;
        /*filter: brightness(1.33);*/
        /*background-position: center center;*/
        background-position: top center;
        image-rendering: crisp-edges;
        transition: all ease 1s; }
        #bl .bl-container .card .card-img .card-img2 {
          opacity: 0;
          height: 100%;
          width: 120px;
          height: stretch;
          background-color: gray;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: top center;
          image-rendering: crisp-edges;
          transition: all ease .5s; }
        #bl .bl-container .card .card-img:hover .card-img2 {
          opacity: 1; }
      #bl .bl-container .card .card-body {
        display: flex;
        flex-direction: column;
        width: 100%; }
        #bl .bl-container .card .card-body .info-bar {
          width: 100%;
          text-align: left;
          height: 26px;
          background-color: #2b1111;
          z-index: 5;
          line-height: 26px;
          padding-left: 2px;
          display: none; }
        #bl .bl-container .card .card-body .box-row {
          display: flex;
          position: relative;
          height: 100%;
          justify-content: space-between; }
          #bl .bl-container .card .card-body .box-row .name-row {
            display: flex; }
          #bl .bl-container .card .card-body .box-row .title-box {
            border: 1px solid #2b1111;
            margin: 10px;
            padding: 5px;
            /*height: 85px;*/
            /*height: 105px;*/ }
            #bl .bl-container .card .card-body .box-row .title-box.name {
              /*width: 180px;*/
              width: 200px; }
              #bl .bl-container .card .card-body .box-row .title-box.name .card-title {
                position: unset; }
              #bl .bl-container .card .card-body .box-row .title-box.name .icon.number {
                display: none; }
              #bl .bl-container .card .card-body .box-row .title-box.name .genres {
                margin-top: 5px; }
            #bl .bl-container .card .card-body .box-row .title-box.read {
              display: none; }
            #bl .bl-container .card .card-body .box-row .title-box.summary, #bl .bl-container .card .card-body .box-row .title-box.review {
              /*width: 400px;*/
              overflow: hidden;
              border: 1px solid transparent;
              flex-grow: 1;
              width: 25%;
              max-height: 140px; }
              #bl .bl-container .card .card-body .box-row .title-box.summary h5, #bl .bl-container .card .card-body .box-row .title-box.review h5 {
                /*display: none;*/ }
              #bl .bl-container .card .card-body .box-row .title-box.summary p, #bl .bl-container .card .card-body .box-row .title-box.review p {
                width: 100%;
                height: 100%;
                overflow-x: hidden;
                overflow-y: scroll;
                padding-right: 17px;
                box-sizing: content-box;
                box-sizing: content-box;
                width: calc(100% - -15px);
                /*height: calc(100% - 5px);*/
                display: block;
                padding-top: 3px; }
            #bl .bl-container .card .card-body .box-row .title-box.review {
              display: none; }
            #bl .bl-container .card .card-body .box-row .title-box.genres {
              width: 150px;
              border: none;
              margin: 0;
              padding: 0; }
              #bl .bl-container .card .card-body .box-row .title-box.genres p {
                padding-top: 9px;
                text-align: center; }
            #bl .bl-container .card .card-body .box-row .title-box.animalrama {
              width: 100px;
              border: none;
              margin: 0;
              padding: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #5b5b5b; }
              #bl .bl-container .card .card-body .box-row .title-box.animalrama p {
                padding-top: 0px;
                text-align: center;
                font-size: 13px;
                font-family: cambria; }
            #bl .bl-container .card .card-body .box-row .title-box .card-title {
              font-weight: bold;
              font-size: 17px;
              margin: 0;
              margin-top: -16px;
              /*text-shadow: 0 0 53px #a29393;*/
              /*text-shadow: 0 0 53px #fff;*/
              background-color: #a29393;
              /*background-color: #eee;*/
              width: fit-content;
              position: absolute; }
            #bl .bl-container .card .card-body .box-row .title-box p {
              margin: 0;
              padding: 0;
              font-family: calibri;
              font-size: 15px; }
              #bl .bl-container .card .card-body .box-row .title-box p:not(:last-of-type) {
                /*margin-top: 8px;*/ }
          #bl .bl-container .card .card-body .box-row .rating-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px;
            width: 22px; }
            #bl .bl-container .card .card-body .box-row .rating-container.r {
              background-color: #ccc; }
            #bl .bl-container .card .card-body .box-row .rating-container.r1 {
              background-color: #e06666; }
            #bl .bl-container .card .card-body .box-row .rating-container.r2 {
              background-color: #e67f66; }
            #bl .bl-container .card .card-body .box-row .rating-container.r3 {
              background-color: #ed9966; }
            #bl .bl-container .card .card-body .box-row .rating-container.r4 {
              background-color: #f4b266; }
            #bl .bl-container .card .card-body .box-row .rating-container.r5 {
              background-color: #fbcc66; }
            #bl .bl-container .card .card-body .box-row .rating-container.r6 {
              background-color: #edd66a; }
            #bl .bl-container .card .card-body .box-row .rating-container.r7 {
              background-color: #c8d071; }
            #bl .bl-container .card .card-body .box-row .rating-container.r8 {
              background-color: #a2c97a; }
            #bl .bl-container .card .card-body .box-row .rating-container.r9 {
              background-color: #7dc281; }
            #bl .bl-container .card .card-body .box-row .rating-container.r10 {
              background-color: #57bb8a; }
            #bl .bl-container .card .card-body .box-row .rating-container.pure {
              background-color: #e9fcff; }
            #bl .bl-container .card .card-body .box-row .rating-container.lewd {
              background-color: #ececee; }
            #bl .bl-container .card .card-body .box-row .rating-container.mild {
              background-color: #3d3d3d; }
            #bl .bl-container .card .card-body .box-row .rating-container.medium {
              background-color: #f0dcdd; }
            #bl .bl-container .card .card-body .box-row .rating-container.hot {
              background-color: #f4cccc; }
            #bl .bl-container .card .card-body .box-row .rating-container .rating {
              color: #2b1111;
              font-size: 16px;
              font-weight: bold; }
            #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron {
              z-index: 2; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron:after {
                content: '';
                width: 0;
                height: 0;
                border-style: solid;
                /*border-width: 0 30px 30px 0;*/
                border-width: 0 50px 40px 0;
                /*border-color: transparent #608A32 transparent transparent;*/
                right: 0;
                top: 0;
                position: absolute;
                position: absolute;
                right: 0; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r:after {
                border-color: transparent #ccc transparent transparent; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r1:after {
                border-color: transparent #e06666 transparent transparent; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r2:after {
                border-color: transparent #e67f66 transparent transparent; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r3:after {
                border-color: transparent #ed9966 transparent transparent; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r4:after {
                border-color: transparent #f4b266 transparent transparent; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r5:after {
                border-color: transparent #fbcc66 transparent transparent; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r6:after {
                border-color: transparent #edd66a transparent transparent; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r7:after {
                border-color: transparent #c8d071 transparent transparent; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r8:after {
                border-color: transparent #a2c97a transparent transparent; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r9:after {
                border-color: transparent #7dc281 transparent transparent; }
              #bl .bl-container .card .card-body .box-row .rating-container .rating-chevron.r10:after {
                border-color: transparent #57bb8a transparent transparent; }
      #bl .bl-container .card:hover {
        /*transform: scale(1.01);*/
        cursor: pointer; }
      #bl .bl-container .card button {
        display: inline-block;
        background-color: #666;
        color: white;
        padding: 10px 12px;
        font-size: 10px;
        text-transform: uppercase;
        margin-left: auto;
        border-radius: 18px;
        transition: all .2s ease; }
        #bl .bl-container .card button:hover {
          background-color: black; }

/*@import '_windows.scss';*/
#spacer {
  width: fit-content;
  width: 25vw;
  display: inline-flex;
  position: fixed;
  left: 0;
  /*    background: 
      linear-gradient(to right, transparent, transparent), 
      url(https://grainy-gradients.vercel.app/noise.svg);*/
  filter: contrast(170%) brightness(1000%);
  filter: contrast(100%) brightness(100%);
  z-index: 1;
  z-index: 999999; }
  @media (max-width: 1024px) {
    #spacer {
      /*        display: none;*/
      width: 100%;
      /*overflow-x: hidden;*/ } }

center_pane .nav {
  position: fixed;
  top: 0;
  left: 15px;
  font-family: courier;
  font-size: 24px;
  font-weight: bold;
  padding: 80px 20px 10px 20px;
  border: 1px solid black;
  background: rgba(0, 0, 0, 0.2);
  width: 220px;
  border-bottom-left-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  background: rgba(26, 26, 26, 0.61);
  border-bottom-left-radius: 0px;
  height: 100vh;
  transition: all ease .3s;
  /* Dropdown styles */
    /*.dropdown summary::marker {
      display: none;
    }

    .dropdown summary:focus {
      outline: none;
    }*/
    /*.dropdown summary:focus a.button {
      border: 2px solid white;
    }

    .dropdown summary:focus {
      outline: none;
    }*/
  /* Dropdown triangle */ }
  @media (max-width: 1024px) {
    center_pane .nav {
      width: 100%;
      height: unset;
      left: 0;
      text-align: center;
      padding-top: 35px;
      width: 100vw;
      padding-left: 0;
      padding-right: 0;
      overflow-x: hidden; }
      center_pane .nav summary a {
        width: 100%; } }
  center_pane .nav .nav_bg {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    backdrop-filter: blur(5.1px); }
  center_pane .nav .summary-button, center_pane .nav .summary-button a {
    font-family: cageroll;
    font-size: 26px;
    color: black;
    color: #7ce6dc;
    text-decoration: none; }
  center_pane .nav .dropdown {
    padding: 0;
    border: none;
    display: block;
    max-height: 30px;
    height: 30px;
    transition: all .4s ease; }
  center_pane .nav .dropdown[open] {
    max-height: 1400px;
    height: fit-content; }
  center_pane .nav .dropdown summary {
    list-style: none;
    display: flex;
    transition: all 1s ease-in-out; }
  center_pane .nav .dropdown summary::after {
    content: "]";
    font-size: 16px;
    margin-left: 5px;
    margin-top: 2px;
    font-family: "web-symbols";
    padding-left: 8px;
    /*  position: absolute;
      right: -20px;*/ }
    @media (max-width: 1024px) {
      center_pane .nav .dropdown summary::after {
        display: none; } }
  center_pane .nav .dropdown[open] summary::after {
    content: "[";
    /*      @media(max-width: 1024px){
              display: none;
          }*/ }
  center_pane .nav .dropdown ul {
    text-shadow: none;
    list-style: none;
    margin: 0px;
    transition: all 1s ease-in-out;
    /*      @media(max-width: 1024px){
              display: none;
          }*/ }
  center_pane .nav .dropdown ul li {
    padding: 0;
    margin: 0;
    /*specific comic stylings*/ }
    center_pane .nav .dropdown ul li:last-child {
      /*margin-bottom: 5px;*/
      line-height: 16px;
      font-size: 20px; }
    center_pane .nav .dropdown ul li a {
      background-size: cover;
      padding: 1px 4px; }
    center_pane .nav .dropdown ul li .s_elfwest {
      /*background-image: url('../../img/comics/elfwest/elfwest.jpg');*/
      background-size: cover; }
    center_pane .nav .dropdown ul li .s_waterworld {
      /*background-image: url('../../img/comics/waterworld/cover-png8-16.png');*/
      background-size: cover;
      background-position: 52% 98%; }
  center_pane .nav .dropdown ul li a:link, center_pane .nav .dropdown ul li a:visited {
    display: inline-block;
    /*padding: 10px 0.8rem;*/
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    line-height: unset;
    /*color: var(--dropdown-color);*/
    text-decoration: none;
    border-bottom: 2px dashed transparent;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
  center_pane .nav .dropdown ul li a:hover {
    /*background-color: var(--dropdown-highlight);*/
    /*color: var(--dropdown-background);*/
    border-bottom: 2px dashed black; }
  center_pane .nav .dropdown ul::before {
    /*  content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      top: -10px;
      left: 50%;
      margin-left: -10px;
      border-style: solid;
      border-width: 0 10px 10px 10px;
      border-color: transparent transparent white transparent;*/ }
  center_pane .nav .dropdown[open] > summary::before {
    content: ' ';
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1; }
  center_pane .nav.closed {
    top: 100vh;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px; }
    @media (max-width: 1024px) {
      center_pane .nav.closed {
        top: -100vh; } }

#taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99999999999999; }
  @media (max-width: 1024px) {
    #taskbar {
      bottom: unset;
      top: 0; } }
  #taskbar #start {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    border: 1px solid black;
    background: rgba(0, 0, 0, 0.2);
    border-bottom-left-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6.1px);
    background: rgba(26, 26, 26, 0.61);
    border-bottom-left-radius: 0px;
    font-family: web-symbols;
    color: white;
    padding: 6px 0px 50px 20px;
    font-size: 26px;
    width: auto;
    box-sizing: content-box;
    overflow: hidden;
    position: relative;
    --latex-dim: calc(12.5rem + 2*var(--latex-dif, 0px));
    --latex-rad: calc(.5*var(--latex-dim));
    --inner-dim: calc(var(--latex-dim) + 2*var(--metal-inn, 0px));
    /*border: solid var(--metal-out, 0px) transparent;*/
    padding: var(--metal-mid, 0px);
    width: var(--inner-dim);
    height: var(--inner-dim);
    border-radius: 50%;
    --state-dy: 0px;
    box-shadow: 0 calc(1.5rem - var(--state-dy)) 1.25rem -0.75rem #5f5b5c;
    transform: translatey(var(--state-dy));
    /*        background: Radial-Gradient(transparent calc(70.71068% + -2*1px), var(--inner-end, #000) 70.71068%), Radial-Gradient(var(--glass-col, #777, #171717) calc(6.25rem + -1*1px), #000 6.25rem, #000 calc(var(--latex-rad) + -1*1px), transparent var(--latex-rad)) content-box, linear-gradient(#757575, #ffffff) content-box, repeating-radial-gradient(rgba(119, 119, 119, 0.15), rgba(187, 187, 187, 0.15), rgba(119, 119, 119, 0.15) 2px) padding-box, conic-gradient(#f4f4f4, #fafafa, #555, #e6e6e6, #808080, #e6e6e6, #555, #fafafa, #f4f4f4) padding-box, linear-gradient(#d5d5d5, #5f5f5f) border-box;*/
    background: Radial-Gradient(#222f4030 calc(70.71068% + -2*1px), var(--inner-end, #000) 70.71068%), Radial-Gradient(var(--glass-col, #777, #161717) calc(6.25rem + -1*1px), #090909 6.25rem, #000 calc(var(--latex-rad) + -1*1px), #d7202000 var(--latex-rad)) content-box, linear-gradient(#1f5ab5, #c61f1f) content-box, repeating-radial-gradient(rgba(210, 28, 28, 0.15), rgba(240, 12, 12, 0.15), rgba(221, 13, 13, 0.15) 2px) padding-box, conic-gradient(#ca4444, #c61919, #d71414, #731919, #c81d1d, #d71e1e, #8e2b2b, #c42222, #c41818) padding-box, linear-gradient(#d01515, #000) border-box;
    color: transparent;
    font-size: 0;
    filter: none;
    transition: all ease .4s;
    cursor: pointer;
    color: #ffffff9c;
    font-size: 127px;
    text-index: 48px;
    transform: scale(0.3);
    margin-bottom: -59px;
    margin-left: -60px;
    text-indent: 42px;
    line-height: 152px;
    font-size: 79px; }
    #taskbar #start:before, #taskbar #start:after {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -6rem;
      width: 12rem;
      height: 12rem;
      border-radius: 50%;
      content: ""; }
    #taskbar #start:before {
      height: 6.75rem;
      border-radius: 50%/ 59% 59% 41% 41%;
      transform: scalex(0.83);
      /*background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));*/
      /*background: linear-gradient(rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.1));*/
      background: linear-gradient(rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.1)); }
    #taskbar #start:after {
      /*box-shadow: inset 0 -4rem 1px -3.5rem rgba(255, 255, 255, 0.25);*/
      box-shadow: inset 0 -2.5rem 1px -1.4rem rgba(39, 111, 155, 0.44); }
    #taskbar #start:focus, #taskbar #start:hover {
      outline: none;
      /*filter: none;*/
      /*filter: contrast(0.57);*/
      filter: contrast(120%);
      background: Radial-Gradient(#0ea5ff7a calc(70.71068% + -2*1px), var(--inner-end, #000) 70.71068%), Radial-Gradient(var(--glass-col, #777, #161717) calc(6.25rem + -1*1px), #090909 6.25rem, #000 calc(var(--latex-rad) + -1*1px), #d7202000 var(--latex-rad)) content-box, linear-gradient(#1f5ab5, #c61f1f) content-box, repeating-radial-gradient(rgba(210, 28, 28, 0.15), rgba(240, 12, 12, 0.15), rgba(221, 13, 13, 0.15) 2px) padding-box, conic-gradient(#ca4444, #c61919, #d71414, #731919, #c81d1d, #d71e1e, #8e2b2b, #c42222, #c41818) padding-box, linear-gradient(#d01515, #000) border-box;
      box-shadow: 0 calc(1.5rem - var(--state-dy)) 1.25rem -0.75rem #acedf4b0; }
      #taskbar #start:focus:before, #taskbar #start:hover:before {
        background: linear-gradient(rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.1)); }
      #taskbar #start:focus:after, #taskbar #start:hover:after {
        box-shadow: inset 0 -2.5rem 1px -1.4rem rgba(28, 169, 255, 0.84); }
      #taskbar #start:focus:active, #taskbar #start:hover:active {
        /*color: black;*/
        top: 2px;
        background: Radial-Gradient(#0989d57a calc(70.71068% + -2*1px), var(--inner-end, #000) 70.71068%), Radial-Gradient(var(--glass-col, #777, #161717) calc(6.25rem + -1*1px), #090909 6.25rem, #000 calc(var(--latex-rad) + -1*1px), #d7202000 var(--latex-rad)) content-box, linear-gradient(#1f5ab5, #c61f1f) content-box, repeating-radial-gradient(rgba(210, 28, 28, 0.15), rgba(240, 12, 12, 0.15), rgba(221, 13, 13, 0.15) 2px) padding-box, conic-gradient(#ca4444, #c61919, #d71414, #731919, #c81d1d, #d71e1e, #8e2b2b, #c42222, #c41818) padding-box, linear-gradient(#d01515, #000) border-box; }
    @media (max-width: 1024px) {
      #taskbar #start {
        /*margin-top: -60px;*/
        width: 100vw;
        border-radius: inherit;
        margin: 0;
        max-width: unset;
        transform: scale(1);
        height: 30px;
        text-indent: 0;
        position: absolute;
        top: 0;
        left: 0;
        background: #333;
        color: white;
        line-height: unset;
        font-size: 22px; }
        #taskbar #start:before, #taskbar #start:after, #taskbar #start:hover, #taskbar #start:active, #taskbar #start:focus {
          background: #333 !important;
          box-shadow: transparent;
          top: 0 !important; } }

/*
.rate {
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    color: red;
    text-shadow:
    -2px -2px 0 #fff,
    2px -2px 0 #fff,
    -2px 2px 0 #fff,
    2px 2px 0 #fff;
}*/
.symbols {
  font-family: web-symbols; }

html {
  height: 100%;
  width: 100%;
  /*    background-color: #eee;
      background-image: url('../../img/yuna-web-32-no-matte.png');
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;*/
  z-index: 1;
  background-color: #eee; }

body::-webkit-scrollbar {
  width: 11px; }

body::-webkit-scrollbar {
  width: 11px; }

body {
  scrollbar-width: thin;
  scrollbar-color: #90A4AE #CFD8DC; }

body::-webkit-scrollbar-track {
  background: #CFD8DC; }

body::-webkit-scrollbar-thumb {
  background-color: #90A4AE;
  border-radius: 6px;
  border: 3px solid #CFD8DC; }

body {
  position: relative;
  /*top: 50px;*/
  /*width: 100%;*/
  margin: 0;
  min-height: 100vh;
  background-image: url("../../img/noise.svg");
  /*background-attachment: fixed;*/
  z-index: 1; }
  body img.background {
    /*      width: 120%;
          height: auto;
          position: fixed;
          right: -40%;
          top: -83%;
          z-index: -1;
          filter: blur(15px);
          overflow: hidden;*/
    /*transform: scaleX(-1);*/
    width: auto;
    height: 101%;
    position: fixed;
    left: 0%;
    bottom: -8px;
    /*z-index: -1;*/
    /*filter: blur(15px);*/
    overflow: hidden;
    /*transform: scaleX(-1);*/
    animation: shake 44s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
    display: none; }

.hidden {
  display: none; }

#mascot {
  position: fixed;
  bottom: 0;
  right: 0px;
  z-index: 15;
  width: 220px;
  height: 320px;
  /*background-image: url(../../img/yuna-cd-web.png);*/
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-blend-mode: multiply;
  filter: sepia(70%); }

#header {
  display: none;
  background-color: yellow;
  /*height: 30px;*/
  width: 100%;
  font-family: grafmassa-italic;
  /*position: absolute;*/
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  /*overflow: hidden;*/
  position: fixed;
  z-index: 2;
  line-height: 32px; }
  #header h1 {
    filter: blur(1px);
    /*@media(max-width: 1024px){*/
    display: inline-block;
    /*}*/ }
    #header h1 a {
      color: black; }

/*#header .nav {
    display: none;
    margin-left: 30px;
    display: inline-block;
    font-family: courier;
    font-size: 28px;
    font-weight: bold;
    line-height: 25px; 
    z-index: 2;
    
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
    
    h1 {
        display: none;
    }
    a {
        display: inline-block;
        color: black;
        cursor: pointer;
        text-decoration: underline;
        margin-left: 5px;
    }
    @media(min-width: 1024px){
        display: none;
    }
}*/
center_pane {
  /*border: 1px solid black;*/
  /*background-color: rgba(00,55,66,.4);*/
  /*width: 100%;*/
  /*top: 50px;*/
  bottom: 0;
  position: relative;
  clear: both;
  width: 100%;
  /*text-align: right;*/
  display: flex;
  flex-direction: row;
  justify-content: right;
  /*z-index: 44;*/ }

#page {
  /*display: none;*/
  /*border: 1px solid rgba(0,0,0,.2);*/
  /*padding: 25px 15px;*/
  /*margin-top: 50px;*/
  /*position: absolute;*/
  /*top: 50px;*/
  /*right: 15px;*/
  /*left: 0;*/
  /*right: 0;*/
  /*margin: 0 auto;*/
  /*width: 75vw;*/
  /*max-width: 800px;*/
  /*border: 1px solid white;*/
  width: 100vw;
  height: 100vh;
  height: auto;
  /*margin-top: 50px;*/
  padding: 0;
  height: -webkit-fill-available;
  bottom: 0;
  /*position: absolute;*/
  left: 0;
  right: 0;
  top: 0px;
  min-height: calc(100vh - 52px);
  margin-top: 0; }
  @media (max-width: 1024px) {
    #page {
      width: 100vw; } }

.content {
  /*background-color: rgba(255,255,255,.6);*/
  /*background-color: rgba(255,255,255,.6);*/
  padding: 25px 20px;
  margin: 30px 20px;
  max-width: 800px;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-bottom: 15px;
  padding-top: 5px; }
  @media (max-width: 1024px) {
    .content {
      margin-bottom: 0; } }
  .content h1 {
    font-family: cageroll;
    color: white;
    margin: 0;
    padding: 2px 10px;
    /*        margin-left: 0px;*/
    z-index: 44;
    background-image: url("../../img/noise.svg");
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 11%, black 26%), repeating-conic-gradient(#000 0% 25%, #eee 0% 50%) 50%/50px 50PX; }
    .content h1 a {
      text-decoration: none;
      color: yellow;
      font-family: y-1999-k;
      font-size: 15px;
      letter-spacing: 2px;
      font-weight: normal;
      font-style: italic; }
  .content.fullspace {
    max-width: unset;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100%; }
    .content.fullspace table {
      table-layout: fixed;
      width: 100%; }
    .content.fullspace .ritz.grid-container thead tr:first-child {
      /*display: none;*/ }
    .content.fullspace .ritz.grid-container tr th:nth-child(1), .content.fullspace .ritz.grid-container tr td:nth-child(1),
    .content.fullspace .ritz.grid-container tr th:nth-child(5), .content.fullspace .ritz.grid-container tr td:nth-child(5),
    .content.fullspace .ritz.grid-container tr th:nth-child(15), .content.fullspace .ritz.grid-container tr td:nth-child(15) {
      /*width: 0px !important;*/
      display: none; }
    .content.fullspace .ritz.grid-container tr th:nth-child(8) {
      width: 100px !important; }
    .content.fullspace .ritz.grid-container tr th:nth-child(11) {
      width: 465px !important; }
    .content.fullspace .ritz.grid-container tr td > div {
      height: unset !important; }
    .content.fullspace .ritz.grid-container tr td img {
      image-rendering: crisp-edges;
      height: fit-content !important;
      object-fit: contain !important; }
  .content:not(.clear-bg) {
    margin-top: 30px; }
    .content:not(.clear-bg) p {
      /*padding: 7px;*/
      /*background-color: rgba(255,255,255,.2);*/ }
  .content p:has(img) {
    /*        padding-left: 0 !important;
            padding-right: 0 !important;*/ }
  .content:not(#home) p img {
    /*width: 100%;*/
    margin: 0 auto; }
  .content.clear-bg {
    background-color: transparent;
    backdrop-filter: none; }
  .content:not(.clear-bg) {
    /*        background-color: transparent;
            border: 3px dashed white;
            text-shadow:
            -2px -2px 0 #fff,
            2px -2px 0 #fff,
            -2px 2px 0 #fff,
            2px 2px 0 #fff;*/
    /*background: rgba(123, 134, 149, 0.0);*/
    /*border-radius: 16px;*/
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /*backdrop-filter: blur(122.1px);*/
    /*backdrop-filter: blur(122.1px);*/
    /*border: 2px solid rgba(255, 255, 255, 0.44);*/
    /*        -webkit-backdrop-filter: blur(5.1px);*/
    /*        border: 2px solid rgba(255, 255, 255, 0.44);
              border-top-width: 2px;
              border-top-style: solid;
              border-top-color: rgba(255, 255, 255, 0.44);*/
    border-top: 4px solid rgba(255, 255, 255, 0.6);
    color: #071515;
    background-size: 11% auto;
    color: #071515;
    background-image: url("../../img/noise.svg");
    background-size: 10% auto;
    background-attachment: fixed;
    padding: 0;
    border-top: 0;
    /*        -webkit-animation: neon1 7.5s ease-in-out infinite alternate;
            -moz-animation: neon1 7.5s ease-in-out infinite alternate;*/
    /*animation: neon1 7.5s ease-in-out infinite alternate;*/
    backdrop-filter: blur(122.1px);
    background-color: rgba(157, 200, 246, 0.2);
    background-attachment: scroll; }
    .content:not(.clear-bg) .md hr {
      border-bottom: 1px solid #aaa; }
  .content.wide-bg {
    max-width: 1200px; }

@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px  #fff, 0 0 30px  #fff, 0 0 40px  #228DFF, 0 0 70px  #228DFF, 0 0 80px  #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF; }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 45px #228DFF, 0 0 55px #228DFF; } }
@-webkit-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px  #fff, 0 0 30px  #fff, 0 0 40px  #228DFF, 0 0 70px  #228DFF, 0 0 80px  #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } }
div[id^="s_"] {
  background-color: grey;
  min-height: 30px;
  opacity: .3;
  display: none; }

a {
  /*color: black;*/
  color: #0a9748;
  font-weight: bold; }

center_pane #page > div:first-child {
  scroll-margin-top: 100px; }

footer {
  clear: both;
  width: 100%;
  height: 50px;
  /*position: absolute;*/
  bottom: 50px;
  /*margin-top: 50px;*/
  text-align: center; }

#home {
  background: transparent;
  border: transparent;
  box-shadow: none;
  /*border: 1px solid black;*/
  max-width: none;
  height: max-content;
  margin: 0;
  padding: 0;
  height: inherit;
  /* 360/7= 51 roughly so for 7 elements rotate the element every 51deg. 12em translate is half the container */ }
  #home .circle-menu {
    user-select: none;
    position: relative;
    width: 24em;
    height: 24em;
    border: dashed 2px #333;
    border-radius: 50%;
    margin: 16em auto 7em; }
    @media (max-width: 1024px) {
      #home .circle-menu {
        max-width: 90vw; } }
    @media (max-width: 375px) {
      #home .circle-menu {
        height: 90vw; } }
    #home .circle-menu .char {
      width: 100%;
      height: 100%;
      background-size: 256px 256px;
      background-attachment: local;
      background-position: center center;
      margin: 0 auto;
      vertical-align: bottom;
      position: absolute;
      top: 0;
      background-repeat: no-repeat;
      image-rendering: pixelated;
      image-rendering: -moz-crisp-edges;
      image-rendering: crisp-edges; }
      #home .circle-menu .char.lao.sleep {
        background-image: url("../../img/home/lao_sleep_sh.png"); }
    #home .circle-menu li {
      list-style: none;
      display: inline; }
    #home .circle-menu .cell {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20em;
      height: 8em;
      margin: -10em;
      text-decoration: none;
      color: white;
      box-sizing: border-box;
      opacity: 0.6;
      transition: all ease .2s;
      padding: 6px 10px;
      padding: 0;
      overflow: hidden; }
      @media (max-width: 1024px) {
        #home .circle-menu .cell {
          display: none; } }
      #home .circle-menu .cell:hover {
        opacity: 1.0; }
      #home .circle-menu .cell .badge {
        display: none; }
      #home .circle-menu .cell .bar {
        background-color: #333;
        width: 100%;
        text-align: right; }
        #home .circle-menu .cell .bar .x {
          padding: 2px;
          color: tomato;
          cursor: pointer;
          text-shadow: -2px -2px 0 #ffffff70, 2px -2px 0 #ffffff70, -2px 2px 0 #ffffff70, 2px 2px 0 #ffffff70; }
        #home .circle-menu .cell .bar .title {
          position: absolute;
          left: 5px;
          top: 1px;
          color: white;
          text-align: left;
          font-size: 11px; }
      #home .circle-menu .cell .mCSB_scrollTools {
        width: 15px;
        margin: 2px 0; }
        #home .circle-menu .cell .mCSB_scrollTools .mCSB_draggerRail {
          background-color: transparent; }
      #home .circle-menu .cell.spiritual {
        background: #009cde;
        transform: rotate(90deg) translate(25em) rotate(-90deg);
        /*background-image: url('../../img/home/lcd_bg.png');*/ }
        #home .circle-menu .cell.spiritual.closed {
          left: 21.3em; }
        #home .circle-menu .cell.spiritual #clock {
          height: unset;
          width: unset;
          background-image: none;
          text-shadow: 0 0 10px #06175b;
          position: relative;
          margin: 0 auto;
          text-align: center;
          left: 0;
          right: 0;
          top: 21px;
          color: #cae4ea;
          font-size: 43px;
          font-family: y-1999-k;
          font-family: protomo-outline;
          /*font-family: nuklear;*/ }
          #home .circle-menu .cell.spiritual #clock #time {
            right: 0;
            left: 0;
            margin: 0;
            /*top: -10px;*/ }
          #home .circle-menu .cell.spiritual #clock #time_colon {
            left: 0;
            right: 0;
            margin: 0 auto;
            top: -3px; }
          #home .circle-menu .cell.spiritual #clock #meridian {
            line-height: 12px;
            font-size: 15px;
            top: 9px;
            right: -57%;
            left: 0; }
      #home .circle-menu .cell.occupational {
        background: #3a913f;
        transform: rotate(150deg) translate(27em) rotate(-150deg);
        background-image: url("../../img/gallery/sanji-soccer.png");
        background-size: 1100px;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: -616px -172px; }
        #home .circle-menu .cell.occupational h2 {
          text-shadow: -2px -2px 0 #ffffff70, 2px -2px 0 #ffffff70, -2px 2px 0 #ffffff70, 2px 2px 0 #ffffff70; }
        #home .circle-menu .cell.occupational.closed {
          left: 31em;
          background-image: none; }
      #home .circle-menu .cell.emotional {
        background: #fecd06;
        transform: rotate(185deg) translate(23.5em) rotate(-185deg);
        overflow: hidden; }
        #home .circle-menu .cell.emotional.closed {
          transform: rotate(180deg) translate(23.5em) rotate(-180deg);
          left: 33.4em; }
        #home .circle-menu .cell.emotional h2 {
          position: absolute;
          text-shadow: -2px -2px 0 #ffffff70, 2px -2px 0 #ffffff70, -2px 2px 0 #ffffff70, 2px 2px 0 #ffffff70;
          z-index: 99; }
        #home .circle-menu .cell.emotional p {
          display: inline-block;
          margin: 0;
          padding: 0;
          /*                            width: 31px;
                                      margin-right: 7px;
                                      max-height: 40px;*/ }
        #home .circle-menu .cell.emotional #comic_peak {
          overflow-x: clip;
          /*margin-top: -40%;*/ }
          #home .circle-menu .cell.emotional #comic_peak img {
            /*opacity: .2;*/ }
        #home .circle-menu .cell.emotional img {
          max-width: 100%;
          margin-top: -50%; }
      #home .circle-menu .cell.environmental {
        background: #fa7f00;
        transform: rotate(270deg) translate(13em) rotate(-270deg);
        /*                        .about_bg {
                                     background-image: url("../../img/home/kiwi_bg.jpg");
                                     width: 100%;
                                     height: 100%;
                                }*/
        /*                        text-shadow:
                                -2px -2px 0 #00000070,
                                2px -2px 0 #00000070,
                                -2px 2px 0 #00000070,
                                2px 2px 0 #00000070, ;*/ }
        #home .circle-menu .cell.environmental .markdown {
          background-color: #fa7f00;
          /*background-image: url("../../img/home/kiwi_bg.jpg");*/
          /*                            background-blend-mode: lighten;
                                      width: 100%;
                                      height: 100%;*/
          /*                            background-size: 162px 154px;
                                      background-color: #3938258c;
                                      background-blend-mode: multiply;
                                      background-color: #3a5fcee5;*/
          /*                            background-size: 22px 22px;1px, #fa7f00);
                                      background-image: repeating-linear-gradient(to right, #db6e00, #db6e00 1.1px, #fa7f00 1.1px, #fa7f00);*/ }
        #home .circle-menu .cell.environmental.closed {
          top: 18em;
          left: 21em; }
        #home .circle-menu .cell.environmental h2 {
          font-size: 16px;
          font-family: serif;
          font-weight: bold; }
        #home .circle-menu .cell.environmental p {
          /*font-size: 13px;*/ }
        #home .circle-menu .cell.environmental .markdown {
          height: 101%; }
          #home .circle-menu .cell.environmental .markdown .md {
            height: 96px; }
      #home .circle-menu .cell.intellectual {
        background: #ed2124;
        transform: rotate(355deg) translate(24.5em) rotate(-355deg); }
        #home .circle-menu .cell.intellectual.closed {
          transform: rotate(360deg) translate(24.5em) rotate(-360deg);
          left: 9.2em; }
        #home .circle-menu .cell.intellectual:hover #fact {
          color: white !important; }
        #home .circle-menu .cell.intellectual #dyk {
          color: #222;
          font-weight: normal;
          letter-spacing: 1px;
          font-family: synkopy;
          font-size: 17px;
          position: absolute;
          top: 20px;
          color: #ff7474;
          color: #6a3737; }
        #home .circle-menu .cell.intellectual #fact_refresh {
          color: white;
          font-size: 14px;
          margin-left: 5px;
          cursor: pointer; }
        #home .circle-menu .cell.intellectual #fact {
          text-align: center;
          font-size: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 94px;
          padding-top: 10px;
          color: transparent;
          transition: all ease .3s; }
      #home .circle-menu .cell.social {
        background: #932683;
        transform: rotate(390deg) translate(28em) rotate(-390deg);
        padding-bottom: 5px; }
        #home .circle-menu .cell.social h2 {
          font-size: 16px;
          font-family: serif;
          font-weight: bold; }
        #home .circle-menu .cell.social.closed {
          left: 11.5em; }
        #home .circle-menu .cell.social .markdown {
          height: 101%; }
          #home .circle-menu .cell.social .markdown .md {
            height: 96px; }
      #home .circle-menu .cell.closed {
        width: 25px;
        height: 25px;
        color: transparent;
        border-radius: 4em;
        cursor: pointer;
        overflow: hidden; }
        #home .circle-menu .cell.closed .badge {
          font-family: web-symbols;
          color: white;
          display: block;
          width: 100%;
          height: 100%;
          text-align: center;
          padding: 3px 0px;
          color: rgba(255, 255, 255, 0.1);
          transition: all ease .3s; }
        #home .circle-menu .cell.closed:hover .badge {
          color: white; }
        #home .circle-menu .cell.closed .bar {
          opacity: 0;
          height: 100px;
          position: relative; }
          #home .circle-menu .cell.closed .bar .x {
            font-size: 44px;
            line-height: 16px; }
        #home .circle-menu .cell.closed .bar, #home .circle-menu .cell.closed .title, #home .circle-menu .cell.closed .x {
          /*margin-right: 500000px;*/
          opacity: 0; }
      #home .circle-menu .cell h1 {
        display: none; }
      #home .circle-menu .cell p {
        font-size: 11px;
        padding: 1px 5px 1px 5px;
        margin: 0; }
      #home .circle-menu .cell h2, #home .circle-menu .cell h3 {
        font-family: cageroll;
        margin: 0;
        padding: 0;
        padding: 5px 5px 3px 5px; }

#comics {
  /*    .content {
          max-width: none;
      }*/ }
  #comics a {
    color: black; }
  #comics table h1, #comics table h2, #comics table h3, #comics table h4, #comics table h5, #comics table h6 {
    margin-top: 5px;
    padding: 0px; }
  #comics table p {
    padding: 0px; }
  #comics .md img {
    text-align: left;
    margin: unset;
    width: revert-layer;
    border: 2px solid #000; }
  #comics .md table tr:nth-child(2n) {
    background: transparent; }
  #comics .md table tr {
    display: inline-block;
    width: 33.33%; }
    @media (max-width: 1024px) {
      #comics .md table tr {
        width: unset; } }
  #comics .md table td {
    vertical-align: top; }
    #comics .md table td img {
      max-width: unset; }

#clock {
  width: 350px;
  height: 400px;
  /*background-color: grey;*/
  /*background-image: url('../../img/yuna-cd2.png');*/
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
  /*border: 1px solid #4477aa;*/
  color: white;
  text-align: center;
  font-size: 24px;
  font-family: courier;
  color: #0070ff;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
  font-weight: bold;
  text-shadow: 0 0 10px #006e99;
  font-family: courier new;
  position: fixed;
  bottom: -20px;
  right: 0px;
  /*bottom: 15px;*/
  /*position: relative;*/ }
  @media (max-width: 1024px) {
    #clock {
      display: none; } }
  #clock #time {
    position: absolute;
    top: 72.8%;
    left: 43.4%; }
  #clock #time_colon {
    position: absolute;
    top: 72.7%;
    left: 52%; }
  #clock #meridian {
    position: absolute;
    top: 73.1%;
    right: 33.4%;
    line-height: 11px;
    font-size: 15px; }

/*.grid-sizer,
.grid-item { width: 20%; }
 2 columns wide 
.grid-item--width2 { width: 40%; */
/*html {
    toggle-root: switch;
}

html:toggle(switch) .pic {
    .comments {
        display: block;
    }
}*/
#gallery {
  /*border: 1px solid dodgerblue;*/
  display: flex;
  flex-wrap: wrap;
  width: -moz-available;
  position: absolute;
  left: 0;
  top: 24px;
  z-index: -1;
  justify-content: center;
  /*background-image: url("../../img/noise.svg");*/
  /*background-color: #eee;*/
  min-height: calc(100vh - 74px);
  padding-top: 50px;
  z-index: 0;
  transition: all .4s ease; }
  #gallery .pic {
    /*background-color: grey;*/
    text-align: center;
    position: relative;
    text-align: center;
    cursor: pointer;
    height: fit-content;
    width: 80px;
    overflow: hidden;
    height: 50vh;
    transition: all .4s ease;
    display: flex;
    overflow: hidden;
    justify-content: center;
    /*toggle-trigger: switch;*/ }
    #gallery .pic:hover {
      width: 130px; }
      #gallery .pic:hover .comments {
        width: 130px; }
    #gallery .pic img {
      /*border: 1px solid dodgerblue;*/
      max-width: 300px;
      /*height: auto;*/
      /*margin: 30px;*/
      height: 100%;
      object-fit: cover;
      position: absolute;
      left: 0%;
      width: 100%; }
    #gallery .pic .comments {
      display: none;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.1);
      padding: 10px;
      /*border: 1px solid white;*/
      top: 50%;
      width: 110px;
      font-family: sans-serif;
      max-height: 50%;
      background-color: rgba(130, 150, 160, 0.6);
      font-family: sans-serif;
      color: white;
      border-top: 1px solid gray;
      border-bottom: 1px solid gray; }
      #gallery .pic .comments.show {
        display: block; }
    #gallery .pic:hover img {
      /*opacity: 80%;*/ }
    #gallery .pic:hover .comments {
      display: block; }
      #gallery .pic:hover .comments:empty {
        display: none; }

#gallery_modal_shadowbox {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 0;
  z-index: 5;
  margin: 0 auto; }
  #gallery_modal_shadowbox .empty_area {
    width: 100%;
    height: 100%;
    /*background-color: blue;*/
    z-index: -6;
    position: absolute; }
  #gallery_modal_shadowbox #gallery_modal {
    /*background-color: gray;*/
    height: inherit;
    width: min-content;
    margin: 0 auto;
    margin-top: 5vh;
    margin-bottom: 5vh;
    height: 90vh; }
    #gallery_modal_shadowbox #gallery_modal .close {
      grid-column: 3 / 4;
      width: 100%;
      /*background-color: blue;*/
      color: white;
      font-weight: bold;
      /*height: 50px;*/
      text-align: right; }
      @media (max-width: 1024px) {
        #gallery_modal_shadowbox #gallery_modal .close {
          text-align: right;
          position: absolute;
          right: 2vw;
          z-index: 99; } }
      #gallery_modal_shadowbox #gallery_modal .close a {
        padding: 0px 30px; }
    #gallery_modal_shadowbox #gallery_modal a {
      font-family: "web-symbols";
      padding: 30px;
      color: orangered;
      /*text-decoration: underline;*/
      /*border: 1px solid white;*/
      cursor: pointer;
      font-weight: bold;
      font-size: 32px;
      user-select: none;
      transition: all .15s; }
      #gallery_modal_shadowbox #gallery_modal a:hover {
        color: orange; }
      @media (max-width: 1024px) {
        #gallery_modal_shadowbox #gallery_modal a {
          padding: 0; } }
    #gallery_modal_shadowbox #gallery_modal .img_container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr;
      gap: 0px 0px;
      width: fit-content;
      max-width: 90vw;
      margin: 0 auto; }
      @media (max-width: 1024px) {
        #gallery_modal_shadowbox #gallery_modal .img_container {
          margin-top: 10px;
          display: block;
          height: 100vh;
          width: 100vw;
          max-width: 100vw; } }
      #gallery_modal_shadowbox #gallery_modal .img_container .left, #gallery_modal_shadowbox #gallery_modal .img_container .right {
        grid-row: 2;
        /*height: 90vh;*/
        /*background-color: brown;*/
        text-align: left;
        line-height: calc(90vh - 60px);
        z-index: 99; }
      #gallery_modal_shadowbox #gallery_modal .img_container .left {
        text-align: right; }
        @media (max-width: 1024px) {
          #gallery_modal_shadowbox #gallery_modal .img_container .left {
            text-align: left;
            position: absolute;
            left: 2vw; } }
      @media (max-width: 1024px) {
        #gallery_modal_shadowbox #gallery_modal .img_container .right {
          text-align: right;
          position: absolute;
          right: 2vw;
          z-index: 99; } }
      #gallery_modal_shadowbox #gallery_modal .img_container img {
        grid-row: 2;
        /*background-color: black;*/
        max-height: calc(90vh - 38px);
        border: 1px solid rgba(0, 0, 0, 0.5); }
        @media (max-width: 1024px) {
          #gallery_modal_shadowbox #gallery_modal .img_container img {
            max-width: 100vw;
            /*                    position: absolute;
                                left: 2vw;
                                right: 2vw;
                                padding: 5px;
                                margin-top: 20px;*/
            /*                    left: 0;
                                right: 0;*/
            max-height: calc(100vh - 150px);
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto; } }

.bg {
  left: 0;
  top: 0;
  z-index: -3;
  justify-content: center;
  /*background-image: url("../../img/noise.svg");*/
  /*    background-image: url("../../img/surf.jpg");*/
  /*background-color: #eee;*/
  background-repeat: repeat;
  display: block;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  bottom: 0;
  height: -moz-available;
  bottom: -50px;
  position: fixed;
  /*opacity: .12;*/
  /*opacity: .3;*/
  opacity: 1;
  /*background-image: url("https://cdn.pixabay.com/photo/2023/03/15/18/14/sea-7855153_960_720.jpg");*/
  /*background-image: url("../../img/under-water-bubbles.jpg");*/
  /*background-image: url("../../img/metal-waves.jpg"); // the water bg*/
  /*background-position: center;*/
  /*background-position: bottom;*/
  background-color: #657884; }
  @media (max-width: 767px) {
    .bg {
      background-image: url("../../img/webgl_wave_bg.jpg");
      background-position: center center; } }
  .bg .webgl {
    position: fixed;
    top: 0;
    left: 0;
    outline: none; }
    @media (max-width: 767px) {
      .bg .webgl {
        /*display: none;*/ } }

/*.left-bg-image {
    position: fixed;
    height: 100%;
    width: 100%;
    background-image: url("../../img/yuna-web-32-no-matte.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -2;
    display: none;
}*/
.gauze {
  background-image: url("../../img/noise.svg");
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1; }

/* waves testing */
.webgl {
  position: fixed;
  top: 0;
  left: 0;
  outline: none; }

.dg.ac {
  z-index: 999;
  display: none; }

/*tooltip Box*/
.con-tooltip {
  position: relative;
  background: #F2D1C9;
  border-radius: 9px;
  /*padding: 0 20px;*/
  padding: 0 5px;
  /*margin: 10px;*/
  display: inline-block;
  transition: all 0.3s ease-in-out;
  cursor: default; }
  .con-tooltip > p {
    margin: 0; }

/*tooltip */
.tooltip {
  visibility: hidden;
  z-index: 999999;
  opacity: .40;
  /*width: 100%;*/
  width: max-content;
  /*padding: 0px 20px;*/
  padding: 20px;
  background: #333;
  color: #E086D3;
  position: absolute;
  top: -140%;
  left: -25%;
  border-radius: 9px;
  font: 16px;
  transform: translateY(9px);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
  text-align: center;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif; }
  .tooltip h2 {
    margin: 0;
    margin-bottom: 15px;
    padding: 0;
    color: white; }

/* tooltip  after*/
.tooltip::after {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12.5px 0 12.5px;
  border-color: #333 transparent transparent transparent;
  position: absolute;
  left: 40%; }

.con-tooltip:hover .tooltip {
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
  transition: .3s linear;
  animation: odsoky 1s ease-in-out infinite  alternate; }

@keyframes odsoky {
  0% {
    transform: translateY(6px); }
  100% {
    transform: translateY(1px); } }
/*hover ToolTip*/
/*.left:hover {transform: translateX(-6px); }
.top:hover {transform: translateY(-6px);  }
.bottom:hover {transform: translateY(6px);}
.right:hover {transform: translateX(6px); }*/
/*left*/
.left .tooltip {
  top: -20%;
  left: -170%; }

.left .tooltip::after {
  top: 40%;
  left: 90%;
  transform: rotate(-90deg); }

/*bottom*/
.bottom .tooltip {
  top: 115%;
  left: -20%; }

.bottom .tooltip::after {
  top: -17%;
  left: 40%;
  transform: rotate(180deg); }

/*right*/
.right .tooltip {
  /*    top: -20px;
      left:115%; */
  left: 175%;
  top: -227%; }

.right .tooltip::after {
  left: -17px;
  top: 26px;
  transform: rotate(90deg); }

#guestbook {
  text-align: center; }
  #guestbook .guestbook {
    width: 470px;
    border: none;
    height: 800px; }

.breathing {
  animation: breathing 5s ease-out infinite normal;
  /*-webkit-font-smoothing: antialiased;*/ }

.breathing2 {
  animation: breathing2 2s ease-out infinite normal;
  /*-webkit-font-smoothing: antialiased;*/ }

@keyframes breathing {
  0% {
    -webkit-transform: scale(0.98);
    -ms-transform: scale(0.98);
    transform: scale(0.98); }
  25% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  60% {
    -webkit-transform: scale(0.98);
    -ms-transform: scale(0.98);
    transform: scale(0.98); }
  100% {
    -webkit-transform: scale(0.98);
    -ms-transform: scale(0.98);
    transform: scale(0.98); } }
@keyframes breathing2 {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9); }
  50% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9); } }