Saph/Milkii CSS

/* Custom profile code for Milkii by Vii
+ v?? honestly I lost count of how many versions
+ to peekers: no stealing, ripping or copying!
+ to owner: alter and build upon as you wish! <3 */


/* Page Styles */

* { box-sizing: border-box; }

body {
background: #381C54;
cursor: url(http://starfarerstudios.elementfx.com/cursors/Dva%20Normal%20Select.cur), progress !important;
}

a:hover, img:hover {
cursor: url(http://starfarerstudios.elementfx.com/cursors/Dva%20Help%20Select.cur), progress !important;
}

/* Custom Fonts */

@font-face {
  font-family: Mina;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/mina/v1/-nFzOGc18vARnzhp7w.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

div { font-family: Mina; }

@font-face {
  font-family: Overlock SC;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/overlocksc/v6/1cX3aUHKGZrstGAY8nwVzEGHocU.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h2 { font-family: Overlock SC !important; }

@keyframes borderlight-1 {
0%, 100% { border-color: #381C54; }
25% { border-color: #A4FEF2; }
50% { border-color: #F72C77; }
75% { border-color: #F9D6F8; }
}


/* Hidden Modules */

#content:before, #content:after, #logo, #likes, #dislikes, #hobbies, #view-wishlist, #bio img, #comment_list li img { display: none; }


/* Profile Nav Bar */

#header { height: 0 !important; overflow: visible !important; }

ul.navigation {
width: 75px;
position: absolute;
left: 0;
right: 1000px;
top: 33%;
margin: auto;
z-index: 11;
border: none;
background: transparent;
}

ul.navigation li {
width: 75px;
height: 75px;
background: #F72C77;
margin: 5px 0;
border-radius: 50%;
border: 1px solid #A4FEF2;
}

ul.navigation li a {
font: 12px Overlock SC;
padding: 40% 0;
transition: all 0.25s linear;
border-radius: 50%;
color: #A4FEF2;
}

ul.navigation li a:hover { background: radial-gradient(rgba(164, 254, 242, 0.5), rgba(164, 254, 242, 1)); color: #381C54; }


/* Profile Modules */

#wrap {
width: 900px;
height: 768px;
padding: 0;
border-radius: 0;
transition: all 0.5s linear;
z-index: 9;
background: transparent;
border-color: transparent;
margin: 25px auto;
}

#wrap:hover {
-webkit-animation: borderlight-1 1s 0.5s normal infinite;
animation: borderlight-1 1s 0.5s linear normal infinite;
}

#wrap:hover #sidebar { top: 0; border-color: transparent; } #wrap:hover #comments { bottom: 0; border-color: transparent; }

#sidebar {
background: #F72C77;
width: 100%;
height: 200px;
border: 1px solid #A4FEF2;
border-bottom: none;
position: relative;
top: 183px;
z-index: 9;
transition: all 0.5s linear;
box-shadow: 0 2px 2px 1px rgba(247, 44, 119, 0.5);
}

#sidebar h2 {
font-size: 36px;
padding: 73px 0 0 159px;
text-align: left;
float: left;
width: 50%;
color: #F9D6F8;
}

#sidebar h2::first-letter { color: #A4FEF2; }

#sidebar img {
height: 200px;
float: left;
clear: left;
position: relative;
top: -127px;
}

ul#actions {
float: right;
text-align: right;
margin: 0;
position: relative;
top: -77px;
}

ul#actions li {
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.5);
padding: 2px 25px;
margin: 2px 6px 6px;
background: #F9D6F8;
transition: all 0.25s linear;
color: #F72C77;
}

ul#actions li a { color: #381C54; }

ul#actions li:hover { background: #A4FEF2; cursor: url(http://starfarerstudios.elementfx.com/cursors/Dva%20Help%20Select.cur), progress !important; }

#content {
background: transparent;
border: none;
width: 100%;
padding: 0;
height: 100%;
border-radius: 0;
z-index: 8;
}

#bio {
background: linear-gradient(rgba(164, 254, 242, 0.5), rgba(164, 254, 242, 1));
width: calc((100%/3) - 20px);
float: left;
height: 350px;
margin: 8px 10px 5px;
border: none;
padding: 5px 15px;
box-shadow: 0 0 2px 1px #A4FEF2;
color: #381C54;
}

#bio h2 { text-align: center; color: transparent; background: url(https://i.imgur.com/yXwdBVt.png) center; }

#friendlist {
width: calc((100%/3) - 20px);
background: linear-gradient(rgba(164, 254, 242, 0.5), rgba(164, 254, 242, 1));
margin: 8px 10px 5px;
float: right;
height: 350px;
text-align: center;
border: none;
overflow-y: scroll;
box-shadow: 0 0 2px 1px #A4FEF2;
}

#friendlist h2 {
color: transparent;
background: url(https://i.imgur.com/UU28W8s.png) center;
}

div#friend_container {
width: 100px;
height: 100px;
display: inline-block;
background: url(https://i.imgur.com/8AsYxu8.png) center no-repeat;
margin: 0 10px;
}

div#friend_container a img {
width: 50px;
border-radius: 50%;
margin: 30px 20px;
}

#comments {
float: left;
width: calc(100%);
background: #F72C77;
margin: 2px 0 0;
border: 1px solid #A4FEF2;
border-top: none;
height: 202px;
padding: 0;
text-align: center;
position: relative;
bottom: 183px;
transition: all 0.5s linear;
box-shadow: 0 -2px 2px 1px rgba(247, 44, 119, 0.5);
}

#comments h2 {
display: none;
}

#comment_list {
float: left;
width: 80%;
height: calc(100%);
overflow-x: auto;
}

#comment_list li {
width: calc((100% / 3) - 10px);
float: left;
margin: 5px;
height: calc(100% - 10px);
display: inline-block;
background: #F9D6F8;
color: transparent;
padding: 5px;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.5);
transition: all 0.25s linear;
}

#comment_list li:nth-child(1n):hover {
background: rgba(56, 28, 84, 0.5);
}

#comment_list li:nth-child(3n):hover {
background: rgba(164, 254, 242, 0.5);
}

#comment_list li:nth-child(2n):hover {
background: transparent;
}

#comment_list li a { float: left; width: 100%; text-align: center; }

#comment_list li a::first-letter { font-size: 20px; color: #A4FEF2; }

#comment_list li p {
color: #381C54;
padding: 5px;
width: 100%;
height: calc(100% - 30px);
}

a.delete.small {
float: left;
width: 100%;
height: 19px;
margin: auto 0 0 auto;
text-transform: lowercase;
text-align: center;
letter-spacing: 0.05em;
font-size: 10px;
}

#comment_list li p small {
float: left;
width: 100%;
margin: auto;
text-align: center;
visibility: hidden;
}

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

#comments form {
float: left;
width: 20%;
padding: 15px;
}

#comments form > span { font-size: 9px; float: left; width: 100%; text-align: right !important; color: #A4FEF2; font-style: italic; }

#comments form > textarea {
width: 100%;
height: 125px;
margin-top: -10px;
background: rgba(56, 28, 84, 1) url(https://i.imgur.com/gyG2OAf.png) no-repeat;
background-size: 100%;
background-position: 50% 50%;
color: #A4FEF2;
font: 12px Mina;
letter-spacing: 0.05em;
border-color: rgba(56, 28, 84, 1);
}

#load-more, #comment-button {
margin: 5px auto 0;
padding: 0px 10px;
font: 12px Mina;
background: #F9D6F8;
border: none;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.5);
color: #381C54;
transition: all 0.25s linear;
}

#comment-button { width: 100%; }

#load-more:hover, #comment-button:hover { background: #A4FEF2; }

/* Floating Modules */

#generic_5 {
position: absolute;
width: 297.33px;
height: 350px;
background: url(https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=125692740) center;
background-size: cover;
top: 256px;
left: 0px;
right: 0;
margin: auto;
z-index: 1;
box-shadow: 0 0 2px 1px #A4FEF2;
}

#generic_4 {
width: 75%;
height: 75%;
background: url(https://i.imgur.com/tP7uuOx.png?1);
background-size: cover;
position: fixed;
bottom: 0;
right: 0;
z-index: -1;
}

#generic_3 {
position: absolute;
left: 0;
right: 0px;
top: 248px;
background: rgba(249, 214, 248, 0.25);
width: 896px;
height: 365px;
margin: auto;
}


/* end of line */

/* These are notes and you don't have to copy these over!
You can change the background URL of "#generic_5" to your desired image; ~300px by ~350px works best, but the code is designed to shrink things to fit while preserving the aspect ratio. */