Fawn 3.1 CSS

/* Custom profile code for Fawn by Vii <3
   + Dawn Dream v.1
   + designed and tested in Chrome
   + not tested or guaranteed on mobile ~ */

/* Fonts */
@font-face {
  font-family: Amatic SC;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/amaticsc/v9/DPPfSFKxRTXvae2bKDzp5FtXRa8TVwTICgirnJhmVJw.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;
}

/* Animations */
@keyframes marquee {
    0%   { top: 110%; }
    100% { top: -250%; }
}

@-webkit-keyframes marquee {
    0%   { top: 100%; }
    100% { top: -100%; }
}

@-moz-keyframes marquee {
    0%   { top: 100%; }
    100% { top: -100%; }
}

@keyframes backlight {
0%, 100% { border-color: #FBCDE4; box-shadow: 0 0 10px 4px #FBCDE4; }
25% { border-color: #E7CBFF; box-shadow: 0 0 10px 4px #E7CBFF; }
50% { border-color: #D3FFE1; box-shadow: 0 0 10px 4px #D3FFE1; }
75% { border-color: #BDBDBD; box-shadow: 0 0 10px 4px #BDBDBD; }
}

@-webkit-keyframes backlight {
0%, 100% { border-color: #FBCDE4; box-shadow: 0 0 10px 4px #FBCDE4; }
25% { border-color: #E7CBFF; box-shadow: 0 0 10px 4px #E7CBFF; }
50% { border-color: #D3FFE1; box-shadow: 0 0 10px 4px #D3FFE1; }
75% { border-color: #BDBDBD; box-shadow: 0 0 10px 4px #BDBDBD; }
}

@-moz-keyframes backlight {
0%, 100% { border-color: #FBCDE4; box-shadow: 0 0 10px 4px #FBCDE4; }
25% { border-color: #E7CBFF; box-shadow: 0 0 10px 4px #E7CBFF; }
50% { border-color: #D3FFE1; box-shadow: 0 0 10px 4px #D3FFE1; }
75% { border-color: #BDBDBD; box-shadow: 0 0 10px 4px #BDBDBD; }
}

@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); }
}

/* Hidden Modules & Header Adjustment */

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

#header { visibility: hidden; overflow: visible !important; }

#logo, .navigation { visibility: visible; }

/* Page Styles */

* {
box-sizing: border-box;
cursor: url(http://aldonydh.elementfx.com/src/cursor_small.ico), default !important;
}

body {
background:  #D3EEFF;
}

/* Font Styles */

h2 {
font-family: Amatic SC;
font-size: 28px;
}

a {
transition: all .5s linear;
text-shadow: 0 0 1px;
color: #242424;
}

a:hover {
color: rgb(211, 255, 255);
}

#bio a {
color: rgb(211, 255, 255);
font-family: Amatic SC;
font-size: 22px;
}

/* Profile Modules */

/* + Nagivation Bar */
ul.navigation {
position: absolute;
z-index: 5;
margin: auto;
width: 499px;
left: 657px;
right: 0px;
top: 267px;
transform: rotate(-90deg);
border-radius: 0;
border: none;
background: transparent;
}

ul.navigation li {
width: 100%;
text-align: left;
font-family: Amatic SC;
font-size: 20px;
margin: 4px auto;
box-shadow: 0px 0px 2px 1px rgba(38, 38, 38, 0.5);
}

ul.navigation li a {
transition: all .5s linear;
color: #242424;
border-left: 1px solid #242424;
}

ul.navigation li a:hover {
background: transparent;
}

#top-nav-home, #top-nav-forum, #top-nav-shops, #top-nav-search {
transition: all .5s linear;
}

#top-nav-home a {
background: rgba(251, 205, 228, 0.7);
}

#top-nav-home a:hover {
background: transparent;
color: #242424;
padding-left: 50px;
}

#top-nav-forum a {
background: rgba(231, 203, 255, 0.7);
}

#top-nav-forum a:hover {
color: #242424;
background: transparent;
padding-left: 50px;
}

#top-nav-shops a {
background: rgba(211, 255, 255, 0.7);
}

#top-nav-shops a:hover {
background: transparent;
color: #242424;
padding-left: 50px;
}

#top-nav-search a {
background: rgba(189, 189, 189, 0.7);
}

#top-nav-search a:hover {
background: transparent;
padding-left: 50px;
color: #242424;
}

#logo {
position: absolute;
margin: auto;
left: 0px;
right: 0px;
bottom: 40px;
opacity: 0.5;
}


/* + Profile Content */
#wrap {
width: 100%;
height: 100%;
padding: 0;
position: absolute;
top: 0px;
background: transparent;
border: none;
}

/* + Sidebar */

#sidebar {
background: linear-gradient(rgba(211, 238, 255, 0.7), rgba(231, 203, 255, 0.7));
border: 1px solid #242424;
box-shadow: 0 0 5px 2px #BDBDBD;
position: absolute;
margin: auto;
left: 0px;
right: 665px;
top: 100px;
width: 180px;
height: 270px;
z-index: 1;
}

#sidebar h2 {
position: fixed;
font-size: 72px;
text-align: center;
margin: auto;
right: 240px;
bottom: 40px;
color: #242424;
text-shadow: 2px 0px 2px #BDBDBD;
}

#sidebar img {
mix-blend-mode: multiply;
transition: all .5s linear;
}

#sidebar img:hover {
mix-blend-mode: normal;
}

#send-message, #view-topics, #view-posts {
position: absolute !important;
animation: none !important;
width: 100%;
background: pink;
left: 0px;
padding: 5px;
border: 1px solid #242424;
box-shadow: 0 0 5px 2px #BDBDBD;
}

#send-message {
top: 283px;
background: rgba(231, 203, 255, 0.7);
font-family: Amatic SC;
font-weight: bold;
letter-spacing: 5px;
font-size: 16px;
}

#view-topics {
top: 332px;
background: linear-gradient(rgba(231, 203, 255, 0.7), rgba(251, 205, 228, 0.7));
font-family: Amatic SC;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}

#view-posts {
top: 376px;
background: rgba(251, 205, 228, 0.7);
font-family: Amatic SC;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}

#likes strong, #dislikes strong, #hobbies strong {
float: left;
width: 100%;
font-family: Amatic SC;
font-size: 18px;
text-shadow: 2px 0px 1px rgba(36, 36, 36, 0.5);
}

#actions {
font-size: 11px;
margin: auto;
margin-top: 149px;
height: 75px;
background: rgba(255, 205, 228, 0.7);
border: 1px solid #242424;
box-shadow: 0 0 5px 2px #BDBDBD;
overflow: hidden;
text-align: center;
width: 100%;
z-index: 1;
}

#actions li {
position: relative;
animation: marquee 30s linear infinite;
-webkit-animation: marquee 30s linear infinite;
-moz-animation: marquee 30s linear infinite;
}

#actions:hover li {
animation-play-state: paused;
}

#content {
width: 450px;
height: 500px;
margin: auto;
position: absolute;
left: 0px;
right: 0px;
top: 100px;
padding: 0;
border-radius: 0;
background: linear-gradient(rgba(211, 238, 255, 0.7), rgba(231, 203, 255, 0.7), rgba(251, 205, 228, 0.7));
border: 1px solid #242424;
overflow-y: hidden;
box-shadow: 0 0 5px 2px #BDBDBD;
}

/* + About Me */

#bio {
height: 90%;
padding: 5px;
overflow-y: auto;
font-family: Verdana;
z-index: 1;
}

#bio i {
font-size: 11px;
text-shadow: 0 0 1px;
}

#bio strong {
font-size: 22px;
font-family: Amatic SC;
font-style: normal !important;
text-shadow: 1px 1px 2px #242424;
color: #BDBDBD;
}

#bio img {
display: none;
}

/* + Comments */

#comments {
color: transparent;
height: 10%;
transition: all .7s linear;
z-index: 1;
}

#comments h2 {
text-align: center;
letter-spacing: 7px;
color: #242424;
padding: 3px;
transition: all .7s linear;
text-shadow: 4px 0px #D3EEFF;
}

#comments:hover {
height: 100%;
overflow-y: scroll;
transform: translateY(-91%);
background: #242424;
}

#comments:hover h2 {
color: #E7CBFF;
text-shadow: 4px 0px #121212;
}

#comments img {
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-moz-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transform: scale(0.9);
}

#comment_list li {
margin: 3px auto;
transition: all .5s linear;
box-shadow: inset 0 0 3px 1px transparent;
}

#comment_list li:hover {
background: #D3EEFF;
box-shadow: inset 0 0 3px 1px rgba(38, 38, 38, 0.5);
}

#comment_list li p {
color: #BDBDBD;
font-size: 11px;
}

a.delete.small {
font-family: Amatic SC;
font-size: 14px;
width: 100%;
float: right;
text-align: center;
}

#comment_list li:hover p {
color: #242424;
}

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

#comment_list li p small > small {
visibility: visible;
}

#load-more, #comment-button {
width: 100%;
transition: all .3s linear;
margin: 2px auto;
border: none;
font-family: Amatic SC;
font-size: 18px;
}

#load-more {
background: linear-gradient(#D3EEFF, #E7CBFF);
}

#comment-button {
margin-top: -3px;
background: #FBCDE4;
}

#comment-button:hover {
box-shadow: inset 0 0 5px 2px rgba(38, 38, 38, 0.7);
background: #FBCDE4;
color: #242424;
}

#comments form span { display: none; }

#load-more:hover {
box-shadow: inset 0 0 5px 2px rgba(38, 38, 38, 0.7);
}

textarea {
font-family: Verdana;
background: linear-gradient(#FBCDE4, #E7CBFF);
font-size: 11px;
width: 100%;
margin: 5px 0;
}

/* Floating Images */

/* + Bio Pic Border */
#generic_3 {
background: url(http://i1201.photobucket.com/albums/bb346/Mandy_Melancholy/16700230_1152110631552898_7123_zpswyncq8ob.png);
width: 274px;
height: 272px;
position: fixed;
margin: auto;
right: 30px;
bottom: 30px;
transform: scale(0.7);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-moz-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
z-index: 2;
}

/* Bio Pic */
#generic_4 {
background: transparent;
width: 274px;
height: 272px;
position: fixed;
margin: auto;
right: 30px;
bottom: 30px;
transform: scale(0.5) rotate(-45deg);
border: 1px solid transparent;
animation: backlight 5s linear infinite;
z-index: 0;
}

/* + Gaian */

#generic_5 {
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;
right: 198px;
top: 475px;
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;
z-index: 3;
}

#generic_5:hover {
	opacity: 0.9;
}

/* End Profile Code */