/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*-------------------------------------------------
 colors!!!
-------------------------------------------------*/

/*#303787: universal blue*/
/*#1d235f: dark blue*/
/*obviously, #fff for white and #000 for black*/
/*#eaebf3: blueish gray*/


/*-------------------------------------------------
 fonts
-------------------------------------------------*/




/*-------------------------------------------------
  background animation 
-------------------------------------------------*/
@keyframes bg {
  /* animate the whole background‑position property,
     which can accept the comma‑separated list for multiple
     backgrounds. */
  from {
    background-position: 0px 1px, 16px 16px;
  }
  to {
    background-position: 32px -32px, 60px -16px;
  }
}


/*-------------------------------------------------
  scrollbars (WebKit)
-------------------------------------------------*/

 

/*-------------------------------------------------
  headings
-------------------------------------------------*/

/*-------------------------------------------------
  body styling
-------------------------------------------------*/
body {
  background-color: orange ;
  background-image: radial-gradient(#eaebf3 5%, transparent 15%), radial-gradient(#303787 0%, transparent 0%);
  background-position: 0px 0px, 16px 16px;
  background-size: 32px 32px, 32px 32px;
  color: black;
  font-family: comic;
  text-align: center;
  animation: bg 3s linear infinite;
  margin: -4px 0 0 0;
  font-size: 13px;
}




.container {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.container25, .container50, .container37, .container60{
  margin: 0px 4px;
  color: #fff;
}

.container25 {
  width: 150px;
}

.container50 {
  width: 550px;
}

  

.container37{
  width: 325px;
}

.webring {
  outline: 2px dashed white;
  margin: 0px auto;
  width: 242px;
  border-radius:8px;
}

.webring a {
    color: #000 !important;
}



.bg {
  background-color: green;
  outline: 1px gray;
}


.centered { text-align: center; }
.justified { text-align: justify; }
.scroller { overflow: auto; height: 320px; }
.alterna {  font-family: alterna;}   .directory{font-family: directory} .abitbig { font-size: 30px; } .kanjibold{font-family: kanjibold;}
.whitet{color:#fff} .gibberish{font-family:comic;} .utdr{font-family:comic;} .hangulbold{font-family:hangulbold;}


.colorless{
  font-family:comic;
  text-align: center;
  font-size:18px;
  color: #000;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0);
  background-color: rgba(245, 40, 145, 0);}
  

.glow{
  margin-top:45vh;
  color:blue;
  animation-name:glow;
  animation-duration:5s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}

@keyframes glow{
  from{text-shadow:0px 1px 5px #fff,0px 0px 5px #614ad3;}
  to{text-shadow:0px 1px 20px #fff,0px 20px 20px #614ad3;}
}

.enlarge{transition: transform 0.1s;}

.enlarge:hover{
   transform: scale(1.16);
  }
  
   
  .spin {
    -webkit-animation:spin 5s linear infinite;
    -moz-animation:spin 5s linear infinite;
    animation:spin 5s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(380deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(380deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(380deg); 
        transform:rotate(380deg); 
    } 
}

 .spinB {
    -webkit-animation:spinB 8s linear infinite;
    -moz-animation:spinB 8s linear infinite;
    animation:spinB 8s linear infinite;
}
@-moz-keyframes spinB { 
    100% { -moz-transform: rotate(-380deg); } 
}
@-webkit-keyframes spinB { 
    100% { -webkit-transform: rotate(-380deg); } 
}
@keyframes spinB { 
    100% { 
        -webkit-transform: rotate(-380deg); 
        transform:rotate(-380deg); 
    } 
}
.grayscale {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
  
  


 .rotate15{
   transform: rotate(-15deg);
    }
  .rotate15:hover{
   transform: rotate(-20deg);
    }
    
  .rotatem15{
   transform: rotate(15deg);
    }
  .rotatem15:hover{
   transform: rotate(20deg);
    }
    
    
  button {
  background-color: #fff;
  border: dashed 3px #1d235f;
    line-height: 1.44;
  color: #303787;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family:comic;
  font-size: 15px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius:8px;
}

.centerbox {
    justify-content: center; 
    align-items: center;
    text-align: center;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex;
    max-width: 45vw;
    padding: 30px; /* Add padding for better visual appearance */
    height: auto;
    background-repeat: no-repeat;
    border-radius: 10px;
    flex-wrap: wrap;
}



.mainFilter {
    filter: invert(1) sepia(1) invert(0.6) saturate(3) contrast(3);
    image-rendering: pixelated;

}
    .mainFilter:hover {
    filter: none;
    image-rendering: auto;}
    
    .sidefilter{filter: invert(1) sepia(1) invert(0.58) saturate(3) contrast(4);
    image-rendering: pixelated;}
    
#sidelink{padding-top:10px;}



/*-------------------------------------------------
  statuscafe
-------------------------------------------------*/
#stupidlonginnercafe{width:80%;height:150px; transform: rotate(4deg); display: flex; text-align:left; align-items: center; padding-top:35px; padding-bottom:30px;}
#statuscafenormalbox{height:180px;  transform: rotate(-1deg);}

 .status{
      color:#303787;
      line-height:30px;
      font-size:18px;
      }
      
  #stupidlonginnercafe h3 {margin-bottom:5px; font-size:20px;}
      
      .status-date {
        font-size: 9px;
        font-family:comic;
        }




#iframelinkul{font-size: 200px !important;}

/*-------------------------------------------------
  stripes
-------------------------------------------------*/

 .stripe {
    position: relative;
    overflow: hidden;
    height: 75px;
}

.stripe::before {
    content:"";
    position:absolute;
    inset:0;
    width:200%;
    left:-100%;

    background:
    repeating-linear-gradient(
        45deg,
        #303787 0 16px,
        #1d235f 16px 32px
    );

    animation: stripeMove 32s linear infinite;
}

@keyframes stripeMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

.bottom-stripe {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 40px;
    outline: 2px solid white;
    z-index: 10;
    }


.ironia{ position:relative; top:0px; left:0px; padding-top:9px; padding-left:20px; font-size:32px; -webkit-text-stroke: 7px white; paint-order: stroke fill; text-decoration: none; color:#1d235f; }













.corner-stripe {
    position: fixed;
    width: 5vw;
    height: 5vh;
    overflow: hidden;
    z-index: 9999;
    pointer-events: none;
}

.corner-stripe::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 200%;
    left: -100%;

    background:
        repeating-linear-gradient(
            45deg,
            #303787 0 16px,
            #1d235f 16px 32px
        );

    animation: cornerStripeMove 4s linear infinite;
}

.corner-stripe-tl {
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.corner-stripe-br {
    bottom: 0;
    right: 0;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

@keyframes cornerStripeMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}





/*-------------------------------------------------
  star marker
-------------------------------------------------*/


.star li::marker {
  content: "★ ";
}
                     
                    .star{font-size:16px;}
                  
                  
                  


/* --------------------------------
   let's connect
-------------------------------- */

.connect-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-bottom: 15px;
}

.connect-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

/* First button */
.connect-button:not(.small) {
    width: 176px;
    height: 62px;
}

.connect-button:not(.small) img {
    width: 176px;
    height: 62px;
}

/* Second button */
.connect-button.small {
    width: 64px;
    height: 64px;
}

.connect-button.small img {
    width: 64px;
    height: 64px;
}

/* Copy buttons */
.copy-button {
    box-sizing: border-box;
    flex-shrink: 0;
    height: 62px;
    width: 220px;

    margin: 0;
    padding: 10px;

    border: none;
    outline: 1px dashed white;
    border-radius: 8px;

    background-color: #303787;
    color: white;

    font-family: blitzmain;
    font-size: 16px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.copy-button:hover {
    outline: 1px solid white;
}


/* --------------------------------
   v2 new stuff
-------------------------------- */

.container60{width: 750px; font-size:18px;}

.name::before{content: "tab-O";}

  
  .filler::before{content: "ã…¤";} /* THIS ISNT BLANK IT HAS A HANGUL FILLER */
  .footer{margin-top:200px; margin-bottom:30px; color:black; font-size:20px;}
  

.centerall{display: flex; justify-content: center; align-items: center;}

#sitemapiframe{height:185px; width:220px; border: none;} /* this is 4 the catalogus.html iframe*/

#goeng
,#goesp{
  cursor: pointer; height:auto; font-family:comic;
  transform: rotate(3deg);
  transition: transform 0.1s;
}

#goeng{margin-bottom: 40px;}
#goesp{margin-bottom: 10px; float:right;}

#goeng:hover,
#goesp:hover {
    transform: rotate(3deg) scale(1.1);
}





.container37,
.container50,
.container60 {
  display: flex;
  flex-direction: column;
}


.container37 > .stripe,
.container50 > .stripe,
.container60 > .stripe {
  flex: 1;
}