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

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


::-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;
}




body {
  background-image: url("backg.png");
  font-family: "basiic";
  color: #7a4729;
  letter-spacing: 1px;
  line-height: 1.3;
}
a {
  color: #7a4729;
  text-decoration: none;
}

mark {
text-shadow: -1px 0  #FFFCF2, 0 1px  #FFFCF2, 1px 0  #FFFCF2, 0 -1px  #FFFCF2;
 font-size: 16px;
 color: #FF7AAD;
 border: 1px solid #DE6D9C;
 box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset #ffebf0;
 width:100%;
 height:2.2rem;
 background: #ffebf0;
background: linear-gradient(193deg, rgba(255, 235, 240, 1) 0%, rgba(255, 184, 205, 1) 100%);
}

@media (max-width:760px) {
    .pagedoll {
        display: none;
    }
}

@media (max-width:760px) {
    .pagedoll2 {
        display: none;
    }
}

.pagedoll {
  position: fixed; 
  bottom: 0px; 
  left: 0px; 
  z-index: 10; 
}
.pagedoll2 {
  position: fixed; 
  bottom: 0px; 
  right: 0px; 
  z-index: 10; 
}
.main {
  border-width: 7px; 
  border-style: solid; 
  border-image: url("frillborder.png") 6 fill round;
  width:60rem;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 2% auto;
}
.mainborder {
  background-image: url("gridpattern.png");
   border-color:pink;
  border-width: 2px; 
  border-style: dashed;
  height:100%;
  display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-direction:column;
}
.bannerborder {
  background-image:url("butterfly.png");
  background-size:50px 50px;
   width:99%;
  height:9.375rem;
  margin:5px;
  border-color: #C7ADA1;
  border-width: 1px; 
  border-style: solid;
  border-radius:10px;
  display:flex;
    justify-content: center;
    align-items:center;
}
.banner {
  background-image: url("flower.gif");
  overflow:hidden;
  width:99%;
  height:90%;
 border-color: #C7ADA1;
  border-width: 1px; 
  border-style: solid;
  border-radius:10px;
  box-shadow: white 300px 1px 105px 10px inset;
  display:flex;
    justify-content: flex-start;
    align-items:center;
}

.jumbum{
  background-image: url("jumbum.png");
  background-size:600px, auto;
  width:37.5rem;
  height:375rem;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 6%;
  margin-left:1%;

}


.scrollertext{
  margin-top:2px;
  border-color: #8BE35F;
  border-width: 1px; 
  border-style: solid;
  border-radius:10px;
  background: #daff91;
background: linear-gradient(180deg,rgba(218, 255, 145, 1) 0%, rgba(249, 252, 245, 1) 35%, rgba(249, 252, 245, 1) 75%, rgba(218, 255, 145, 1) 100%);
  width:99%;
  height:1.875rem;
  display:flex;
  align-items:center;
  justify-content:center;

}


.center {
  width:100%;
   display:flex;
    justify-content:flex-start;
    align-content:flex-start;
  
}

.outleftside {
 background-image:url("butterfly.png");
 background-size:50px 50px;
 margin:5px;
  border-color: #C7ADA1;
  border-width: 1px; 
  border-style: solid;
  border-radius:10px;
  height: 22rem;
  width: 14rem;
    display:flex;
    justify-content:center;
    align-content: center;
    align-items: center;
    flex-direction:column;
    
}
.navborder {
  background-color:#FFFAFC;
  background-size:50px 50px;
   width:90%;
  height:95%;
  border-color: #FFBDDE;
  border-width: 1px; 
  border-style: solid;
  border-radius:10px;
  display:flex;
    align-items:center;
    flex-direction:column;
    flex:none;
}

.navigation{
 text-shadow: -1px 0  #FFFCF2, 0 1px  #FFFCF2, 1px 0  #FFFCF2, 0 -1px  #FFFCF2;
 font-size: 20px;
 color: #FF7AAD;
 border: 1px solid #DE6D9C;
 box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset #ffebf0;
 width:100%;
 height:2.2rem;
 background: #ffebf0;
background: linear-gradient(193deg, #ffebf0 0%, #ffb8cd 100%);
border-radius:10px 10px 0 0;
margin-bottom:5px;
 display: flex;
    align-items:center;
    justify-content:center;
    align-content: center;
}
.button {
  background: linear-gradient(to bottom, #FFFCFD 0%, #FFE3EE 50%, #FFB8D6 51%, #FFE3EF 100%);
text-shadow: -1px 0  #FFFCF2, 0 1px  #FFFCF2, 1px 0  #FFFCF2, 0 -1px  #FFFCF2;
box-shadow: inset #FFF8E0 0 0 20px;
font-size: 18px;
margin-bottom:5px;
color: #FF91BF; 
border: 1px solid #DE6D9C;
overflow: hidden;
width: 90%;
height: 1.6rem;
border-radius:6px;
}

.button2 {
  background: linear-gradient(to bottom, #FBFCED 0%, #EAFF8F 50%, #D3EE5A 51%, #E8FA98 100%);
text-shadow: -1px 0  #FFFCF2, 0 1px  #FFFCF2, 1px 0  #FFFCF2, 0 -1px  #FFFCF2;
box-shadow: inset #FFF8E0 0 0 20px;
font-size: 18px;
margin-bottom:5px;
color: #7FBD04; 
border: 1px solid #7FBD04;
overflow: hidden;
width: 90%;
height: 1.6rem;
border-radius:6px;
} 
.button3 {
  background: linear-gradient(to bottom, #E4ECED 0%, #E3EFFC 50%, #B3DFE5 51%, #CEE4ED 100%);
text-shadow: -1px 0  #FFFCF2, 0 1px  #FFFCF2, 1px 0  #FFFCF2, 0 -1px  #FFFCF2;
box-shadow: inset #FFF8E0 0 0 20px;
font-size: 18px;
margin-bottom:5px;
color: #5BBCEB; 
border: 1px solid #5BBCEB;
overflow: hidden;
width: 90%;
height: 1.6rem;
border-radius:6px;
}
.button4 {
  background: linear-gradient(to bottom, #FFF6E6 0%, #FFEFC2 50%, #FED973 51%, #FFE6A1 100%);
text-shadow: -1px 0  #FFFCF2, 0 1px  #FFFCF2, 1px 0  #FFFCF2, 0 -1px  #FFFCF2;
box-shadow: inset #FFF8E0 0 0 20px;
font-size: 18px;
margin-bottom:5px;
color: #FF9900; 
border: 1px solid #F2BB18;
overflow: hidden;
width: 90%;
height: 1.6rem;
border-radius:6px;
}
.outmiddle {
 background-image:url("butterfly.png");
 background-size:50px 50px;
margin:5px;
  border-color: #C7ADA1;
  border-width: 1px; 
  border-style: solid;
  border-radius:10px;
  width:42.5rem;
  height:21.9rem;
 display:flex;
    justify-content: center;
    align-content: center;
    align-items:center;
}

.inmiddle {
  background-color:white;
  border-color:pink;
  border-width: 2px; 
  border-style: dashed;
  border-radius:10px;
  height: 96%;
  width:96%;
  display:flex;
    justify-content:flex-start;
    align-content: center;
    align-items:center;
    flex-direction:column;
    flex:none;
}
.welcome{
  width:100%;
  height:10%;
  text-shadow: -1px 0  #FFFCF2, 0 1px  #FFFCF2, 1px 0  #FFFCF2, 0 -1px  #FFFCF2;
 font-size: 30px;
 color: #5BBCEB;
 border: 1px solid #5BBCEB;
 box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset #ffebf0;
 background: #FBFCED;
background: linear-gradient(193deg, #F0FFFD 0%, #B3DFE5 100%);
border-radius:10px 10px 0 0;
 display: flex;
    align-items:center;
    justify-content:center;
    align-content: center;
}
.introborder{
  margin:5px;
  padding:25px;
  height:75%;
  width:88%;
  background-image:url("star.gif");
  border: 1px solid #C7ADA1;
  border-radius:10px;
}
.intro {
  height:100%;
  width:100%;
  background-color:white;
  border: 1px solid #C7ADA1;
  border-radius:10px;
  text-align: center;
  font-size:13.5px;
}
.cloverheader{
  background-image: url("cloverheader.png");
  background-size:680px auto;
  margin-top:5px;
  width:100%;
  height:15%;
  background-position: center;
}
.rightside{
  width:14rem;
  margin-left:5px;
  display:flex;
    justify-content:flex-start;
    align-content:flex-start;
    align-items:center;
    flex-direction:column;
}
.outrightside {
 background-image:url("butterfly.png");
 margin:5px;
 background-size:50px 50px;
  border-color: #C7ADA1;
  border-width: 1px; 
  border-style: solid;
  border-radius:10px;
  height: 10.625rem;
  width: 100%;
    display:flex;
    justify-content:center;
    align-content: center;
    align-items: center;
}

.inrightside{
 background-color:#FFFAFC;
 border-color: #7FBD04;
  border-width: 1px; 
  border-style: solid;
  border-radius:10px;
  line-height:23px;
  display: flex;
  flex-direction: column;
  flex: none;
  width:90%;
  height:90%;
}

.status{
 text-shadow: -1px 0  #FFFCF2, 0 1px  #FFFCF2, 1px 0  #FFFCF2, 0 -1px  #FFFCF2;
 font-size: 20px;
 color: #3DBD00;
 border: 1px solid #7FBD04;
 box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset #ffebf0;
 width:100%;
 height:2.2rem;
 background: #D3EE5A;
background: linear-gradient(193deg, #FBFCED 0%, #D3EE5A 100%);
border-radius:10px 10px 0 0;
 display: flex;
    align-items:center;
    justify-content:center;
    align-content: center;
}

.lowerightside {
 background-image:url("butterfly.png");
 background-size:50px 50px;
  border-color: #C7ADA1;
  border-width: 1px; 
  border-style: solid;
  border-radius:10px;
  height: 10.625rem;
  width: 100%;
    display:flex;
    justify-content:center;
    align-content: center;
    align-items: center;
}

.inlowerightside{
 background-color:#FFFAFC;
 border-color: #F2BB18;
  border-width: 1px; 
  border-style: solid;
  border-radius:10px;
  display: flex;
    align-items:center;
    justify-content:flex-start;
    align-content: center;
    flex-direction:column;
    flex: none;
  width:90%;
  height:90%;
  
}

.update{
 text-shadow: -1px 0  #FFFCF2, 0 1px  #FFFCF2, 1px 0  #FFFCF2, 0 -1px  #FFFCF2;
 font-size: 20px;
 color: #FF9900;
 border: 1px solid #F2BB18;
 box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset #ffebf0;
 width:99%;
 height:2.2rem;
 background: #ffebf0;
background: linear-gradient(193deg, #FFF6E6 0%, #FED973 100%);
border-radius:10px 10px 0 0;
 display: flex;
    align-items:center;
    justify-content:center;
    align-content: center;
     flex-shrink: 0;
}

.updatecontent {
padding-top: 5px;
padding-left: 5px;
overflow-y: auto;
font-size: 13px;
}

.marqueeborder {
  background-image:url("butterfly.png");
  margin-top:5px;
 background-size:50px 50px;
 width:100%;
 height:70px;
  border-color: #C7ADA1;
  border-width: 1px; 
  border-style: solid;
  display:flex;
    justify-content:center;
    align-content: center;
    align-items: center;
}
.marqueee {
  background-color:white;
  width:99%;
  height:56px;
  border-color: #C7ADA1;
  border-width: 1px; 
  border-style: solid;
  

}