::selection {
  background: rgba(255, 0, 0, 0);
}
  
@font-face {
    font-family: "thorn"; 
    src: url("/fonts/ithornet.ttf") format("truetype");
}

@font-face {
    font-family: "hibiscus"; 
    src: url("/fonts/hibiscus.ttf") format("truetype");
}

@font-face {
    font-family: "silkscreen"; 
    src: url("/fonts/silkscreen.ttf") format("truetype");
}

@font-face {
    font-family: "toxica"; 
    src: url("/fonts/toxica.ttf") format("truetype");
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
z-index: 100;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
  
  body{
cursor: url("/cursors/small.png"), default;
background-image: url('zzz');
background-color: #6F7132;
background-repeat: no-repeat;
overflow: hidden;
color: #000;
margin: 0 auto;
}

#inside{
height: 100vh;
display: flex;
justify-content: flex-end;

overflow: hidden;
background-color: #6F7132;
margin: 0 auto;
}

#content{
    width: 470px;
    height: 900px;
    background-color: #;
    
    position: absolute;
    margin-right: 630px;
    margin-top: 125px;
    
    padding: 10px;
    
    display: flex;
}

.displayimg{
  pointer-events: none;
  position: absolute;
}

.displayimgspecial{
  position: absolute;
}

#fullbody{
  margin-right: -95px;
  margin-top: 80px;
}

#necklaceholder{
  margin-right: 596px;
  margin-top: 237px;
}

#necklace{
  -webkit-animation: rotate-top 15s steps(30, end) infinite both;
	        animation: rotate-top 15s steps(30, end) infinite both;
}

@-webkit-keyframes rotate-top {
  0% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  50% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  75% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  100% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes rotate-top {
  0% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  50% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  75% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  100% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}

#bgflowers{

}

#topflowers{
  top: 1px;
}

#bottomflowers{
  top: 750px;
}

#topFlower1{
  position: absolute;
      margin-right: 327px;
    margin-top: -50px;
}

#topFlower2{
  position: absolute;
  margin-right: 156px;
    margin-top: -100px;
}

#topFlower3{
  position: absolute;
  margin-right: -106px;
    margin-top: -134px;
}

#topFlower4{
  position: absolute;
  margin-right: 435px;
    margin-top: -116px;
}







#bottomFlower1{
  position: absolute;
  margin-right: 404px;
    margin-top: 892px;
}

#bottomFlower2{
  position: absolute;
  margin-right: 226px;
    margin-top: 892px;
}

#bottomFlower3{
  position: absolute;
  margin-right: -147px;
    margin-top: 790px;
}

#bottomFlower4{
  position: absolute;
  margin-right: 493px;
    margin-top: 895px;
}

#bottomFlower5{
  position: absolute;
  margin-right: 695px;
    margin-top: 930px;
}

#bottomFlower6{
  position: absolute;
  margin-right: 853px;
    margin-top: 948px;
}

#backflowers{
  position: absolute;
  margin-right: 0;
    margin-top: 0;
  }
  
#palms{
  position: absolute;
  margin-right: 0;
    margin-top: 532px;
  }
  
#frame{
  position: absolute;
  margin-top: -45px;
  margin-left: -55px;
  }





h1{
  font-family: thorn;
  font-size: 150px;
  color: #D8D9C9;
  font-weight: 300;
  margin: 0 auto;
}

h2{
  font-family: thorn;
  font-size: 50px;
  color: #E0DFD4;
  font-weight: 300;
  margin: 0 auto;
   text-shadow: -1px -1px 0 #D8D9C9, 1px -1px 0 #D8D9C9, -1px 1px 0 #D8D9C9, 1px 1px 0 #D8D9C9, 0 0 2px #D8D9C9;
}

#title{
  position: absolute;
  margin-left: 0px;
  margin-top: -90px;
  letter-spacing: -4px;
  
  pointer-events: none;
}

.outline{
  -webkit-text-stroke: 10px #414619;
}

#hibiscuses{
  font-family: hibiscus; 
  font-size: 60px;
}

.minihibiscus{
  font-family: hibiscus; 
  font-size: 30px;
}

.tinyhibiscus{
  font-family: hibiscus; 
  font-size: 10px;
}

.tinyhibiscusback{
  font-family: hibiscus; 
  display: inline-block;
}


#textcontainer{
    width: 480px;
    height: 900px;
    
    margin: 90px 25px 25px 25px;
    padding: 2px;
    
    display: flex;
    flex-direction: column;
}
  
  
.fancy{
  display: inline-block;
  font-family: thorn;
  font-size: 50px;
  color: #D8D9C9;
  font-weight: 300;
  text-shadow: -3px -3px 0 #414619, 3px -3px 0 #414619, -3px 3px 0 #414619, 3px 3px 0 #414619, 0 0 4px #414619, 
               -2px -2px 0 #414619, 2px -2px 0 #414619, -2px 2px 0 #414619, 2px 2px 0 #414619, 0 0 4px #414619,
               -1px -1px 0 #414619, 1px -1px 0 #414619, -1px 1px 0 #414619, 1px 1px 0 #414619, 0 0 2px #414619;
               
  margin: 0 3px 0 3px;
  letter-spacing: 1px;
}


p{
  margin: 10px 23px -2px 23px;
  
  font-family: toxica;
  font-size: 17px;
  font-weight: 300;
  color: #D8D9C9;
  line-height: 18px;
  letter-spacing: -2px;
  
  text-shadow: -2px -2px 0 #414619, 2px -2px 0 #414619, -2px 2px 0 #414619, 2px 2px 0 #414619, 0 0 4px #414619, 
               -1px -1px 0 #414619, 1px -1px 0 #414619, -1px 1px 0 #414619, 1px 1px 0 #414619, 0 0 2px #414619;
}
  

#songholder{
  margin: 0 auto;
  font-family: toxica;
  font-size: 20px;
  font-weight: 300;
  color: #D8D9C9;
  
  width: 365px;
  
  display: flex ;
	justify-content: space-evenly;
	align-items: center;
  
  text-shadow: -2px -2px 0 #414619, 2px -2px 0 #414619, -2px 2px 0 #414619, 2px 2px 0 #414619, 0 0 4px #414619, 
               -1px -1px 0 #414619, 1px -1px 0 #414619, -1px 1px 0 #414619, 1px 1px 0 #414619, 0 0 2px #414619;
}

#text{
  margin: -8px 0 0 0;
  padding: 5px 0 0 0;
  
  
  height: 730px;
  
  overflow-x: hidden;
  overflow-y: scroll;
  
  display: flex ;
  flex-direction: column;
}

.rightie{
  text-align: right;
}


  
.marquee {
			
			display: flex ;
			white-space: nowrap ;
			
			width: 260px;
      height: 30px;
      overflow: hidden;
			
		}
		.marqueeitem {
			animation-duration: 20s ;
			animation-iteration-count: infinite ;
			animation-name: marquee-content;
			animation-timing-function: steps(30, end) ;
			padding: 3px 5px 5px 5px ;
		}
		
		
		@keyframes marquee-content {
			from {
				transform: translateX( 0% );
			}
			to {
				transform: translateX( -100% );
			}
		}
		
		

::-webkit-scrollbar {
		width: 10px;
		}

		::-webkit-scrollbar-track {
		background-color: rgba(0, 0, 0, 0.2);
		padding:2px;
		border-radius: 5px;
		}

		::-webkit-scrollbar-thumb {
		border: 3px solid #414619;
		background: #D8D9C9;
		border-radius: 5px;
		}
		
		
		
		.back{
position: absolute;
top: -15px;
margin-left: 15px;

font-family: toxica;
font-size: 25px;
color: #5B5E27;

transition: 0.1s;
}

.back:hover{
color: #414619;
}

.diaryportal{
  position: absolute;
  margin-left: 0;
  margin-top: 227px;
  

}


.secret{
  text-decoration: none;
  
  font-family: toxica;
  font-size: 17px;
  font-weight: 300;
  color: #D8D9C9;
  line-height: 18px;
  letter-spacing: -2px;
  
  text-shadow: -2px -2px 0 #414619, 2px -2px 0 #414619, -2px 2px 0 #414619, 2px 2px 0 #414619, 0 0 4px #414619, 
               -1px -1px 0 #414619, 1px -1px 0 #414619, -1px 1px 0 #414619, 1px 1px 0 #414619, 0 0 2px #414619,
               -3px -3px 0 #414619, 3px -3px 0 #414619, -3px 3px 0 #414619, 3px 3px 0 #414619, 0 0 6px #414619;
}