/* Place your CSS styles in this file */
* {
    min-width:  0;
}

@font-face {
  font-family: gnu;
  src: url(fonts/Unifont.woff2);
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    src: url(fonts/ms_sans_serif.woff) format("woff");
    src: url(fonts/ms_sans_serif.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

body {
    background-color: hotpink;
    color: white;
    height: 100%;
    overflow-x: hidden;
    text-align: center;
    font-size: 1rem;
    font-family: gnu;
    
}

h1 {
    font-family: sans-serif;
}
a {
    color: #FFDAE0;
}

a:hover{
    color:cyan;
}

.c-enabled {
    display: block;
}
.c-cursor {
    position: absolute;
    z-index: 9999;
    width: 36px;
    height: 36px;
    pointer-events: none;
    //display: none;
    content: url("https://static.wixstatic.com/media/f73e25_bbc4d954c52546abae8bd86787a3ff18~mv2.gif");
}

.nocursor {
    cursor: none;
}

.text-left {
    text-align: left;
}

.center-div {
    width: fit-content;
    margin: auto;
}

body::-webkit-scrollbar-track
{
	border-radius: 10px;
}

body::-webkit-scrollbar
{
	width: 18px;
    background-color: white;
    box-shadow: inset 2px 0 8px 3px #adadad;
}

body::-webkit-scrollbar-thumb
{
    --scroll: 0px;
    background-image: repeating-linear-gradient(#00000000, rgba(51, 116, 217, 0.5) 10px, #00000000 20px), linear-gradient(to right, #3185e9 45%, #a7ecff);
    border-radius: 18px;
    border: 1px solid rgba(6, 9, 48, .5);
    box-shadow: 0 2px 7px #0000009e, inset 2px 0 5px 1px #0039b4, inset 14px 0 3px -5px rgb(237 250 255 / 66%);
    /*background-position-y: calc(var(--scroll) * -1);*/
}

pre
{
    font-family: monospace;
}

.comment-list {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.comment-header{
    padding-bottom: 10px;
}

.comment-wrap{
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 20px;
    display: flex;
    text-align: left;
    margin: 10px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.comment-container{
    width: 100%;
}

.comment-pfp{
    width:80px;
    background-size: contain;
    aspect-ratio: 1 /1;
    background-repeat: no-repeat;
    background-position: center;
    background-image:url(/images/pfp/idkw.png);
    
}

.comment-text{
    margin-block-start: 0em;
    margin-block-end: 0em;
    overflow: hidden;
}

.comment-date{
    opacity: 40%;
}
.comment-date:hover{
    opacity: 100%;
}

.fullwidth {
    width:100%;
}

.flex-space{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.flex-space.fixed{
    height:120px;
}

.pfp-selector-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

.pfp-selector-container input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.submit {
    padding: 16px 20px;
}


.pfp-stars{background-image:url(/images/pfp/stars.webp);}
.pfp-miku{background-image:url(/images/pfp/miku.webp);}
.pfp-rana{background-image:url(/images/pfp/rana.webp);}
.pfp-jerma{background-image:url(/images/pfp/jerma.webp);}
.pfp-xdog360{background-image:url(/images/pfp/xdog360.webp);}
.pfp-dj2k{background-image:url(/images/pfp/dj2k.webp);}
.pfp-shadow{background-image:url(/images/pfp/shadow.webp);}
.pfp-pyro{background-image:url(/images/pfp/pyro.webp);}
.pfp-fire{background-image:url(/images/pfp/fire.webp);}
.pfp-sigma_mare{background-image:url(/images/pfp/sigma_mare.webp);}
.pfp-tinymiku{
    background-image:url(/images/pfp/tinymiku.webp);
    width: 40px;
    margin: 20px;
}
.pfp-dake{background-image:url(/images/pfp/dake.webp);}
.pfp-john{background-image:url(/images/pfp/john.webp);}
.pfp-rin{background-image:url(/images/pfp/rin.webp);}
.pfp-rainbow{background-image:url(/images/pfp/rainbow.webp);}
.pfp-pan{
    background-image:url(/images/pfp/pan.webp);
    animation-name: spin;
    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.pfp-ralts{background-image:url(/images/pfp/ralts.webp);}

.pfp-bobocube{background-image:url(/images/pfp/bobocube.gif);}
.pfp-lfav{background-image:url(/images/pfp/lfav.gif);}

.pfp-0{background-image:url(/images/pfp/idkw.png);}
/*.pfp-0{background-image:url(/images/pfps/pfp_0.gif);}*/
.pfp-1{background-image:url(/images/pfps/pfp_1.gif);}
.pfp-2{background-image:url(/images/pfps/pfp_2.gif);}
.pfp-3{background-image:url(/images/pfps/pfp_3.gif);}
.pfp-4{background-image:url(/images/pfps/pfp_4.gif);}
.pfp-5{background-image:url(/images/pfps/pfp_5.gif);}
.pfp-6{background-image:url(/images/pfps/pfp_6.gif);}

.pfp-46{background-image:url(/images/pfps/pfp_46.gif);}

.pfp-80{background-image:url(/images/pfps/pfp_80.gif);}

.pfp-127{background-image:url(/images/pfps/pfp_127.gif);}

.pfp-selector-container input:active +.pfp-selector{opacity: .9;}
.pfp-selector-container input:checked +.pfp-selector{
    opacity: 1;
    margin: 0px;
    padding: 6px;
}
.pfp-selector{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:40px;height:40px;
    transition: all 100ms ease;
    opacity: 0.5;
    margin: 6px;
}
.pfp-selector:hover{
    opacity: 0.9;
}

.theme-0{
    background-color: #ffffff30;
}

.theme-1{
    background-color: transparent;
    border: #ffffff30;
    border-width: 2;
    border-style: dashed;
}

.comment-wrap.theme-1::before {
    content: "";
    background-color: #ff000030;
    background-image: url(/images/themes/anisnow.gif);
    opacity: 1.0;
    background: url(/images/themes/anisnow.gif), linear-gradient(130deg, rgba(255, 0, 0, 0.2) 0%, rgba(192, 0, 255, 0.2) 100%);
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -1;
}

.spoiler{
  background-color: deeppink;
  color: transparent;
  user-select: none;
  transition: all 300ms ease;
}

.spoiler:hover{
  background-color: inherit;
  color: inherit;
}

.bigframe {
    width:720px;
    width:min(720px, 100vw)
}

.cover-art {
    width:500px;
    height:500px;
    width:min(500px, 100vw);
    height:min(500px, 100vw);
}

.cover-art.large {
    width:800px;
    height:800px;
    width:min(800px, 100vw);
    height:min(800px, 100vw);
}

.infobox {
    margin-top: 2em;
    border: white 1px solid;
    padding-bottom: 1.2em;
}

.infobox-title {
    background: hotpink;
      padding: 4px;
      margin-top: -1em;
      inline-size: fit-content;
      margin-left: auto;
      margin-right: auto;
}

.infobox-list {
    margin: 0px;
    list-style: none;
    padding: 0px 1em;
    display: flex;
  flex-direction: column;
  gap: 0.2em;
  
}

.infobox-list.tour {

  gap: 0.8em;
}

.infobox-list.tour>li>a {

  text-decoration: none;
}

.soldout {
    text-decoration: line-through !important;
    opacity: 0.6;
}