body {
 background: url('bg.jpg');
 background-repeat: repeat-x;
 background-color: #525969;
 color: #404348;
 font: 12px arial;
 padding-bottom:25px;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background-color: #979797;
}
::-webkit-scrollbar-thumb {
    background-color: #82e6db;
}
h1 {
 border-bottom: #82e6db solid 25px;
 color: #ffffff;
 font: 30px georgia,simhei;
 font-style: italic;
 height: 27px;
 letter-spacing: -3;
 margin-bottom: 0px;
 padding-left: 50px;
 padding-right: 0px;
 text-transform: lowercase;
 text-align: right;
 width: 657px;
}
h2 {
 background-color: #FFCED4;
 color: #ffffff;
 font: 12px arial;
 letter-spacing: 1px;
 margin-bottom: 0px;
 text-align: center;
 text-transform: uppercase;
}
#border {
	border: 8px solid #fff;
}
blockquote {
 background-color: #fff;
 border-left: 10px solid #f2b5cb;
 color: #a1a1a1;
 font: 12px courier new;
 padding: 5px;
 text-align: center;
}
#image {
 position: absolute;
 left:0px;
 top: 0px;
}
#content {
 width: 600px;
 height: auto;
 position: absolute;
 top: 300px;
 left: 20px;
}
#sitetitle {
 color: #fff;
 font: 40px century gothic;
 letter-spacing: -3px;
 position: absolute;
 top: 150px;
 left: 505px;
 text-transform: lowercase;
}
div#nav1 {
 width: 150px; 
 height: auto; 
 position: absolute;
 top:175px;
 left: 420px;
 padding: 5px;
 }
div#nav2 {
 width: 150px; 
 height: auto; 
 position: absolute;
 top:175px;
 left: 575px;
 padding: 5px;
 }
 
#underline{
  position: relative;
}
#underline::before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #e585a9;
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) and (pointer: fine) {
  #underline:hover::before{
    left: 0;
    right: auto;
    width: 100%;
  }
 
#effect > a {
	padding: 0 5px;
	box-shadow: inset 0 0 0 0 white;
	transition: all 0.25s ease-in-out 0s;
	&:hover{
		box-shadow: inset 0 300px 0 0 white;
		color: $mainColor;
	}
}
 
a#navi, a#navi:active, a#navi:visited, div#navi {
 background: #none;
 border-bottom: 1px solid #ffffff;
 color: #639399;
 display: block;
 font: 9.5px century gothic;
 margin-bottom: 1px;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
}
a#navi:hover, div#navi:hover {
 background: #5b6769;
 color: #FFCED4;
 display: block;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
}
a, a:active, a:visited {
 border-bottom: 1px;
 color: #4398b8;
 font: 11.5px courier new;
 font-weight: bold;
}
a:hover {
 color: #e585a9;
 font-weight: bold;
 text-decoration: none;
}
#main {
 border-right: 2px dashed #f0f0f0;
 background: #f3f3f3;
 padding: 15px;
 margin-bottom: 15px;
 width: 675px;
 padding-bottom:25px;
}
b {color: #6a86cd;}
 i {color: #6bb0a4;}
 u {border-bottom: 1px dashed #e585a9; color: #e585a9;}
 s {color: #c5ac49;
}
input, option, select, textarea {
 background-color: #fdfdfd;
 border: 1px solid #5b6769;
 color: #a1a1a1;
 font: 9px courier new;
 padding: 3px;
}