Nephila CSS

--------------------------------------------- BIO TEMPLATE -----------------------------------------

This is a template for your BIO content.
Do not place this in your CSS. Links, [u], [b], [i], and spoilers have all been styled. c:

[u][size=20]Title Here (optional)[/size][/u]
[url=https://www.voltra.us/voltie/messages/create_message?to=Nephila]Send Message[/url] | [url=https://www.voltra.us/voltie/friends/add_friend/nephila]Add Friend[/url] | [url=https://www.voltra.us/voltie/trades/request/nephila]New Trade[/url]

Text goes here. Text text text text text text text text text text text text text text text text text.

[spoiler=Spoiler Name]Spoiler Content[/spoiler]

-------------- end bio template - everything below this goes into your profile CSS ------------------

/*** Custom Profile Build for Nephila
+ by: Vii
+ time logged: ~9 hrs
+ do not rip / copy / steal
+ owner is free to alter as they wish
+ pls leave this credit intact <3 ***/
/************************************/
/* Custom Fonts */

@font-face {
  font-family: Cuprum;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/cuprum/v9/dg4k_pLmvrkcOkBNJutC.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;
}

@font-face {
  font-family: Parisienne;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/parisienne/v5/E21i_d3kivvAkxhLEVZpQyhwDw.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;
}


/* Hidden Elements */

li#settings, li#shops, li#donate, li#signout, div.content_header, div.voltie_actions, section.voltie_likes, section.voltie_dislikes, section.voltie_hobbies, section.voltie_bio h3, section.voltie_comments h3, footer, div.copyright, section.voltie_comments p:before { display: none !important; }

form#comment-form div.col-xs-6:nth-child(1) { display: none !important; }

section.voltie_friends h3 { display: none !important; }

section.voltie_video h3 { display: none !important; }

div.row:nth-child(7) { display: none !important; }


/* Universal Stuff */

body {
  background: linear-gradient(rgb(39, 04, 17), rgb(25, 3, 11));
}

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

::-webkit-scrollbar-track { background: rgb(53, 5, 23) }

::-webkit-scrollbar-thumb { background: rgb(25, 3, 11); }

div#structure {
  margin: 0 auto 0;
  min-height: 1500px;
  width: 800px;
}

div#content {
  top: 160px;
  width: 100%;
  padding: 0;
}

.row { margin: auto; }

h2, h3, a { border-radius: 0 !important; }


/* Navigation Bar */

.navbar-inverse #profile a {
  background: rgb(53, 5, 23) !important;
  box-shadow: inset 0 0 2px 2px rgba(25, 3, 11, 0.5);
}

.navbar-inverse #profile a:hover { background: transparent !important; }

nav#navbar {
  border: none;
  position: absolute;
  top: 0;
  box-shadow: none;
  width: 100%;
  margin: auto;
  background: rgb(25, 3, 11) !important;
}

nav#navbar .container { padding: 0 !important; }

div#main_nav {
  text-align: center;
  position: absolute;
  left: 0; right: 0;
  margin: auto;
}

ul.nav.navbar-nav {
  width: 100%;
  margin: auto;
}

ul.nav.navbar-nav li {
  float: none;
  display: inline-block;
  margin: auto;
  width: 20%;
}

ul.nav.navbar-nav li a:hover {
  background: rgb(71, 27, 44);
  color: rgb(53, 5, 23) !important;
  box-shadow: inset 0 0 2px 2px rgb(25, 3, 11);
}

ul.navbar-nav li a {
  font: 12px Cuprum !important;
  margin-top: 10px !important;
  color: rgb(108, 73, 86) !important;
  transition: all 0.3s ease;
}

/* Header */

header.min {
  height: 0;
  border: none !important;
}

div#header_stats {
  width: 100%;
  margin: auto !important;
  padding: 0 !important;
}

div#header_stats .col-inner {
  border-radius: 0 !important;
  display: block !important;
  width: 100%;
  margin: 40px auto 0 !important;
  height: 120px;
  padding: 10px !important;
  background: rgb(53, 5, 23) !important;
  box-shadow: inset 0 0 2px 2px rgba(25, 3, 11, 0.5) !important;
  border-left: 1px solid rgb(25, 3, 11);
  border-right: 1px solid rgb(25, 3, 11);
}

/* Usercard */

div#user_card {
  float: left;
  border-radius: 0 !important;
  background: linear-gradient(rgb(25, 3, 11) 35%, rgb(53, 5, 23)) !important;
  border-color: rgb(25, 3, 11) !important;
  box-shadow: inset 0 0 2px 2px rgba(25, 3, 11, 0.75) !important;
}

a.avatar span {
  font: 11px Cuprum !important;
}

a.avatar span:hover { background: rgba(25, 3, 11, 0.75) !important; }

a.avatar img {
  position: relative;
  right: 5px;
}

div#user_stats {
  display: inline-block !important;
  width: calc(100% - 110px);
  margin: 0 0 auto 10px !important;
  height: 100%;
}

div#user_stats p {
  font: 20px Cuprum !important;
  border-bottom: 1px solid;
  color: rgb(25, 3, 11) !important;
}

div#user_currency div { color: rgb(108, 73, 86) !important; }

div#user_notifications div.dropdown {
  margin: 0 5px;
  width: calc((100%/3) - 10px);
  font-family: Cuprum !important;
}

div#user_notifications div.dropdown button {
  border-radius: 0 !important;
  width: 100% !important;
  background: rgb(71, 27, 44) !important;
  border: 1px solid rgb(25, 3, 11) !important;
  color: rgb(25, 3, 11) !important;
  text-shadow: none;
}

div#user_notifications ul.dropdown-menu {
  background: rgba(25, 3, 11, 1) !important;
}

ul.dropdown-menu li {
  font-family: Cuprum !important;
}

div#user_notifications ul.dropdown-menu li p {
  padding: 5px !important;
  font: 14px Cuprum !important;
  color: rgb(108, 73, 86) !important;
}


/* Profile Modules */

div#voltie { margin: 0 !important; }

div#voltie div.col-md-3, div#voltie div.col-md-6 { padding: 0; }

div#voltie section { border-radius: 0; margin: 0; }

div#voltie div.col-md-3:nth-child(1) {
  width: 100%;
  height: 1200px;
  margin-top: -160px;
}

div#voltie div.col-md-3:nth-child(3) {
  width: 100%;
  position: relative;
  top: -858px;
}

div#voltie div.col-md-6 {
  position: relative;
  top: -92px;
  width: 100%;
}

/* Voltie Info */

section.voltie_info {
  padding: 0 !important;
  border: none !important;
}

section.voltie_info h2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid rgb(25, 3, 11);
  background: rgb(25, 3, 11) !important;
}

span.voltie_username {
  font: 46px Parisienne;
  color: rgb(108, 73, 86);
}

span.voltie_pronouns { display: none !important; }

@keyframes gemstone {
  90%, 20%, 45%, 70% { -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
                           clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
  25% { -webkit-clip-path: polygon(50% 0%, 0 50%, 100% 50%);
        clip-path: polygon(50% 0%, 0 50%, 100% 50%); background: rgb(39, 4, 17); }
  50% { -webkit-clip-path: polygon(100% 50%, 50% 0, 50% 100%);
        clip-path: polygon(100% 50%, 50% 0, 50% 100%); background: rgb(53, 5, 23); }
  75% { -webkit-clip-path: polygon(50% 100%, 100% 50%, 0 50%);
        clip-path: polygon(50% 100%, 100% 50%, 0 50%); background: rgb(71, 27, 44); }
  100% { -webkit-clip-path: polygon(0 50%, 50% 100%, 50% 0);
         clip-path: polygon(0 50%, 50% 100%, 50% 0); background: rgb(108, 73, 86); }
}

span.online-orb, span.offline-orb {
  border: none !important;
  width: 25px;
  height: 25px;
  border-radius: 0;
  margin: 0 5px;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

span.offline-orb { background: rgb(71, 27, 44); }

span.online-orb {
  animation: gemstone 4s normal ease infinite;
}

img.voltie_avatar {
  float: right;
  margin-top: 68px !important;
  transform: scaleX(1) !important;
  border-right: 1px solid rgb(25, 3, 11);
}

/* Voltie Video */

section.voltie_video {
  position: absolute;
  bottom: -53px;
  width: 100%;
  padding: 10px !important;
  border: none !important;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  height: 450px;
  background: rgb(25, 3, 11) !important;
  transition: all 0.5s ease;
  z-index: 10;
}

section.voltie_video > div {
  width: 100%;
  margin: -5.5px auto 0;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transition: all 0.5s ease;
}

section.voltie_video:hover, section.voltie_video > div:hover {
  -webkit-clip-path: none;
  clip-path: none;
}


/* Voltie Bio */

section.voltie_bio {
  height: 275px;
  width: calc(100% - 200px);
  border-bottom: none !important;
  overflow-y: auto;
  border-left: 1px solid !important;
  margin-top: -1040px !important;
  background: rgb(53, 5, 23) !important;
  border-top: none !important;
  border-color: rgb(25, 3, 11) !important;
  box-shadow: inset 0 0 2px 2px rgba(25, 3, 11, 0.5);
  color: rgb(108, 73, 86);
  font: 15px Cuprum;
  text-align: center;
}

section.voltie_bio strong, section.voltie_bio em, section.voltie_bio u { color: rgb(25, 3, 11) !important; }

section.voltie_bio u span {
  float: left;
  width: 100%;
  border-bottom: 1px solid;
  font-size: 20px !important;
  text-shadow: 0 0 1px;
}

section.voltie_bio a { color: rgb(25, 3, 11); }

div.spoiler_value a {
  color: rgb(53, 5, 23);
}

/* Spoiler Tags */

button.reveal_spoiler {
  margin: 5px auto 0;
  border-radius: 0;
  background: rgb(71, 27, 44);
  border-color: rgb(25, 3, 11);
  box-shadow: inset 0 0 2px 2px rgba(25, 3, 11, 0.5);
  color: rgb(108, 73, 86);
  width: 100px;
}

button.reveal_spoiler:hover {
  background: rgb(108, 73, 86);
  color: rgb(25, 3, 11);
}

div.spoiler_value {
  background: rgb(108, 73, 86);
  border-radius: 0;
  box-shadow: inset 0 0 2px 2px rgba(53, 5, 23, 0.5);
  color: rgb(53, 5, 23);
}


/* Voltie Friends */

section.voltie_friends {
  height: 60px;
  background: rgb(25, 3, 11) !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgb(25, 3, 11) !important;
}

section.voltie_friends a {
  display: inline-block;
  min-width: calc(14%) !important;
  margin: 0 -30px 0 !important;
  height: 60px;
  transition: all 0.3s ease;
}

section.voltie_friends a:hover { background: rgb(108, 73, 86); }

section.voltie_friends a:nth-child(even) {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

section.voltie_friends a:nth-child(even) img {
  position: relative;
  bottom: 25%;
}

section.voltie_friends a:nth-child(odd) {
  -webkit-clip-path: polygon(50% 100%, 100% 0, 0 0);
  clip-path: polygon(50% 100%, 100% 0, 0 0);
}

section.voltie_friends a:nth-child(odd) img {
  position: relative;
  bottom: 50%;
  left: 5%;
}

/* Voltie Comments */

section.voltie_comments {
  position: relative;
  top: 60px;
  border-left: 1px solid #000 !important;
  border-right: 1px solid !important;
  height: 400px;
  background: rgb(53, 5, 23) !important;
  border-color: rgb(25, 3, 11) !important;
  border-top: none !important;
  box-shadow: inset 0 0 2px 2px rgba(25, 3, 11, 0.5);
}

section.voltie_comments ul {
  height: 70%;
  overflow-y: scroll;
  padding-right: 15px !important;
  margin: 0 auto 15px !important;
}

section.voltie_comments ul::-webkit-scrollbar,
section.voltie_bio::-webkit-scrollbar { width: 10px; }

section.voltie_comments ul::-webkit-scrollbar-track,
section.voltie_bio::-webkit-scrollbar-track { background: rgba(25, 3, 11, 0.35); }

section.voltie_comments ul::-webkit-scrollbar-thumb,
section.voltie_bio::-webkit-scrollbar-thumb { background: rgb(25, 3, 11); }

section.voltie_comments ul li {
  margin: 0;
  min-height: 90px !important;
}

section.voltie_comments ul li p {
  font: 15px Cuprum;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgb(25, 3, 11) !important;
  border-radius: 0 !important;
  padding-top: 25px !important;
  padding-bottom: 5px !important;
  color: rgb(108, 73, 86);
  box-shadow: none !important;
}

section.voltie_comments ul li small {
  float: right;
  margin: 0 38px 0 0;
  font: 11px Cuprum;
  color: rgba(108, 73, 86, 0.5);
}

section.voltie_comments ul li a:nth-child(2) {
  float: left;
  position: relative;
  transform: rotate(26deg);
  right: 13%;
  top: 60px;
  font: 18px Cuprum;
  width: 50%;
  color: rgb(108, 73, 86);
}

section.voltie_comments ul li a:nth-child(1) > img {
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
  width: 75px !important;
  height: 75px;
  background: rgb(25, 3, 11);
}

form#comment-form {
  background: rgb(25, 3, 11) !important;
  width: calc(100% + 28px);
  padding: 5px;
  margin: 0 -14px;
}

form#comment-form div.col-sm-12 {
  width: 80%;
  float: right;
  padding: 0 5px 0 0;
  position: relative;
  top: 4px;
}

textarea {
  border-radius: 0 !important;
  height: 93px !important;
  background: rgb(108, 73, 86) !important;
  border: none !important;
  font: 14px Cuprum;
  color: rgb(25, 3, 11) !important;
}

form#comment-form div.col-xs-6 {
  text-align: center !important;
  width: 20%;
  position: relative;
  margin-top: -36px;
}

input#comment-button {
  border-radius: 0;
  font-family: Cuprum;
  background: rgb(53, 5, 23);
  border: none;
  color: rgb(108, 73, 86);
  transition: all 0.3s ease;
}

input#comment-button:hover {
  background: rgb(53, 5, 23) !important;
  box-shadow: inset 0 0 2px 2px rgb(25, 3, 11, 0.5);
}

button.comments_load_more {
  position: absolute;
  bottom: 63px;
  left: 28px;
  font: 14px Cuprum !important;
  border-radius: 0;
  width: 110px;
  background: transparent;
  border-bottom: 2px solid rgb(53, 5, 23);
  color: rgb(108, 73, 86);
}

button.comments_load_more:hover {
  color: rgb(53, 5, 23);
}

a.comment_delete { text-transform: lowercase; font: 10px Cuprum !important; }

@media screen and (max-width: 1000px) {
div#header_stats {
  top: -40px;
}

#content {
  top: 120px !important;
}
}

@media screen and (max-width: 991px) {
div#voltie div.col-md-3:nth-child(1) {
  position: static;
  height: auto !important;
  min-height: auto !important;
}

section.voltie_bio {
  margin: 0 0 23px !important;
  position: relative;
  top: -343px;
  height: 275px;
}

img.voltie_avatar {
  position: relative;
  top: -160px;
}

section.voltie_comments {
  top: -306px;
}

section.voltie_video {
  bottom: 6px;
}

button.navbar-toggle {
  background: rgb(53, 5, 23);
  border-radius: 0;
  border: none;
  margin-right: 20px;
}

button.navbar-toggle:hover, button.navbar-toggle:active { background: rgb(108, 73, 86) !important; }

section.voltie_friends a {
  margin: 0 -3.7% !important;
}
}

/*** End Custom Profile Code ***/