Voltra LUNA CSS

/* Custom profile code for Lady Luna by Vii
+ ver 2.1 LIMITLESS finished 6th April 2018
+ feel free to alter as you wish but pls do not copy or steal <3 */

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

::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.5);
}


/** Custom Fonts **/
@font-face {
  font-family: Tulpen One;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/tulpenone/v7/dFa6ZfeC474skLgesc0Cajo6_Q.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: Unica One;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/unicaone/v5/DPEuYwWHyAYGVTSmalsRcd3e.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 Modules **/
div.sidebar.right, div.sidebar.left, li#shops, li#donate, li#mail, li#signout, footer, section.voltie_video h3, div.row:nth-child(7), div.copyright, section.voltie_comments ul li p:before, button.btn.btn-secondary.comments_load_more { display: none !important; }

header.min div.container div.row div:nth-child(2), nav#navbar { visibility: hidden !important; }


/** Page, Link, & Text Styles **/
::selection {
background: rgba(250, 178, 250);
color: #000;
}

body.voltie-lady-luna.voltie {
background: url(https://i.imgur.com/wMe0c3o.jpg);
background-size: cover;
background-attachment: fixed;
margin: -40px 0 0;
}

a, a:visited, a:active { transition: all 0.3s ease; }

a:hover { color: rgb(250, 178, 250) !important; }

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

h3 {
background: transparent !important;
font: 28px Unica One !important;
color: rgba(250, 178, 250, 0.5) !important;
}


/** Module Styles**/
div#main_nav {
visibility: visible;
position: fixed;
top: 0;
left: 0;
width: 25%;
max-height: 10% !important;
height: 10% !important;
}

ul.nav.navbar-nav.navbar-right {
width: 100%;
margin: 0;
background: rgba(0, 0, 0, 0.75);
border-right: 1px solid #000;
}

ul.nav.navbar-nav.navbar-right li {
width: 25%;
text-align: center;
}

ul.nav.navbar-nav.navbar-right li a {
padding: 23% 0;
font: 24px Tulpen One;
border-radius: 50%;
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.5);
color: rgb(70, 90, 214);
}

ul.nav.navbar-nav.navbar-right li a:hover {
background: rgba(38, 32, 138, 0.5);
color: rgb(250, 178, 250) !important;
}

header.min { height: 0; }

div#header_stats {
position: fixed;
left: 0;
top: calc(10%);
width: 25%;
padding: 0 !important;
margin: 0 !important;
height: calc(16%);
border-right: 1px solid #000;
}

div#header_stats div.col-inner {
background: rgba(38, 32, 138, 0.75) !important;
border-radius: 0 !important;
width: 100%;
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.5) !important;
padding: 0 !important;
}

div#user_stats > p {
visibility: visible;
font: 28px Unica One !important;
margin: 20% 0 0 !important;
color: rgba(250, 178, 250, 0.5) !important;
}

div#user_card {
margin: 12% auto;
background: rgba(250, 178, 250, 0.5) !important;
border-color: rgb(70, 90, 214) !important;
}

span.edit {
font: 24px Tulpen One !important;
background: rgba(38, 32, 138, 0.75) !important;
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.5);
border-radius: 50%;
}

div#content.container {
margin: 0 0 0 auto;
width: 75%;
padding: 0;
background: rgba(0, 0, 0, 0.5);
height: 100%;
}

div.content_header {
position: absolute;
top: 0;
right: 0;
width: 100%;
border: none;
overflow: visible !important;
z-index: 9;
}

div.content_header h1 {
font: 36px Unica One;
margin: 5% auto 0;
width: 100%;
float: left;
text-align: center !important;
color: #FFF;
animation: strobe 1s alternate infinite;
-webkit-animation: strobe 1s alternate infinite;
}

@keyframes strobe {
from { text-shadow: 0 0 2px; }
to { text-shadow: 0 0 5px; }
}

@-webkit-keyframes strobe {
from { text-shadow: 0 0 2px; }
to { text-shadow: 0 0 5px; }
}

ul.content_navigation {
width: 50%;
text-align: right;
}

ul.content_navigation li a {
font: 24px Tulpen One !important;
border: none;
border-radius: 0;
border-bottom: 2px solid;
margin: 6px 5px 0;
padding: 5px;
color: rgba(250, 178, 250, 0.5);
}

ul.content_navigation li a:hover { border-bottom-color: inherit; }

div#voltie.row {
width: 100%;
margin: 130px auto 0 !important;
}

section {
border-radius: 0 !important;
background: rgba(38, 32, 138, 0.75) !important;
border: 1px solid rgba(0, 0, 0, 0.5) !important;
}

div#voltie.row div.col-md-3, div#voltie.row div.col-md-6 {
padding: 5px;
position: relative;
top: 23px;
}

div#voltie.row div.col-md-3:nth-child(1) {
width: 50%;
float: right;
clear: both;
height: 400px;
}

section.voltie_video {
height: 100%;
font: 28px Tulpen One;
color: #FFF;
}

section.voltie_info {
position: fixed;
left: 0;
bottom: 0;
width: 25%;
margin: 0 !important;
height: 74%;
background: transparent !important;
border-right: 1px solid #000 !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
padding: 0 !important;
}

img.voltie_avatar {
margin: 40px auto 5% !important;
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.25);
}

h2 {
font: 36px Unica One !important;
padding: 0 !important;
margin: 0 auto 0 !important;
}

span.online-orb, span.offline-orb {
border: none;
width: 100%;
padding: 25px;
border-radius: 0;
float: left;
}

span.online-orb {
background: url(https://i.imgur.com/gcjl5mh.gif);
background-size: cover;
}

span.offline-orb {
background: url(https://i.imgur.com/8FKEPav.gif);
background-position: 25%;
opacity: 0.5;
}

span.voltie_username {
position: relative;
top: -50px;
float: left;
width: 100%;
padding: 1% 0;
background: rgba(0, 0, 0, 0.25);
animation: strobe 1s alternate infinite;
-webkit-animation: strobe 1s alternate infinite;
}

span.voltie_pronouns {
font: 28px Tulpen One !important;
text-transform: lowercase;
text-align: right;
margin: -51px 0 30px;
padding: 5px;
float: right;
background: rgba(0, 0, 0, 0.5);
width: 100%;
color: rgba(250, 178, 250, 0.5);
}

div.voltie_actions.row {
width: 100%;
margin: 0 auto 0 !important;
text-align: center;
}

div.voltie_actions.row div.col-xs-6 {
width: 50%;
margin: auto;
float: none !important;
display: inline-block !important;
border: 1px solid #000;
padding: 0 !important;
}

div.voltie_actions.row div.col-xs-6 a {
border-radius: 0 !important;
font: 28px Tulpen One;
padding: 10px !important;
width: 100%;
float: left;
background: rgba(38, 32, 138, 0.5) !important;
color: rgba(250, 178, 250, 0.5);
}

div#voltie.row div.col-md-6 { width: 50%; }

section.voltie_bio {
height: 660px;
font: 26px Tulpen One;
color: #FFF;
text-align: center;
letter-spacing: 0.025em;
overflow-y: auto;
}

section.voltie_bio strong { color: rgb(70, 90, 214) !important; }

section.voltie_bio a { color: rgb(250, 178, 250); }

section.voltie_bio a:hover { color: #FFF !important; }

section.voltie_bio img { border: 1px solid #000; }

section.voltie_bio img:nth-child(2) {
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.25);
}

@keyframes shimmer {
from { opacity: 1; }
to { opacity: 0.5 }
}

section.voltie_comments {
width: calc(200% + 10px);
position: relative;
top: -15px;
padding: 15px 0 !important;
}

section.voltie_comments ul {
background: rgba(0, 0, 0, 0.75);
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.5);
padding: 5px !important;
}

section.voltie_comments ul li:nth-child(1n) a:nth-child(2) {
margin-left: 45px;
}

section.voltie_comments ul li:nth-child(2n) {
text-align: right;
}

section.voltie_comments ul li:nth-child(2n) a:nth-child(1) {
float: right;
position: relative;
width: 50px;
right: 30px;
}

section.voltie_comments ul li:nth-child(2n) small {
margin-right: 40px;
}

section.voltie_comments ul li:nth-child(2n) p {
right: 85px;
}

section.voltie_comments ul li a:nth-child(1) {
padding: 5px;
width: 50px;
}

section.voltie_comments ul li a:nth-child(1) img {
border-radius: 50% !important;
border: 1px solid #000;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.5);
margin: 15px;
background: rgba(250, 178, 250, 0.5);
}

section.voltie_comments ul li a:nth-child(2) {
font: 20px Unica One;
color: rgba(250, 178, 250, 0.5);
}

section.voltie_comments ul li p {
border-radius: 0px !important;
background: rgba(38, 32, 138, 0.5) !important;
border-color: rgb(38, 32, 138) !important;
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.5) !important;
font: 24px Tulpen One;
color: #FFF;
letter-spacing: 0.025em;
}

section.voltie_comments ul li small {
color: #FFF;
font: 18px Tulpen One;
letter-spacing: 0.025em;
opacity: 0;
transition: all 0.3s ease;
}

section.voltie_comments ul li:hover small { opacity: 1; }

button.btn.btn-secondary.comments_load_more {
float: left;
width: 50%;
margin: 5px 0 !important;
font: 18px Unica One !important;
letter-spacing: 0.025em;
border-radius: 0;
padding: 5px !important;
background: rgba(0, 0, 0, 0.75);
color: rgb(68, 47, 152);
}

form#comment-form div.row { width: 100% !important; margin: 0; }

form#comment-form div.col-xs-6:nth-child(1) {
color: #FFF !important;
font: 20px Tulpen One;
letter-spacing: 0.025em;
}

span#charsLeft { color: rgba(250, 178, 250, 0.5) !important; }

form#comment-form div.col-xs-6:nth-child(2) {
width: 100% !important;
padding: 0;
margin: 0;
}

input#comment-button {
width: 100%;
margin: 5px 0 !important;
font: 18px Unica One;
border-radius: 0;
padding: 5px !important;
background: rgba(0, 0, 0, 0.5);
border: 1px solid #000;
transition: all 0.3s ease;
}

input#comment-button:hover {
background: rgba(250, 178, 250, 0.5) !important;
}

textarea#comment-text {
border-radius: 0;
background: rgba(250, 178, 250, 0.25);
border-color: rgba(250, 178, 250, 0.5);
box-shadow: inset 0 0 5px 2px rgba(250, 178, 250, 0.25);
color: #FFF;
font: 24px Tulpen One;
letter-spacing: 0.025em;
margin: 10px 0 5px !important;
}

div#voltie.row div.col-md-3:nth-child(3) {
float: left;
width: 50%;
height: 270px;
overflow: hidden;
}

section.voltie_likes, section.voltie_dislikes, section.voltie_hobbies {
width: calc(100% / 3);
display: inline-block;
margin: 0 !important;
height: 50%;
float: left;
padding: 5px !important;
border-radius: 0 !important;
font: 24px Tulpen One;
color: #FFF;
overflow-y: auto;
}

section.voltie_friends h3, section.voltie_likes h3, section.voltie_dislikes h3, section.voltie_hobbies h3 {
font-size: 20px !important;
}

section.voltie_friends {
height: 50%;
margin: auto 0 0 0 !important;
float: left;
width: 100%;
padding: 5px !important;
border-radius: 0 !important;
overflow-y: auto;
}

section.voltie_friends a {
-webkit-clip-path: polygon(50% 0%, 66% 35%, 98% 35%, 73% 62%, 84% 96%, 50% 75%, 16% 96%, 27% 62%, 3% 35%, 34% 35%);
clip-path: polygon(50% 0%, 66% 35%, 98% 35%, 73% 62%, 84% 96%, 50% 75%, 16% 96%, 27% 62%, 3% 35%, 34% 35%);max-width: 20% !important;
float: left;
margin: 0 1% !important;
background: rgba(0, 0, 0, 0.5);
}

section.voltie_friends a:hover {
animation: wobble 1s linear normal infinite;
-webkit-animation: wobble 1s linear normal infinite;
}

@keyframes wobble {
0, 100% { transform: rotate(0); }
25% { transform: rotate(45deg); }
75% { transform: rotate(-45deg); }
}

@-webkit-keyframes wobble {
0, 100% { transform: rotate(0); }
25% { transform: rotate(45deg); }
75% { transform: rotate(-45deg); }
}

section.voltie_friends a img {
position: relative;
bottom: 3px;
left: 3px;
}

button.reveal_spoiler {
background: rgba(250, 178, 250, 0.5);
border-radius: 0;
border-color: rgba(250, 178, 250, 0.75);
transition: all 0.3s ease;
}

button.reveal_spoiler:hover {
background: rgba(250, 178, 250, 0.75);
}

div.spoiler_value {
border-radius: 0;
background: rgba(0, 0, 0, 0.4);
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.5);
}

/* End Custom Code */