@font-face{
        font-family: chickenpie;
        src: url(/font/chickenpie.ttf);
  }
@font-face{
        font-family: littlecupcakes;
        src: url(/font/littlecupcakes.ttf);
  }
  body {
    background-image: linear-gradient(var(--topbg),  var(--bottombg));
    background-size: 100% 960px;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-color: var(--bottombg);
    font-family: chickenpie;
    color: white;
    margin: 0px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-transform: uppercase;
  }
  ::selection {
    background-color: #e93250;
    text-shadow: none;
  }
  :root {
    --topbg: #bdfcfe;
    --bottombg: #f59aa4;
    --active-color: #c35b00;
    --inactive-color: #612d00;
    --half-transparency: #00000080;
  }
  a {
    color: white;
    text-decoration: none;
  }
  .body {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  h1 {
    text-align: center;
    margin: 10px 0px;
  }
  h2 {
    font-size: 24px;
  }
  h, h3 {
    font-size: 20px;
    font-weight: normal;
    margin: 10px 0px;
  }
  p {
    text-align: center;
  }
  .header {
    height: 240px;
    margin: 10px 0px;
    background-image: url(/Banner.png);
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: auto 100%;
  }
  .guide {
    display: flex;
  }
  .guide a {
    margin: auto;
    margin-top: 0px;
    width: 100%;
  }
  .guidebtn {
    margin: 0px;
    padding: 10px 5px;
    text-align: center;
    background-color: var(--inactive-color);
  }
  .guide a:first-child .guidebtn {
    border-radius: 5px 0 0 0;
  }
  .guide a:last-child .guidebtn {
    border-radius: 0 5px 0 0;
  }
  .guidebtn:hover {
    background-image: linear-gradient(var(--inactive-color),  var(--active-color));
  }
  .guidebtn:active {
    background-image: linear-gradient(var(--active-color), var(--active-color));
  }
  .selected, .selected:hover, .selected:active {
    background-color: var(--inactive-color);
    background-image: linear-gradient(var(--active-color), var(--active-color));
  }
  .warning {
    color: #0005;
    text-shadow: none;
  }
  .desc {
    font-size: 20px;
  }
  .socials {
    display: flex;
  }
  .socials img {
    width: 100%;
    transition: transform 0.2s;
  }
  .socials a {
    width: 100%;
    text-align: center;
    max-width: 192px;
    transition: transform 0.2s;
  }
  .content {
    padding: 20px;
    color: #fff;
    background-color: var(--active-color);
    display: block;
    border-radius: 0 0 5px 5px;
  }
  .content a {
    color: #fff;
  }
  .footer {
    padding: 10px 20px;
  }
  .dual, .intro {
    display: flex;
  }
  .l {
  margin-top: auto; 
  margin-bottom: auto;
  }
  .dual div:first-child, .intro div:first-child{
    padding-left: 0px;
    padding-right: 5px; 
    margin-left: 0px;
    margin-right: auto;
  }
  .dual div, .intro div {
    padding-left: 5px; 
    padding-right: 5px;
    margin-left: auto;
    margin-right: auto;
  }
  .dual div:last-child, .intro div:last-child {
    padding-left: 5px; 
    padding-right: 0px;
    margin-left: auto;
    margin-right: 0px;
  }
  .characters {
    display: flow-root;
  }
  .characters a {
    width: 33.3333%;
    float: left;
  }
  .character {
    font-size: 26px;
    text-align: center;
    transition: transform 0.2s;
    user-select: none;
  }
  .character:hover, .socials img:hover, .return:hover, .profile:not(.selected):hover, .artworks img:hover {
    transform: scale(1.1);
  }
  .character:active, .socials img:active, .return:active, .profile:not(.selected):active, .artworks img:active {
    transform: scale(0.9);
  }
  .character img {
    height: 200px;
    width: 100%;
    object-fit: contain;
  }
  .title {
    font-size: 52px;
    margin: 10px 0px;
  }
  .embed iframe {
      width: 640px;
      height: 360px;
  }
  .characterdisplay {
    width: 50%;
  }
  .characterdisplay img {
    height: 480px;
    width: 100%;
    object-fit: contain;
  }
  .info {
    width: 50%;
  }
  .info h2, .funfact h2 {
    font-size: 40px;
    margin: 20px 0px;
    display: block;
  }
  .info h, .funfact h {
    font-size: 30px;
    display: block;
  }
  .episode {
    margin-bottom: 20px;
  }
  .episode .aboutepisode {
    width: 50%;
  }
  .aboutepisode h:first-child {
    margin-top: 0px;
  }
  .episode h2 {
    font-size: 40px;
    margin: 20px 0px;
    display: block;
  }
  .episode .aboutepisode h {
    font-size: 30px;
    display: block;
  }
  .return {
    position: fixed;
    top: 10px;
    left: 15px;
    font-size: 30px;
    transition: transform 0.2s;
    user-select: none;
  }
  .profiles-arrow {
    position: fixed;
    display: flex;
    top: 60px;
    left: -100px;
    font-size: 30px;
    transition: 0.2s;
    padding-left: 15px;
  }
  .profiles-arrow:hover {
    left: 0px;
  }
  .profiles {
    display: grid;
    font-size: 30px;
  }
  .profile {
    width: 80px;
    border: solid var(--inactive-color) 2px;
    transition: transform 0.2s;
  }
  .profile.selected {
    border: solid var(--active-color) 2px;
  }
  .arrow {
    font-size: 70px;
    margin: auto 10px;
    transition: opacity 0.2s;
    user-select: none;
  }
  .profiles-arrow:hover .arrow {
    opacity: 0;
  }
  .collapsible {
    border-radius: 5px;
    cursor: pointer;
  }
  .collapsible:hover {
    background-color: var(--half-transparency);
  }
  .vidsec {
    display: flow-root;
  }
  .thumbnail {
    width: 95%;
    aspect-ratio: 16 / 9;
    display: block;
  margin-left: auto;
  margin-right: auto;
  }
  .vidsec a {
    width: 33.333%;
    min-width: 33.333%;
    float: left;
  }
  .video p {
    margin: 5px 0px;
  }
  .video {
    padding: 7.5px 0px;
    border-radius: 5px;
  }
  .video:hover {
    background-color: var(--half-transparency);
  }
  .vidtitle {
    font-size: 17.5px;
    overflow: hidden;
    display: -webkit-box;
   -webkit-line-clamp: 1;
           line-clamp: 1; 
   -webkit-box-orient: vertical;
  }
  .vidinfo {
    font-size: 17.5px;
  }
  .viddesc {
    font-size: 20px !important;
  }
  .screen, .radio {
    margin-bottom: -5px;
  }
  .artworks {
    text-align: center;
  }
  .artworks img {
    height: 180px;
    transition: transform 0.2s;
    cursor: pointer;
  }
  .audsec {
    display: flow-root;
  }
  .ausec a {
    width: 33.333%;
    min-width: 33.333%;
    float: left;
  }
  .thumbear {
    float: left;
  }
  .thumbear img {
    height: 128px;
    margin: 5px 10px;
  }
  .audio p {
    margin: 5px 0px;
    text-align: left;
  }
  .audio {
    padding: 5px 0px;
    border-radius: 5px;
    height: 140px;
    width: 50%;
    float: left;
  }
  .audio:hover {
    background-color: var(--half-transparency);
  }
  .audtitle {
    font-size: 24px;
  }
  .audinfo {
    font-size: 20px;
  }
  .auddesc {
    font-size: 20px !important;
  }
  .downloadables {
    display: flow-root;
  }
  .downloadables a {
    width: 33.3333%;
    float: left;
  }
  .downloadable {
    font-size: 24px;
    padding-top: 10px;
    text-align: center;
    transition: transform 0.2s;
    user-select: none;
    border-radius: 5px;
  }
  .downloadable:hover {
    background-color: var(--inactive-color);
  }
  .downloadable img {
    height: 200px;
    width: 100%;
    object-fit: contain;
  }
  .fourzerofour {
      width: 100% !important;
      max-width: 480px;
  }
  
  
  
  
body.modal-open {
    overflow: hidden;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.66);
    margin: 0px;
    backdrop-filter: blur(8px);
    overflow: hidden;
    overscroll-behavior: contain;
}


.modal-content {
    margin: auto;
    display: block;
    height: 100%;
    max-width: 75%;
    object-fit: contain;
    user-select: none;
}

.displayImg {
  height: 80%;
  margin: auto;
}

.modal {
  animation-name: frosted-glass;
  animation-duration: 0.75s;
}

@keyframes frosted-glass {
  from {backdrop-filter: blur(0px); background-color: rgba(0,0,0,0);}
  to {backdrop-filter: blur(8px); background-color: rgba(0,0,0,0.66);}
}

.modal-content {
  animation-name: zoom;
  animation-duration: 0.75s;
}

@keyframes zoom {
  from {transform:scale(0) rotate(-45deg)}
  to {transform:scale(1) rotate(0deg)}
}

.modal h3 {
  animation-name: appear;
  animation-duration: 0.75s;
}

@keyframes appear {
  from {opacity: 0;}
  to {opacity: 1;}
}

#caption {
  animation-name: up;
  animation-duration: 0.75s;
}

@keyframes up {
  from {padding-top: 16%; opacity: 0;}
  to {padding-top: 20px; opacity: 1;}
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #fff;
    padding: 20px 0;
    height: 150px;
    font-size: 35px;
    user-select: none;
}

.modal h3 {
  text-align: center;
  font-size: 150%;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  user-select: none;
  transition: transform 0.2s;
  cursor: pointer;
}

.modal h3:hover {
  transform: scale(1.1);
}

.modal h3:active {
  transform: scale(0.9);
}

.next,.prev{
 position:absolute;
 z-index:1;
 top: 40%;
 padding:10px;
 cursor:pointer;
 color: #fff;
 font-size: 60px;
 width: 20px;
}
.next{
  right: 7.5%;
  animation-name: right;
  animation-duration: 0.75s;
}
.prev{
  left: 7.5%;
  animation-name: left;
  animation-duration: 0.75s;
}

@keyframes left {
  from {left: 0%;}
  to {left: 7.5%;}
}

@keyframes right {
  from {right: 0%;}
  to {right: 7.5%;}
}
  .game:hover {
    transform: scale(1.1);
  }
  .game:active {
    transform: scale(0.9);
  }
  
  
  
  @media (max-height: 600px) {
    .profiles {
      width: 83px;
    }
    .profile {
      width: 75px;
    }
    .modal {
      padding-top: 80px;
    }
  }
  
  @media (max-width: 959px) {
    .guidebtn {
      border-radius: 0px !important;
    }
    .content {
      border-radius: 0px;
    }
    .funfact, .episode {
      margin: 0 20px 5px 5px;
    }
    .episode iframe {
      width: 480px !important;
      height: unset !important;
      aspect-ratio: 16/9 !important;
    }
    .vidsec a {
      width: 50%;
      min-width: 50%;
    }
  }
  
  @media (max-width: 759px) {
    .header {
      height: 160px;
    }
    h1 {
      font-size: 21px !important;
    }
    h2 {
      font-size: 16px !important;
     }
    h, h3 {
      font-size: 16px !important;
    }
    .guidebtn {
      border-radius: 0px !important;
    }
    .guide a:last-child {
      display: none;
    }
    .content {
      padding: 5px;
    }
    .warning {
      font-size: 14px !important;
    }
    .intro {
      display: unset;
    }
    
    .intro div:first-child {
      padding-left: 0px;
      padding-right: 0px; 
    }
    .intro div:first-child {
      padding-left: 0px; 
      padding-right: 0px;
    }
    .l img {
      max-width: 100%;
    }
    
    .socials {
      display: flow-root;
     }

    .socials a {
      width: 33.3333%;
      display: block;
      float: left;
    }
    .character {
      font-size: 20px;
    }
    .character img {
      height: 133.333px;
    }
    .vidsec a {
      width: 100%;
    }
    .video {
      height: 30%;
    }
    .artworks img {
      height: 96px;
    }
    .modal {
      padding-top: 0px;
    }
    .next, .prev {
      top: 36%;
    }
    .next h3, .prev h3 {
      font-size: 100px !important;
    }
    .displayImg {
      height: 100% !important;
    }
    .radio {
      aspect-ratio: unset !important;
      height: 160px !important;
    }
    .audio {
      height: 80px;
      width: 100%;
    }
    .thumbear img {
      height: 64px;
    }
    .characterdisplay img {
      height: 360px;
      width: 100%;
    }
    .info h2 {
      font-size: 20px !important;
    }
    .info h {
      font-size: 20px !important;
    }
    .profiles {
      display: none;
    }
    .funfact {
      margin: 5px;
    }
    .episode {
      margin: 0 0 0 0;
    }
    .episode h2 {
      margin: 20px 5px;
    }
    .episode .dual {
      display: unset;
    }
    .episode iframe {
      width: 100% !important;
      height: unset !important;
      aspect-ratio: 16/9 !important;
    }
    .embed {
      padding: 0px !important;
    }
    .episode .aboutepisode {
      width: unset;
      padding: 0px !important;
      margin: 5px !important;
    }
  }
  
  @media (min-width: 1496px) and (min-height: 768px) {
    .body {
      max-width: 1280px;
    }
    .characters {
      display: flex;
    }
    .vidsec a {
      width: 25%;
      min-width: 25%;
    }
    .radio {
      height: 160px;
      width: 100%;
      aspect-ratio: unset;
    }
    .audio {
      width: 33.33333%;
    }
    .embed iframe {
      width: 854px;
      height: 480px;
    }
  }
  
    @media (min-width: 1600px) {
    .profiles-arrow {
      left: 0px;
    }
    .arrow {
      display: none;
    }
  }
    
  #wm-ipp-base {
    text-shadow: none;
  }