Fawn V2 CSS

/* Custom profile code for Fawn by Vii <3 */

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

::-webkit-scrollbar-track {
box-shadow: 0 0 2px 2px rgba(71, 38, 59, 0.3) inset;
}

::-webkit-scrollbar-thumb {
background: url(http://i.imgur.com/6BYWI1z.png) #FFF;
mix-blend-mode: multiply;
}

@font-face {
  font-family: Alex Brush;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/alexbrush/v6/IdwaSrUcr-IskDo5YUNTVfk_vArhqVIZ0nv9q090hN8.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: Philosopher;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/philosopher/v8/OttjxgcoEsufOGSINYBGLY4P5ICox8Kq3LLUNMylGO4.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

#content:before, #content:after, #friendlist, #bio h2 { display: none; }

#header { visibility: hidden; }

#logo, ul.navigation { visibility: visible; }

ul.navigation {
z-index: 1;
position: absolute;
margin: auto;
left: 586px;
top: 120px;
border-radius: 0;
box-shadow: 0 0 5px 2px rgba(71, 38, 59, 0.5);
right: 0px;
width: 200px;
height: 125px;
box-sizing: border-box;
border: 1px solid;
background: url(http://i.imgur.com/WCT5KaH.png);
padding: 5px;
}

ul.navigation li {
width: 100%;
background: url(http://i.imgur.com/6BYWI1z.png) #FFF;
mix-blend-mode: multiply;
-webkit-mix-blend-mode: multiply;
-moz-mix-blend-mode: multiply;
-o-mix-blend-mode: multiply;
margin: 2.5px auto;
display: block;
height: 20%;
box-sizing: border-box;
}

ul.navigation li a {
text-align: right;
font-family: Philosopher;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
letter-spacing: 5px;
color: #47263B;
text-shadow: 0 0 2px #47263B;
background: #FFF;
}

ul.navigation li a:hover {
background: transparent;
letter-spacing: 10px;
}

#top-nav-home a {
background-image: linear-gradient(#C9B987, #C9B987);
background-repeat: no-repeat;
background-position: 100% 50%;
background-size: 0% 100%;
}

#top-nav-forum a {
background-image: linear-gradient(#8E5757, #8E5757);
background-repeat: no-repeat;
background-position: 100% 50%;
background-size: 0% 100%;
}

#top-nav-shops a {
background-image: linear-gradient(#6B4553, #6B4553);
background-repeat: no-repeat;
background-position: 100% 50%;
background-size: 0% 100%;
}

#top-nav-search a {
background-image: linear-gradient(#47263B, #47263B);
background-repeat: no-repeat;
background-position: 100% 50%;
background-size: 0% 100%;
}

#top-nav-home:hover a, #top-nav-forum:hover a, #top-nav-search:hover a, #top-nav-shops:hover a { background-size: 100% 100%; }

body {
cursor: url(http://aldonydh.elementfx.com/src/cursor_small.ico), help !important;
background: url(http://imgur.com/6BYWI1z.jpg);
}

a {
color: #6B4553;
text-shadow: 0 0 2px;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

a:hover {
color: #47263B;
text-decoration: line-through;
}

h2 {
font-family: Alex Brush;
}

#wrap {
width: 100%;
height: 100%;
border: none;
background: transparent;
position: absolute;
top: 0px;
}

#content {
width: 295px;
height: 440px;
box-sizing: border-box;
background: transparent;
border: none;
position: absolute;
margin: auto;
left: 7px;
right: 0px;
top: 120px;
overflow: hidden;
z-index: 1;
}

#generic_2 {
width: 295px;
height: 450px;
background: url(http://i.imgur.com/LWfuhLR.png);
position: absolute;
margin: auto;
left: 37.5px;
right: 0px;
top: 120px;
border: 1px solid #47263B;
box-shadow: 0 0 5px 2px rgba(71, 38, 59, 0.5);
box-sizing: border-box;
}

#sidebar {
position: absolute;
margin: auto;
left: 557px;
right: 0px;
top: 265px;
height: 300px;
width: 200px;
background: url(http://i.imgur.com/caHQvMf.png);
box-sizing: border-box;
border: 1px solid rgb(71, 38, 59);
box-shadow: 0 0 5px 2px rgba(71, 38, 59, 0.5);
}

#sidebar img {
margin: auto;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

#sidebar img:hover {
filter: brightness(120%);
-webkit-filter: brightness(120%);
-moz-filter: brightness(120%);
-o-filter: brightness(120%);
}

#sidebar h2 {
position: absolute;
width: 100%;
top: -222px;
left: -170px;
margin: auto;
font-size: 72px;
z-index: 1;
}

ul#actions {
width: auto;
position: absolute;
}


ul#actions li strong { display: none; }

ul#actions li {
box-sizing: border-box;
}

li#hobbies, li#likes,  li#dislikes {
display: inline-block;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
width: 450px;
height: 75px;
position: absolute;
border-radius: 0 !important;
top: -238px;
box-shadow: 0 0 5px 2px rgba(71, 38, 59, 0.5 );
box-sizing: border-box;
padding: 5px;
transition: all .5s ease;
color: transparent;
}

li#likes:hover {
background: url(http://i.imgur.com/zZaCkiS.png) #FFF;
mix-blend-mode: multiply;
-webkit-mix-blend-mode: multiply;
-moz-mix-blend-mode: multiply;
-o-mix-blend-mode: multiply;
color: #FFF;
text-shadow: 0 0 3px #47263B;
}

li#likes {
right: 444px;
background: url(http://i.imgur.com/zZaCkiS.png);
}

li#dislikes {
background: url(http://i.imgur.com/KAPPLvo.png) center;
right: 340px;
}

li#dislikes:hover {
background: url(http://i.imgur.com/KAPPLvo.png) #FFF;
mix-blend-mode: multiply;
-webkit-mix-blend-mode: multiply;
-moz-mix-blend-mode: multiply;
-o-mix-blend-mode: multiply;
color: #FFF;
text-shadow: 0 0 3px #47263B;
}

li#hobbies {
background: url(http://i.imgur.com/mUE5hlX.png);
right: 237px;
}

li#hobbies:hover {
background: url(http://i.imgur.com/mUE5hlX.png) #FFF;
mix-blend-mode: multiply;
-webkit-mix-blend-mode: multiply;
-moz-mix-blend-mode: multiply;
-o-mix-blend-mode: multiply;
color: #FFF;
text-shadow: 0 0 3px #47263B;
}

li#send-message {
position: absolute;
width: 198px;
top: -447px;
left: -378px;
text-align: center;
font-family: Philosopher;
}

li#view-topics {
position: relative;
font-size: 9px;
left: 127px;
top: -13px;
color: #8E5757;
text-shadow: 0 0 1px #47263B;
}

li#view-posts {
font-size: 9px;
color: #8E5757;
text-shadow: 0 0 1px #47263B;
}

#bio {
width: 100%;
height: 95%;
border: none;
box-sizing: border-box;
padding: 5px;
overflow-y: scroll;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
background: rgba(71, 38, 59, 1);
opacity: 0;
color: #C9B987;
font-family: Philosopher;
border: 1px solid #C9B987;
}

#bio a {
color: #DFD3BD;
}

#bio strong {
text-shadow: 0 0 2px;
font-style: normal;
font-family: Alex Brush;
font-size: 20px;
color: #8E5757;
}

#bio:hover {
opacity: 1;
}

#bio img {
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
position: relative;
width: 274px;
left: -15px;
height: 272px;
transform: scale(0.7);
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
-moz-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
-o-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
margin: auto;
}

#bio img:hover {
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
}

#comments {
width: 100%;
height: 100%;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
position: relative;
background: transparent;
border: none;
color: transparent;
}

#comments:hover {
transform: translateY(-404px);
-webkit-transform: translateY(-404px);
-moz-transform: translateY(-404px);
-o-transform: translateY(-404px);
overflow-y: scroll;
}

#comments:hover #comment_list { opacity: 1; }

#comments:hover h2, #comments:hover #comment_list li {
background: #C9B987;
}

#comments:hover h2 {
border: 1px solid #47263B;
}

#comments h2 {
text-align: center;
width: 100%;
font-size: 26px;
color: #6B4553;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
box-sizing: border-box;
border: 1px solid transparent;
}

#comment_list img {
width: 30px;
height: 30px;
border-radius: 50%;
}

#comment_list {
box-sizing: border-box;
width: 100%;
opacity: 0;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

#comment_list li {
margin: 5px auto;
box-sizing: border-box;
padding: 2px;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
border: 1px solid #47263B;
}

#comment_list li:nth-child(2n) {
background: #8E5757 !important;
}

#comment_list li:nth-child(2n) p {
color: #C9B987;
}

#comment_list li p {
font-family: Verdana;
font-size: 11px;
color: #8E5757;
}

#comment_list li p small {
float: right;
width: 100%;
text-align: right;
visibility: hidden;
}

#comment_list li p small > small { visibility: visible; padding-right: 10px; }

#comment_list li a {
color: #47263B !important;
}

a.delete.small {
font-size: 9px;
font-style: italic;
text-transform: lowercase;
width: 100%;
text-align: center !important;
float: right;
}

#comments form{
width: 100%;
}

textarea {
background: url(http://i.imgur.com/6BYWI1z.png) #FFF;
mix-blend-mode: multiply;
-webkit-mix-blend-mode: multiply;
-moz-mix-blend-mode: multiply;
-o-mix-blend-mode: multiply;
border: 1px solid #47263B;
box-sizing: border-box;
margin: auto;
width: 100%;
height: 40px;
color: #6B4553;
font-family: Verdana;
}

#comments form span { display: none; }

#comment-button, #load-more {
font-size: 9px;
padding: 2px 0;
width: 50%;
border: none;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

#load-more:hover, #comment-button:hover {
text-decoration: line-through;
}

#load-more {
float: right;
position: relative;
top: 61px;
background: #DFD3BD;
color: #6B4553;
}

#load-more:hover {
color: #DFD3BD;
background: #6B4553;
}

#comment-button {
color: #DFD3BD;
background: #6B4553;
}

#comment-button:hover {
background: #DFD3BD;
color: #6B4553;
}

/* floating images */

#generic_4 {
position: absolute;
background: url(http://a2.cdn.gaiaonline.com/dress-up/avatar/ava/4a/fb/69538ab9c5fb4a_flip.png?t=1491006398_6.00_11);
width: 120px;
height: 150px;
margin: auto;
left: 800px;
right: 0px;
top: 365px;
animation: float 5s alternate infinite;
animation-timing-function: ease-in-out;
-webkit-animation: float 5s alternate infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation: float 5s alternate infinite;
-moz-animation-timing-function: ease-in-out;
-o-animation: float 5s alternate infinite;
-o-animation-timing-function: ease-in-out;
opacity: 0.7;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

#generic_4:hover {
	opacity: 0.9;
}

@keyframes float {
from { transform: translateY(0px); }
to { transform: translateY(30px); }
}

@-webkit-keyframes float {
from { -webkit-transform: translateY(0px); }
to { -webkit-transform: translateY(30px); }
}

@-moz-keyframes float {
from { -moz-transform: translateY(0px); }
to { -moz-transform: translateY(30px); }
}

@-o-keyframes float {
from { -o-transform: translateY(0px); }
to { -o-transform: translateY(30px); }
}

/* end floating images */

/* end profile code */