@font-face {
src: url("basiic.ttf");
font-family: "baiic";
}

 @font-face {
src: url("oliver-regular.ttf");
font-family: "oliver";
}

::selection {
  background-color: #ffafe4; 
  color: #ffffff;            
}

/* Older Firefox compatibility */
::-moz-selection {
  background-color: #ffafe4;
  color: #ffffff;
}

::-webkit-scrollbar {
    width: 12px; background: #ffebf0;
}

::-webkit-scrollbar-track {
   background: linear-gradient(193deg, #ffebf0 0%, #fffbfc 100%);
   border-radius: 0px;
   width: 0px;
   border: 1px dotted #ff8daf;
}
::-webkit-scrollbar-thumb {
    background: #ffd1e4;border: 1px dotted #ff8daf;border-radius: 0px;
}

/* Light Pink Pointer - https://www.cursors-4u.com/cursor/light-pink-pointer */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/light-pink-pointer-586da373-32.webp') 40 37, auto !important;
}
/* End www.Cursors-4U.com Code */


* {
	image-rendering: pixelated;
}
a {
  text-decoration: none;
  color:#ff8daf;
}

a:hover {
font-style: italic;
}

h2 {
 text-shadow: 0 0 5px rgb(255, 205, 230), 0 0 5px hotpink, 0 0 5px hotpink, 0 0 5px hotpink;
  color: white; 
  margin-left:10px;
}

h1 {
   text-shadow: 0 0 5px rgb(255, 205, 230), 0 0 5px rgb(71, 172, 255), 0 0 5px rgb(71, 172, 255), 0 0 5px rgb(71, 172, 255);
  color: white;
  font-size:20px;
}

h1:hover {
 font-style: italic;
}


body {
background-image: url("pinkcheck.png");
  font-family: "basiic";
  color: #7a4729;
}

.main {
    border: 12px solid;  
  border-image: url("bluefrill2.png") 10 fill round;
    width:80rem;
    height:47rem;
    margin:0 auto;
  margin-top:60px;
  filter: drop-shadow(0px 0px 5px #00000011);
  position: relative;
}

.inmain {
 background-image: url("gridpattern.png");
    background-size:30px;
    width:100%;
    height: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
}

.ring {
    background-image: url("notebookring.png");
    background-repeat: repeat-y;
    position: absolute;
    width:4rem;
    height:45rem;
    margin-left:0.5rem;
    margin-right:0.5rem;
    margin-top:1rem;
    left: 606px;
    z-index:3;
    filter:brightness(120%);

    
}

.leftsideborder {
    background-image:url("c17-bg-polkadot.png");
 background-size:10px;
    margin-left:10px;
    margin-right:5px;
    width:50%;
    height:46rem;
    display:flex;
    flex-shrink: none;
    justify-content: center;
    align-items: center;
}

.leftside {
background-color:white;
height:43rem;
width:36rem;
}

.cruxborder {
    background-image: url("cutebg.png");
    width:100%;
    height:100%;
    box-shadow: #fed6ee 0px 0px 8px inset, #fed6ee 0px 0px 10px inset, #fed6ee 0px 0px 10px inset;
    position: relative;
}


.welcome {
font-family:"oliver";
font-size:27px;
position: absolute;
text-shadow: 0 0 5px rgb(255, 205, 230), 0 0 5px hotpink, 0 0 5px hotpink, 0 0 5px hotpink;
  color: white; 
  background-image:url("x17-bg-checked.gif");
  border-radius: 10px;
  width:290px;
  height:40px;
  top:200px;
  left:150px;
  display: flex;
    justify-content: center;
    align-items: center;
    
}

.navindexborder {
  position: absolute;
  top:260px;
  left:120px;
  width:22rem;
  height:15.5rem;
  overflow-y: auto;
  background-image: url("memo-pink.png");
  background-size: 350px;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  -webkit-box-shadow: inset -1px 3px 8px 5px #ffffff, 5px 5px 15px 5px rgba(255, 255, 255, 0); 
box-shadow: inset -1px 3px 8px 5px #ffffff, 5px 5px 15px 5px rgba(255, 255, 255, 0);
  
}

.navindex {
  margin-top:50px;
  margin-left:10px;
width: 15rem;
height:9rem;
padding:5px;
overflow-y:auto;
}
 

.rightsideborder {
background-image:url("c17-bg-polkadot.png");
 background-size:10px;
    width:50%;
    height:46rem;
    display:flex;
    flex-shrink: none;
    justify-content: center;
    align-items: center;
    margin-left:5px;
    margin-right:10px;
}

.rightside {
background-color:white;
height:43rem;
width:36rem;

}

.cruxborder2 {
    background-image: url("cutebg2.png");
    width:100%;
    height:100%;
    box-shadow: #fed6ee 0px 0px 8px inset, #fed6ee 0px 0px 10px inset, #fed6ee 0px 0px 10px inset;
    position: relative;
}

.blogwrapper {
  position: absolute;
  top:150px;
  left:130px;
  width:19rem;
  height:24rem;
  overflow-y:auto;
  line-height:30px;
}

.blogcontent {
  background-image: url("stripey.png");
  position: absolute;
  line-height: 20px;
  text-align: center;
}

@keyframes float{
0%, 100%{

transform: translateY(0px);
}
50%{
transform: translateY(6px);
}
}