:root {
  --text-color:  #3d2120;
  --bg-color: #F9F5F3;
  --link-color:  #D74329;
  --bg-color2: #fff;
  --lighter-color: #FFDEDC;
	--border-color: #e98583;
}

body{
background-color: var(--bg-color);
background-image: url('img/pink.png');
margin: 0px;
color: var(--text-color);
font-family: "Century Gothic";
}

b{
  color: var(--border-color);
  }
h1{
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 1px var(--border-color));
  font-size: 1.5rem;
  color: var(--link-color);
  
  }  
  

#all{
display: flex;
}

#side{
text-align: center;
width: 123px;
background-color: var(--lighter-color);
padding: 10px;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: var(--text-color);
}

#sideicon{
border: 1px solid #e98583;
height: 120px;
}

.sideheader{
font-weight: normal;
margin: 5px 0px 0px 5px;
font-size: 20px;
font-family: 'Special Elite', serif;
}

#aboutheader{
margin: 0px 0px -5px 0px;
}

#about{
text-align: justify;
margin: 0px 0px 10px 0px;
letter-spacing: 1px;
}

.divider{
border-bottom: 1px dashed var(--text-color);
}

.button{
  border: solid 2px var(--link-color);
  border-radius: 10px;
  background: linear-gradient(var(--lighter-color), var(--border-color) 40%, var(--lighter-color));
  filter: drop-shadow(0 0.5px 0.5px gray) drop-shadow(0.5px 0.5px 1px gray);
  font-size: 17px;
  padding-top: 2px;
  padding-bottom: 0;
  margin-top: 5px;
}

#main{
width: 45%;
overflow: scroll;
overflow-x: hidden;
margin-left: 220px;
border-left: 5px solid;
  border-image: url("img/border2.png") 5 repeat round;
  background-color: var(--bg-color2);
}

#header{
background-image: url("https://64.media.tumblr.com/350091bc175d71d30171b670e666e4f5/706bea16232a4664-bb/s2048x3072/632bdbb3b2b2c0299d1319af96100ed049f81573.jpg");
background-position: center;
  background-size: cover;
height: 150px;
  border: 1px solid var(--text-color);
border-radius: 5px;
margin-top: 10px;
margin-right: 5px;
filter: sepia(55%) hue-rotate(300deg);
}

#header h1{
margin: 0px;
font-weight: normal;
color: var(--bg-color2);
font-size: 50px;
line-height: 205px;
text-transform: uppercase;
font-family: 'Special Elite', serif;
text-shadow: 1px 1px 1px var(--text-color);
filter: none;
}

.mainer,.miner{
  display:flex;
  padding:10px;
  }
.mainer{
    margin-top:10px;
  }
.text,.like,.textme{
padding: 0px 15px 0px 15px;
margin-top: -4px;
border: solid 2px var(--border-color);
  border-radius: 7px;
  overflow:scroll;
  height:366px;
  box-shadow: inset 2px 0px 7px 0px var(--lighter-color), inset -2px 0px 6px 1px var(--border-color);
}
.text{
  width: 350%;
  margin-right: 12px;
  }
.textme{
  width: 350%;
  margin-left: 12px;
  }
a,a:visited{
text-decoration: none;
color: var(--bg-color);
text-shadow: 1px 1px 1px var(--link-color);
}


a:hover, a:active{
font-style: italic;
font-weight: bold;
}

::-webkit-scrollbar{
width: 5px; 
}
    
::-webkit-scrollbar-track{
background-color: transparent;
}

::-webkit-scrollbar-thumb{
background-color: #e98583;
}

#bg{
position:fixed;
bottom: 0px;
right: 0;
opacity: 0.9;
}

#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
z-index: 2;
}