@font-face {
font-family: 'cheekyrabbit';
src: url('/font/cheekyrabbit.ttf') format('OpenType');
}

@font-face {
font-family: 'stimcard';
src: url('/font/Stimcard.ttf') format('OpenType');
} 


*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

*{
 cursor: url(https://cur.cursors-4u.net/others/oth-4/oth306.cur), auto !important;
}

::selection {
 text-shadow: 0 0 8px #cce5ff;
 color:#b8cbde;
}
::-moz-selection {
 text-shadow: 0 0 8px #cce5ff;
 color:#b8cbde;
}

::-webkit-scrollbar {
 width: 15px;
}
::-webkit-scrollbar-track {
  background:white;
  border: 1px solid lightblue
}
::-webkit-scrollbar-thumb {
  background-image:url(/img/bluecheckered.gif);
  background-size:14px;
  box-shadow: inset 1px 1px white, inset -1px -1px #9bcef2;
  border: 1px solid;
  border-color: lightblue #000 #000 lightskyblue;
}


a {
 color:#a4caed;
 text-decoration: none;
}

ul{
 list-style-image:url("https://wilardo.crd.co/assets/images/gallery04/a2e4add8.png?v=a9ab673e");
 padding:0px 0px 0px 5px;	
  list-style-position: inside;
}

hr{
 border:1px dashed lightgray;
 width:70%;
 margin:0 auto;
 margin-top:10px;
 margin-bottom:5px;
}

h1,h2,h3{
 text-shadow: -3px 0px #9ec5de, 2px 0px #9ec5de, 0px 2px #9ec5de, 0px -2px #9ec5de, 0 0;
 color:#ffff;
 padding:10px 0px 10px 0px;
}

h3::before{
 content:url(https://files.catbox.moe/dhzfy6.gif);
 margin-right:5px;
}

h3::after{
content:url(https://files.catbox.moe/63efdi.gif);
margin-left:5px;
}

h4{
  text-shadow: -3px 0px #9ec5de, 2px 0px #9ec5de, 0px 2px #9ec5de, 0px -2px #9ec5de, 0 0;
 color:#ffff;	
padding:5px 0px 5px 0px;
}

#homeheader{
 font-size:3rem;
 font-style: italic;
}

#homeheader::before{
 content: url(https://files.catbox.moe/f15tlg.gif);
}

body{
 background-image:url("http://25.media.tumblr.com/tumblr_leiazpO0wr1qf7n84o1_100.gif");
 color:#9ea6b5;
 font-family:'stimcard';
}

.container{
 margin:2rem auto;
 height:fit-content;
 max-width:90rem;
 border: 150px solid;
 border-image:url("/img/lace2.png")150 fill round;
 border-style: none solid none solid;
 filter: drop-shadow(10px 5px 5px rgba(10, 7, 7, 0.19));
 padding:10px 30px 10px 30px;
}

.containerbg{
 background-color:#ebf3fc;
 background-image:url("https://i.pinimg.com/736x/ef/d5/8c/efd58c9706dd78debf6ba3737c695843.jpg");
 background-size:100px;
 display:flex;
 flex-direction:column;
}


.headerimg{
	background-image:url("https://wilardo.crd.co/assets/images/gallery07/c06653e9.png?v=f2364dd6");
	background-repeat: no-repeat;
	background-size:150px;
	height:150px;
	margin-bottom:-9.7rem;
    -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
 filter: contrast(20%) brightness(165%);
}


.header{
 border:5px solid;
 padding:20px 10px 0px;
 font-family:'cheekyrabbit';
 font-size:40px;
 text-shadow: -2px 2px 0 #c4e0f2, 2px 2px 0 #c4e0f2,
2px -2px 0 #c4e0f2,-2px -2px 0 #c4e0f2;
 color:#ffff;
 background-image:url("https://i.pinimg.com/564x/23/5c/1f/235c1f56de4599f01fba09c1317286a8.jpg");
 text-wrap:wrap;
}

.navigation{
 border:3px solid #f3f6fb;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 76%, rgba(246,246,246,1) 100%);
 background-size:100px;
 position:relative;
 padding:5px;

}

.frilltop{
 background-image:url("https://64.media.tumblr.com/8dc1488fd7bff605fe58b8d4b159fff9/9a28dd4ffe158176-7f/s400x600/db2740be6711ad0099f332496369fcfe53c10cf8.pnj");
 height:2.2rem;
 background-size:410px;
 background-repeat:repeat-x;
}

.frilltop2{
 background-image:url("https://i.postimg.cc/WpGLYvwS/image-2024-05-23-214709738.png");
 filter: contrast(20%) brightness(165%);
 height:2rem;
 background-size:450px;
 background-repeat:repeat-x;	
}

.frilltop3{
 background-image:url("https://files.catbox.moe/schzkc.png");
 height:2rem;
 background-size:450px;
 background-repeat:repeat-x;	
 margin-top:-6px;	
}

.frilltop4{
 background-image:url("https://64.media.tumblr.com/74c8b1ed93a03fabcd36447c9dd24a9e/998c46faa75a0977-cb/s400x600/54006287c4f01c7ad08cd67507ead253cfc64e28.pnj");
  filter: contrast(60%) brightness(125%);
 height:5rem;
 background-size:350px;
 background-repeat:repeat-x;	
 margin-top:-30px;	
}

.frilltop5{
 background-image:url("https://64.media.tumblr.com/3775f746556fe437d8ec2d320c15633e/f547d25d242cebec-22/s400x600/4455bdcc68b5caadc8c8b4f4e71d9e910bfb8c76.pnj");
 height:2rem;
 background-size:330px;
 background-repeat:repeat-x;		
}

.corsetribbon{
  background-image: url(https://i.postimg.cc/05Hfks7D/image-2024-05-24-224509118.png);
  filter:contrast(10%) brightness(200%);
  height:20rem;
  width:20rem;
  z-index:11;
  position:absolute;
  margin-left:2rem;
  margin-top:9rem;
}



#navbar{
 display: flex;
 padding: 5px;
 margin: 0;
gap:10px;
 background-color:white;
 border:2px aliceblue dashed;
 flex-wrap: wrap;
}

button{
 background-color:white;
 border: 8px solid;
 border-image:url("/img/borderfrillsblue.png")8 fill round;
 padding:0.5% 1% 0.5% 1%;
 transition: 0.4s;
 font-family:'cheekyrabbit';
 color:#9ea6b5;
}

button:hover{
 color:#a4caed;
}

button.active{
 color:#a4caed;
}


.contents{
 display:flex;
 flex-direction: row;
 gap:20px;
 padding:15px;
}

.tabcontent{
background: rgb(231,245,255);
background: linear-gradient(180deg, rgba(231,245,255,1) 0%, rgba(255,255,255,1) 100%);
border:6px solid #e6f3ff;
box-shadow: 0 0px 2px 0 rgba(0,0,0,0.2),0 0px 10px 0 rgba(0,0,0,0.19);
height:66rem;
 overflow:auto;
 margin:20px;
	
}

.leftside{
 width:80%;
 height:auto;
 background-color:white; 
 background-image:url("https://i.pinimg.com/736x/c0/3c/8c/c03c8c1f4326cfd34ed6428caf5e4913.jpg");
 background-size:100px;
 box-shadow: 0 0px 2px 0 rgba(0,0,0,0.2),0 0px 10px 0 rgba(0,0,0,0.19);
}

.rightside{
 display:flex;
 flex-direction: column;
 flex-wrap: wrap;
 width:14rem;	
 background-image:url("https://i.pinimg.com/564x/13/fc/f4/13fcf487e9c11c85ea2c6b158da7e4d3.jpg");
 background-size:200px;
 box-shadow: 0 0px 2px 0 rgba(0,0,0,0.2),0 0px 10px 0 rgba(0,0,0,0.19);
}

#cutetitle{
 text-align:center;
 margin-bottom:-15px;
 z-index:10;
 position:relative;
 font-size:30px;
 text-shadow: -3px 0px #9ec5de, 2px 0px #9ec5de, 0px 2px #9ec5de, 0px -2px #9ec5de, 0 0;
 color:#ffff;
}

#cutetitle::before{
 content:url("https://files.catbox.moe/xu3xhx.png");
}

#cutetitle::after{
 content:url("https://files.catbox.moe/7sy6jb.png");
}
.contentborder{
 filter: drop-shadow(0px 0px 0px #e8f8ff) drop-shadow(0px 0px 1px #e8f8ff) drop-shadow(0px 0px 3px #e8f8ff) drop-shadow(0px 0px 0px #e8f8ff) drop-shadow(0px 0px 0px #e8f8ff) drop-shadow(0px 0px 0px #e8f8ff) drop-shadow(0px 0px 0px #e8f8ff) drop-shadow(0px 0px 0px #46549c);
 margin:10px;
}

.innertext{
 padding:10px;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(240,247,251,1) 100%);
 margin:10px;
 border:2px #d7e3f5 solid;
 border-radius:10px;
}

.sidebox{
 border:2px dashed #d3e3f2;
 border-radius:10px;
 margin:5px;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%);
}

.footer{
 border:4px dashed aliceblue;
 padding:5px;
 text-align:center;	
 background-color:white;
}

.homepage{
 padding:20px;
 margin:10px;
 height:100%;
 line-height:30px;
 border:2px solid lightblue;
 background-color:white;
}

.Pagehead{
  position:sticky;
  top: 0;
  z-index:10;
}

.headcontent{
  background:white;
  padding:10px;
  border-bottom:2px dashed lightgrey;
  height:fit-content;
 
}

.Updatesect{
 width:fit-content;
 height:10rem;
 overflow:auto;
 margin:10px;
 border:3px lightblue dashed;
 border-top-right-radius: 75px;
}

.updatepad{
 padding:10px;
}

.censor{
 filter:blur(6px);	
}


.gallery{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width:100%;
  padding:14px;
}

  
.gallery img{
  height: 200px;
  width: 200px;
  object-fit: cover;
  mask-image: url(/img/Artmask.png);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center center;
  margin:15px 5px 0px 1px;
  filter:opacity(0.5);
}
  
.gallery img:hover{
  filter:none;
  transition: 0.5s;
}

.date{
 text-align: center;
 border:2px dashed lightblue;
 background-color:white;
 width:140px;
 margin:0 auto;
 
}

/*LIGHTBOX*/

.lightbox{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    overflow: hidden;
     flex-direction: column;
}

.lightbox-img{
    border:5px double white;
    border-radius:10px;
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    background-color:rgb(255,255,255,0.4);
  
}
.close{
    position: absolute;
    top: 5px;
    right: 30px;
    font-size: 90px;
    color: lightcyan;
    cursor: pointer;
}
.arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 90px;
    color: lightcyan;
    padding: 10px;
    user-select: none;
}

.counter{
    position: absolute;
    top:90%;
    color: white;
    font-size: 18px;
    font-family:'cheekyrabbit';
    text-align: center;
    width: 100%;
    margin-top:10px;
}

.counter::before{
  content:url("https://i.postimg.cc/1RD3yx6N/1.gif");
  padding:10px;
}

.counter::after{
  content:url("https://i.postimg.cc/fbFRRDBY/4.gif");
  padding:10px;
}

#loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: white;
    display: none; /* hidden by default */
    z-index: 10;
}

#caption{
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 1em;
    max-width:80%;
}

.left{
    left: 0.5vw;
}

.right{
    right: 0.5vw;
}

@media screen and (max-width: 1000px){

.container{
  max-width:35rem;
  width: 97%;
  padding:5px;
  height:auto;
  border:10px solid;
  border-image:url("/img/borderfrill.png")75 fill round;
  border-style: none solid none solid;
  }

.contents{
   width:100%;
   display: flex;
   flex-direction: column;
   gap:5px;
}
	
.tabcontent{
 padding:0;
 overflow:auto;
 height:30rem;
}
	
 .gallery{
  padding:2px;
 }
	
 .gallery img{
   height:100px;
   width:100px;
}

 .date{
  width:80px;
  font-size:14px;
}
	
	
.homepage{
 height:fit-content;
}

.header{
 font-size:15px;
 text-align: center;
 word-break:break-all;
}
	
.headerimg, .corsetribbon{
 display:none;
}

.leftside,.rightside{
 width:100%;
}
	
.leftside{
 order:1;
 height:35rem;

}
	
.rightside{
 order:2;
}
	
.navigation{
  position:sticky;
  top: 0;
  z-index:9999;
}

.button{
 margin:0 auto;
 border-radius:5px;

}


}