DangerousWoman CSS

/* Custom profile code for DangerousWoman by Vii */

/* latin */
@font-face {
  font-family: Zeyada;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/zeyada/v6/dcE9P1va-09wPqxMFAN3vw.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;
}

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

::-webkit-scrollbar-track {
background: rgba(186, 216, 197, 0.5);
box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
background: rgba(186, 216, 197, 0.5);
}

ul.navigation {
position: absolute;
width: 100%;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
border: none;
border-radius: 0;
background: transparent;
}

ul.navigation li {
width: 25%;
}

ul.navigation li a {
transition: all .3s linear;
color: rgb(186, 216, 197);
}

ul.navigation li a:hover {
background: transparent;
color: #FFF;
text-shadow: 0 0 2px;
}

#top-nav-home, #top-nav-forum, #top-nav-shops, #top-nav-search { transition: all .3s linear; background: rgba(186, 216, 197, 0.5);}

#top-nav-home:hover {
background: rgba(17, 3, 44, 0.5);
transform: translateY(12px);
-webkit-transform: translateY(12px);
-moz-transform: translateY(12px);
}

#top-nav-forum:hover {
background: rgba(84, 20, 59, 0.5);
transform: translateY(12px);
-webkit-transform: translateY(12px);
-moz-transform: translateY(12px);
}

#top-nav-shops:hover {
background: rgba(8, 33, 85, 0.5);
transform: translateY(12px);
-webkit-transform: translateY(12px);
-moz-transform: translateY(12px);
}

#top-nav-search:hover {
background: rgba(186, 216, 197, 0.5);
transform: translateY(12px);
-webkit-transform: translateY(12px);
-moz-transform: translateY(12px);
}

#content:before, #content:after { display: none; }

#header { visibility: hidden; } .navigation, #logo { visibility: visible; }

body {
background: url(http://i.imgur.com/NLNhd5z.jpg);
background-attachment: fixed;
background-size: cover;
}

a {
color: #BAD8C5;
font-style: italic;
transition: all .3s linear;
font-family: Zeyada;
font-size: 14px;
}

a:hover {
color: #FFF;
text-shadow: 0 0 2px;
}

h2 {
font-size: 14px;
text-align: center;
font-family: Zeyada;
}

#wrap {
width: 100%;
height: 100%;
background: transparent;
border: none;
}

#sidebar, #bio, #comments, #friendlist { border: none; }


#logo {
position: absolute;
bottom: 5px;
left: 0px;
opacity: 0.5;
}

#sidebar {
position: absolute;
background: rgba(186, 216, 197, 0.5);
width: 200px;
height: 300px;
text-align: center;
left: 0px;
right: 400px;
margin: auto;
z-index: 1;
box-sizing: border-box;
border-left: 1px solid rgb(186, 216, 197);
border-top: 1px solid rgb(186, 216, 197);

transition: all .5s linear;}

#sidebar:hover {
background: rgba(84, 20, 59, 0.5);
border-top: 1px solid rgba(84, 20, 59, 0.5);
border-left: 1px solid rgba(84, 20, 59, 0.5);
}

#sidebar h2 {
position: absolute;
font-size: 48px;
top: -50px;
left: 25%;
color: #54143B;
}

#sidebar img {
margin-top: 15px;
}

#actions {
position: relative;
top: -291px;
background: rgba(84, 20, 59, 0.5);
height: 300px;
transition: all .5s linear;
opacity: 0;
border: 1px solid transparent;
border-right: none;
box-sizing: border-box;
color: rgba(186, 216, 197, 0.5);
}

#actions strong {
width: 100%;
float: left;
color: rgb(186, 216, 197);
font-style: italic;
font-family: Zeyada;
}

#actions li {
margin: 6px auto;
}

#sidebar:hover #actions {
transform: translateX(-200px);
opacity: 1;
border: 1px solid rgb(84, 20, 59);
border-right: none;
}

#content {
position: absolute;
margin: auto;
left: 0px;
right: 0px;
width: 800px;
height: 400px;
background: transparent;
border: none;
}

#bio {
box-sizing: border-box;
width: 200px;
height: 301px;
margin: auto;
position: absolute;
background: rgba(186, 216, 197, 0.5);
top: 0px;
left: 0px;
right: 0px;
box-sizing: border-box;
overflow: visible;
z-index: 2;
font-size: 11px;
padding: 5px;
border-top: 1px solid rgb(186, 216, 197);
transition: all .5s linear;
color: rgb(186, 216, 197);
}

#bio:hover {
background: rgba(17, 3, 44, 0.5);
border-top: 1px solid rgb(17, 3, 44);
}

#bio img {
width: 200px;
position: absolute;
left: 0px;
top: 77px;
transition: all .5s linear;
box-sizing: border-box;
border: 1px solid rgb(186, 216, 197);
mix-blend-mode: multiply;
opacity: 0.8;
}

#bio img:hover {
opacity: 1;
border: 1px solid rgb(17, 3, 44);
}

#bio h2, #comments h2, #friendlist h2 { display: none; }

#friendlist {
background: rgba(186, 216, 197, 0.5);
width: 200px;
position: absolute;
margin: auto;
left: 400px;
right: 0px;
box-sizing: border-box;
height: 300px;
top: 0px;
overflow-y: auto;
border-top: 1px solid rgb(186, 216, 197);
border-right: 1px solid rgb(186, 216, 197);
transition: all .5s linear;
}

#friendlist:hover {
border-top: 1px solid rgb(8, 33, 85);
border-right: 1px solid rgb(8, 33, 85);
background: rgba(8, 33, 85, 0.5);
}

#friendlist img {
border-radius: 50%;
width: 54px;
transition: all .3s linear;
box-shadow: 1px 1px 2px 1px rgba(8, 33, 35, 0.5);
}

#friendlist img:hover {
border-radius: 25%;
box-shadow: 1px 1px 2px 1px rgba(8, 33, 35, 0.5);
transform: scale(0.85) rotate(-45deg);
}

#comments img {
transform: scale(0.85);
border-radius: 50%;
position: absolute;
left: 45%;
margin-top: 17px;
transition: all .3s linear;
}

#comments img:hover {
border-radius: 25%;
}

#comments {
position: absolute;
margin: auto;
width: 600px;
top: 300px;
left: -1px;
right: 0px;
background: rgba(186, 216, 197, 0.5);
height: 200px;
overflow-y: scroll;
box-sizing: border-box;
text-align: center;
color: transparent;
border: 1px solid rgb(186, 216, 197);
border-top: none;
transition: all .5s linear;
}

#comments:hover {
background: rgba(17, 3, 44, 0.5);
border: 1px solid rgb(17, 3, 44);
border-top: none;
}

#comments:hover #comment_list li {
border-bottom: 1px solid rgba(17, 3, 44, 0.5);
}

#comments:hover textarea {
border: 1px solid rgb(17, 3, 44);
background: rgba(17, 3, 44, 0.5);
}

#comments:hover #comment-button {
background: rgba(17, 3, 44, 0.5);
color: rgba(186, 216, 197, 0.5);
}

#comment_list li {
transition: all .5s linear;
border-bottom: 1px solid rgba(186, 216, 197, 0.5);
}

#comment_list li a {
float: left;
width: 100%;
color: rgb(84, 20, 59) !important;
font-size: 20px;
}

a.delete.small {
font-size: 10px;
font-style: italic;
font-family: Garamond;
font-size: 10px !important;
}

#comment_list li p {
margin-top: 45px;
color: rgb(186, 216, 197);
box-sizing: border-box;
}

#comments form span { display: none; }

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

#comment_list li p small > small {
visibility: visible;
color: rgb(17, 3, 44);
}

#comment-button, #load-more {
font-size: 11px;
transition: all .5s linear;
z-index: 3;
}

#load-more {
width: 100%;
background: transparent;
border: none;
font-style: italic;
text-transform: lowercase;
color: #082155;
}

#comment-button {
position: relative;
left: 5%;
top: 5px;
border: none;
border-radius: 25%;
padding: 5px;
color: rgb(186, 216, 197);
background: rgba(186, 216, 197, 0.5);
}

#comment-button:hover {
box-shadow: 1px 1px 2px 1px;
text-shadow: 1px 1px 1px rgb(17, 3, 44);
}

textarea {
font-family: Arial;
background: transparent;
border: 1px solid rgb(186, 216, 197);
color: rgb(186, 216, 197);
transition: all .5s linear;
}

/*  end profile code */