:root {
     --dk-color:#1B0087;
     --mid-color:#9F88FC;
     --lt-color:#F3F2FFb9;
     --transparent:#F3F2FF00;
     --dkest-color:#000E30;
     --accent:#846AEB;
     --border-color:var(--mid-color);
     --drop-shadow:#4220CCb9;
     --navbutton1:#FFEBFF;
     --navbutton2:#6741FF;
     --navbutton-hover1:#BEB9F5;
     --navbutton-hover2:var(--drop-shadow);
     --gradient1:var(--navbutton1);
     --gradient2:#C88FFF;
     --gradient3:#DBA8FF;
     
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 6, 2026 */



@font-face {
    font-family: 'blissful_thinkingregular';
    src: url('blissful_thinking-webfont.woff2') format('woff2'),
         url('blissful_thinking-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cavilantregular';
    src: url('cavilant-webfont.woff2') format('woff2'),
         url('cavilant-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'exoskeletonregular';
    src: url('exoskeleton-webfont.woff2') format('woff2'),
         url('exoskeleton-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'fizzy_sodaregular';
    src: url('fizzy-soda-webfont.woff2') format('woff2'),
         url('fizzy-soda-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

 body {
     margin:0;
     padding:0;
     height:100%;
     font-family:"blissful_thinkingregular";
     font-size:18px;
     background-color:var(--lt-color);
     background-image:url('/tile.jpg');
     background-repeat: repeat;
     background-attachment: fixed;
     background-position: center;
     color:var(--dkest-color);
}
 body a {
     color:var(--accent);
     font-weight:bold;
}

 ul.list li {
     padding-bottom:5px;
}
 #container {
     max-width:900px;
     margin:0 auto;
     height:auto;
     margin-top:15px;
}
 h1 {
     color:var(--dk-color);
    font-family: 'fizzy_sodaregular';
    padding-left:5px;
    padding-right:5px;
}
 h2, h4, h6 {
     color:var(--accent);
    font-family: 'fizzy_sodaregular';
    padding-left:5px;
    padding-right:5px;
}
 h3, h5 {
     color:var(--dk-color);
    font-family: 'cavilantregular';
    padding-left:5px;
    padding-right:5px;
}
 #header {
     max-width:1280px;
     height:auto;
     margin:0 auto;
     /*border:1px solid var(--dkest-color);
     background-image:url('/tile.png');*/
}
.logo {
  display: block;
  margin: auto;
  width: 70%;
  height: auto;
  padding-top: 5px;
}

.marquee-capsule {
  width: 200px;
  height: auto;
}
.side-capsule {
  display: block;
  margin: auto;
  width: 100%;
  height: auto;
}

.side-group {
  display: block;
}
.side-buttons {
  width: 100%;
}

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

div.gallery-item {
  width: 170px;
  margin-right: 5px;
  margin-bottom: 5px;
  border: 1px solid var(--transparent);
}

div.gallery-item:hover {
  border: 1px solid var(--border-color);
}

div.gallery-item img {
  width: 100%;
  height: auto;
}

        /* Navigation */
        #nav {
            gap: 8px;
            display: flex;
            text-align: center;
            justify-content: space-evenly;
            font-size: 22px;
            font-family: 'fizzy_sodaregular';
            font-weight: bold;
            letter-spacing: 0.2px;
            text-shadow: -1px -1px 0 var(--border-color), 1px -1px 0 var(--border-color), -1px 1px 0 var(--border-color), 1px 1px 0 var(--border-color),
                -1.5px -1.5px 0 var(--border-color), 1.5px -1.5px 0 var(--border-color), -1.5px 1.5px 0 var(--border-color), 1.5px 1.5px 0 var(--border-color);
            padding: 5px;
            margin-bottom: 0px;
            margin-top: 20px;
            z-index:1;
            filter: drop-shadow(5px 5px 4px var(--drop-shadow));
        }
        
        #nav a {
            text-decoration: none;
            flex: 1;
        }
        
        .navbutton {
            align-content: center;
            border-radius: 4px;
             border:2px outset var(--border-color);
             outline:1px outset var(--dk-color);
            width: 100%;
            min-height: 30px;
            color: white;
            background: linear-gradient(0deg, var(--navbutton1) 1%, var(--navbutton2) 49%, var(--border-color) 51%, var(--navbutton1) 90%);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px 0;
        }
        
        .navbutton:hover {
             border:2px outset var(--dk-color);
            text-shadow: -1px -1px 0 var(--dk-color), 1px -1px 0 var(--dk-color), -1px 1px 0 var(--dk-color), 1px 1px 0 var(--dk-color),
                -1.5px -1.5px 0 var(--dk-color), 1.5px -1.5px 0 var(--dk-color), -1.5px 1.5px 0 var(--dk-color), 1.5px 1.5px 0 var(--dk-color);
            background: linear-gradient(0deg, var(--navbutton-hover1) 1%, var(--dk-color) 49%, var(--navbutton-hover2) 51%, var(--navbutton-hover1) 90%);
        }

        .navbutton-mini {
            font-size: 16px;
            border-radius: 4px;
             outline:1px outset var(--dk-color);
            width: 45%;
            height:auto;
            color: white;
            padding: 4px 0;
             display:inline-block;
            text-decoration: none;
            flex: 1;
             border:2px outset var(--dk-color);
            text-shadow: -1px -1px 0 var(--dk-color), 1px -1px 0 var(--dk-color), -1px 1px 0 var(--dk-color), 1px 1px 0 var(--dk-color),
                -1.5px -1.5px 0 var(--dk-color), 1.5px -1.5px 0 var(--dk-color), -1.5px 1.5px 0 var(--dk-color), 1.5px 1.5px 0 var(--dk-color);
            background: linear-gradient(0deg, var(--navbutton-hover1) 1%, var(--dk-color) 49%, var(--navbutton-hover2) 51%, var(--navbutton-hover1) 90%);
        }
        
        .navbutton-mini:hover {
             border:2px outset var(--border-color);
            background: linear-gradient(0deg, var(--navbutton1) 1%, var(--navbutton2) 49%, var(--border-color) 51%, var(--navbutton1) 90%);
            text-shadow: -1px -1px 0 var(--navbutton2), 1px -1px 0 var(--navbutton2), -1px 1px 0 var(--navbutton2), 1px 1px 0 var(--navbutton2),
                -1.5px -1.5px 0 var(--navbutton2), 1.5px -1.5px 0 var(--navbutton2), -1.5px 1.5px 0 var(--navbutton2), 1.5px 1.5px 0 var(--navbutton2);
        }

 .title {
     font-size:35px;
     text-align:center;
     font-style:italic;
     color:var(--dkest-color);
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background: linear-gradient(0deg, var(--gradient1) 1%, var(--gradient2) 49%, var(--gradient3) 51%, var(--gradient1) 90%);
     /*background: linear-gradient(0deg, #c3e9f8 1%, #0771FF 49%, #5ad6fa 51%, #d9f2fc 90%);*/
     color:#fff;
     font-size:20px;
     border-top:2px outset var(--mid-color);
     border-bottom:2px solid var(--border-color);
     text-shadow: -1px -1px 0 var(--gradient3),
                1px -1px 0 var(--gradient3),
                -1px 1px 0 var(--gradient3),
                1px 1px 0 var(--gradient3);
     font-family: 'cavilantregular';
}
 .section-subtitle {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background: linear-gradient(0deg, var(--gradient1) 1%, var(--gradient2) 49%, var(--gradient3) 51%, var(--gradient1) 90%);
     /*background: linear-gradient(0deg, #c3e9f8 1%, #0771FF 49%, #5ad6fa 51%, #d9f2fc 90%);*/
     color:#fff;
     font-size:20px;
     width:50%;
     margin-left: auto; 
      margin-right: 0;
     border-top:2px outset var(--mid-color);
     border-left:2px solid var(--border-color);
     border-bottom:2px solid var(--border-color);
     text-shadow: -1px -1px 0 var(--gradient3),
                1px -1px 0 var(--gradient3),
                -1px 1px 0 var(--gradient3),
                1px 1px 0 var(--gradient3);
     border-radius: 20px 0px 0px 20px;
     font-family: 'cavilantregular';
}
 .section-pill {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background: linear-gradient(0deg, var(--gradient1) 1%, var(--gradient2) 49%, var(--gradient3) 51%, var(--gradient1) 90%);
     /*background: linear-gradient(0deg, #c3e9f8 1%, #0771FF 49%, #5ad6fa 51%, #d9f2fc 90%);*/
     color:#fff;
     font-size:20px;
     width:70%;
     margin-left: auto; 
      margin-right: 0;
     border-top:2px outset var(--mid-color);
     border-left:2px solid var(--border-color);
     border-right:2px solid var(--border-color);
     border-bottom:2px solid var(--border-color);
     text-shadow: -1px -1px 0 var(--gradient3),
                1px -1px 0 var(--gradient3),
                -1px 1px 0 var(--gradient3),
                1px 1px 0 var(--gradient3);
     border-radius: 20px 20px 20px 20px;
     font-family: 'cavilantregular';
}
 .section-subtitle-l {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background: linear-gradient(0deg, var(--gradient1) 1%, var(--gradient2) 49%, var(--gradient3) 51%, var(--gradient1) 90%);
     /*background: linear-gradient(0deg, #c3e9f8 1%, #0771FF 49%, #5ad6fa 51%, #d9f2fc 90%);*/
     color:#fff;
     font-size:20px;
     width:50%;
     border-top:2px outset var(--mid-color);
     border-left:2px solid var(--border-color);
     border-bottom:2px solid var(--border-color);
     text-shadow: -1px -1px 0 var(--gradient3),
                1px -1px 0 var(--gradient3),
                -1px 1px 0 var(--gradient3),
                1px 1px 0 var(--gradient3);
     border-radius: 0px 20px 20px 0px;
     font-family: 'cavilantregular';
}
 .section-title-l {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background: linear-gradient(0deg, var(--gradient1) 1%, var(--gradient2) 49%, var(--gradient3) 51%, var(--gradient1) 90%);
     /*background: linear-gradient(0deg, #c3e9f8 1%, #0771FF 49%, #5ad6fa 51%, #d9f2fc 90%);*/
     color:#fff;
     font-size:20px;
     border-bottom:2px solid var(--border-color);
     text-shadow: -1px -1px 0 var(--gradient3),
                1px -1px 0 var(--gradient3),
                -1px 1px 0 var(--gradient3),
                1px 1px 0 var(--gradient3);
     border-radius: 20px 0px 0px 0px;
     font-family: 'cavilantregular';
}
 .section-title-r {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background: linear-gradient(0deg, var(--gradient1) 1%, var(--gradient2) 49%, var(--gradient3) 51%, var(--gradient1) 90%);
     /*background: linear-gradient(0deg, #c3e9f8 1%, #0771FF 49%, #5ad6fa 51%, #d9f2fc 90%);*/
     color:#fff;
     font-size:20px;
     border-bottom:2px solid var(--border-color);
     text-shadow: -1px -1px 0 var(--gradient3),
                1px -1px 0 var(--gradient3),
                -1px 1px 0 var(--gradient3),
                1px 1px 0 var(--gradient3);
     border-radius: 0px 20px 0px 0px;
     font-family: 'cavilantregular';
}
 .wrapper {
     display:flex;
     flex-wrap:nowrap;
     height:auto;
     width:100%;
     filter: drop-shadow(5px 5px 4px var(--drop-shadow));
}
 #left-sidebar {
     width:280px;
     border:2px outset var(--border-color);
     outline:1px outset var(--dk-color);
     height:100%;
     font-size:16px;
     /*border-right:none;*/
     margin-top: 8px;
     margin-right: 4px;
     margin-left: 4px;
     /*background-color:var(--lt-color);*/
     background: linear-gradient(-25deg, var(--lt-color) 1%, #fff 20%, var(--lt-color) 51%, #fff 98%);
     backdrop-filter: blur(10px);
     border-radius: 20px 0px 0px 20px;
}

#left-sidebar:before {
  position: absolute;
  content: '';
  background-image:url("/kigyo.png");
  width: 782px;
  height: 888px;
  pointer-events: none;
  top:-130px;
  left:-380px;
}
 .content {
     padding-top:15px;
     padding-left:15px;
     padding-right:15px;
     padding-bottom:15px;
}
 .part-content {
   width:55%;
   display:inline-block;
   height:auto;
     padding-top:15px;
     padding-left:15px;
     padding-right:15px;
     padding-bottom:15px;
}
 .half-content {
   width:45%;
   display:inline-block;
   height:auto;
     padding-top:15px;
     padding-left:15px;
     padding-right:15px;
     padding-bottom:15px;
}
 .nav-content {
            justify-content: space-evenly;
            text-align: center;
            vertical-align:65px;
   width:45%;
   display:inline-block;
   height:auto;
     padding-top:15px;
     padding-left:15px;
     padding-right:15px;
     padding-bottom:15px;
}
 .main-content {
     border:2px outset var(--border-color);
     outline:1px outset var(--dk-color);
     height:auto;
     background-color:var(--lt-color);
     backdrop-filter: blur(10px);
     width:744px;
     /*border-right:none;*/
     margin-top: 8px;
     margin-right: 4px;
     margin-left: 4px;
}
 p {
     padding-top:2px;
     padding-bottom:2px;
}
 p a {
     font-weight:bold;
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
    z-index: 5;
     color: #000;
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:15px;
     margin-bottom:5px;
     padding:5px;
     font-size:16px;
}
 textarea {
     background-color:var(--dkest-color);
     color:var(--lt-color);
     font-size:10px;
}
 .code-wrapper {
     display:flex;
}

 #right-sidebar {
     width:220px;
     border:2px outset var(--border-color);
     outline:1px outset var(--dk-color);
     background-color:var(--lt-color);
     height:100%;
     backdrop-filter: blur(10px);
     font-size:16px;
     margin-top: 8px;
     margin-right: 4px;
     margin-left: 4px;
     border-radius: 0px 20px 20px 0px;
     background: linear-gradient(-25deg, var(--lt-color) 1%, #fff 20%, var(--lt-color) 51%, #fff 98%);
}
 #container {
     max-width:1280px;
}

.scrollbox {
      overflow: scroll;
      overflow-x: hidden;
     border: 1px dashed var(--border-color);
     border-right: none;
     border-left: none;
  height:180px;
  scrollbar-gutter: stable;
      padding: 10px;
      padding-left: 10px;
}
.scrollbox p {
     font-size:12px;
}


 ::-webkit-scrollbar {
  width: 17px
}

::-webkit-scrollbar-corner {
  background: #dfdfdf
}

::-webkit-scrollbar-thumb {
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: var(--border-color);
  background-size: 7px;
  border: 1px solid #fff;
  border-radius: 2px;
  box-shadow: inset -3px 0 var(--accent), inset 1px 1px var(--lt-color)
}


 
/* CHANGE BELOW TO max-width:1000px for TWO SIDEBARS. It is max-width:914px for ONE SIDEBAR */
 @media only screen and (max-width: 1280px) {
   
     .wrapper {
         display:flex;
         flex-wrap:wrap;
         height:auto;
         width:100%;
    }
     #left-sidebar {
         order:2;
         width:55%;
         border-right:1px solid var(--border-color);
         margin-right: 0px;
    }
     #left-sidebar:before {
       top:360px;
       left:-20px;
      max-width: 99vw;
     }
     .main-content {
         order:1;
         width:100%;
         border-right:1px solid var(--border-color);
    }
      #nav {
          flex-wrap: wrap;
          gap: 3px;
      }
      
      .navbutton {
          font-size: 20px;
      }
    /* UNCOMMENT THE BELOW CODE FOR TWO SIDEBARS */
     #right-sidebar {
         width: calc(45% - 20px);
         order:2;
    }
    
     
}

 @media only screen and (max-width: 680px) {
     #left-sidebar {
         order:2;
         width:100%;
         border-right:1px solid var(--border-color);
         margin-right: 4px;
        border-radius: 20px 20px 20px 20px;
    }
     .main-content {
         order:1;
         width:100%;
         border-right:1px solid var(--border-color);
        border-radius: 20px 20px 20px 20px;
    }
      #nav {
          flex-wrap: wrap;
          gap: 3px;
      }
      
      .navbutton {
          font-size: 14px;
      }
    /* UNCOMMENT THE BELOW CODE FOR TWO SIDEBARS */
     #right-sidebar {
         width:100%;
         order:3;
         margin-left: 4px;
        border-radius: 20px 20px 20px 20px;
    }
     #container {
         max-width:680px;
    }
    .side-group {
      display: flex;
    }
    .side-buttons {
      width: 50%;
    }
    
   .section-title-l {
       border-radius: 20px 20px 20px 20px;
  }
   .section-title-r {
       border-radius: 20px 20px 20px 20px;
  }
  
  #left-sidebar:before {
    background-image:none;
    width: 0;
    height: 0;
    top:0px;
    left:0;
  }
   .part-content {
     width:92%;
  }
   .half-content {
     width:92%;
  }
   .nav-content {
     width:92%;
  }
       
}