Voltra CANDY CSS

/* Custom profile code for candiedaliens by Vii
+ ver 3.1 completed 11 APR 2018 - total time logged 10+ hrs
++ please do not rip, copy or steal
+++ to the owner: feel free to alter as you wish ~ */
----------------------------------------------------

/* Custom Scrollbar (Webkit Only) */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: rgba(81, 67, 228, 0.5);
}

::-webkit-scrollbar-thumb {
background: rgb(74, 0, 126);
}

/* Custom Fonts */
@font-face {
  font-family: Montserrat Subrayada;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserratsubrayada/v5/U9MD6c-o9H7PgjlTHThBnNHGVUORwteQQH8MaOY.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: Offside;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/offside/v5/HI_KiYMWKa9QrAykc5boRw.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;
}

/* Page, Link, and Font Styles */
body {
background: url(https://i.imgur.com/NDDYu0G.jpg);
background-attachment: fixed;
background-size: cover;
}

a, a:visited, a:active {
font: 12px Montserrat Subrayada;
text-shadow: 0 0 1px;
transition: all 0.5s ease;
}

/* Hidden Modules */
footer, section.voltie_comments ul li p:before, div.row:nth-child(7), div.copyright, div#user_currency, section.voltie_comments ul li a:nth-child(1), section.voltie_comments ul li img { display: none; }

/* Navigation Bar */
nav#navbar {
width: 900px;
margin: auto;
padding: 0 !important;
visibility: hidden;
}

div#main_nav, div#main_nav > div.container {
max-height: 40px !important;
padding: 0 !important;
}

/* + Actual Part of the Nav Bar That's Visible */
ul.nav.navbar-nav.navbar-right {
width: 900px;
margin: auto !important;
position: fixed;
left: 0px;
right: 0px;
top: 43px;
height: 40px !important;
visibility: visible !important;
}

ul.nav.navbar-nav.navbar-right li {
width: 25% !important;
display: inline-block !important;
margin: auto !important;
text-align: center;
}

ul.nav.navbar-nav.navbar-right li a {
font: 14px Montserrat Subrayada;
border-radius: 0 !important;
border: 1px solid transparent;
text-shadow: 0 0 5px rgb(74, 0, 126);
color: rgb(237, 245, 255);
margin: 0 !important;
padding: 10px;
}

ul.nav.navbar-nav.navbar-right li a:hover {
border-color: inherit;
background: rgba(237, 245, 255, 0.75) !important;
text-shadow: 0 0 5px;
}

li#signout, li#shops, li#donate, li#mail { display: none !important; }

li#home a:hover { background: rgba(81, 67, 228, 0.5) !important; border-color: rgb(81, 67, 228); }

li#forums a:hover { background: rgba(218, 5, 163, 0.5) !important; border-color: rgb(218, 5, 163); }

li#profile a {
animation: fluorescence 5s alternate infinite;
background: rgba(237, 245, 255, 0.75);
border-top: 1px solid rgb(237, 245, 255);
border-left: 1px solid rgb(237, 245, 255);
border-right: 1px solid rgb(237, 245, 255);
}

li#settings a:hover {
background: rgba(74, 0, 126, 0.5) !important;
border-color: rgb(74, 0, 126);
}

/* Header Styling */
header.min { height: 0; border: none !important; position: fixed !important; z-index: 9 !important; }

header.min > div.container > div.row > div:nth-child(2) { display: none !important; }

/* Main Content Wrapper */
div#content.container {
background: rgba(0, 12, 33, 0.70);
width: 100% !important;
height: 100% !important;
position: fixed;
top: 0;
left: 0;
}

/* Profile Header */
div.content_header {
position: fixed;
top: 83px;
height: 100px;
text-align: center;
width: 900px;
margin: auto;
left: 0;
right: 0;
visibility: visible !important;
background: url(https://i.imgur.com/LiFr1IU.png);
background-size: cover;
animation: marquee 10s ease-in-out alternate infinite;
border: 1px solid rgb(237, 245, 255);
}

@keyframes marquee {
from { background-position: 50% 21%; }
to { background-position: 50% 81%; }
}

div.content_header h1 {
text-align: center;
float: left;
width: 100%;
font: 38px Offside;
margin: 0 0 5px !important;
padding: 7px;
animation: fluorescence 1s ease alternate infinite;
color: rgb(237, 245, 255);
}

@keyframes fluorescence {
0%, 100% { text-shadow: 0 0 5px rgb(237, 245, 255); }
25% { text-shadow: 0 0 5px rgb(81, 67, 228); }
50% { text-shadow: 0 0 5px rgb(218, 5, 163); }
75% { text-shadow: 0 0 5px rgb(74, 0, 126); }
}

@-webkit-keyframes fluorescence {
0%, 100% { text-shadow: 0 0 5px rgb(237, 245, 255); }
25% { text-shadow: 0 0 5px rgb(81, 67, 228); }
50% { text-shadow: 0 0 5px rgb(218, 5, 163); }
75% { text-shadow: 0 0 5px rgb(74, 0, 126); }
}

/* Trade, Friend, Message Links */
ul.content_navigation {
width: 100% !important;
text-align: center;
margin: 2px 0;
}

ul.content_navigation li {
width: calc(100% / 3.1);
margin: 0 3px !important;
display: inline-block !important;
}

ul.content_navigation li a {
color: rgb(81, 67, 228);
border: none;
text-shadow: 0 0 5px rgb(237, 245, 255);
font-weight: bold;
}

ul.content_navigation li a:hover { color: rgb(237, 245, 255); }
div#header_stats div.col-inner {
position: fixed !important;
width: 900px;
margin: auto !important;
left: 0;
right: 0;
top: 183px;
border-radius: 0 !important;
height: 100px !important;
box-shadow: none !important;
background: rgba(237, 245, 255, 0.75) !important;
border-left: 1px solid rgb(237, 245, 255);
border-right: 1px solid rgb(237, 245, 255);
}

/* User Card Styling */
div#user_stats {
float: left;
height: 100%;
width: calc(100% - 105px);
}

div#user_stats p:nth-child(1) {
font: 28px Montserrat Subrayada !important;
float: right;
width: 90%;
padding: 4.3% !important;
color: rgb(237, 245, 255) !important;
text-shadow: 0 0 5px rgba(0, 16, 33, 0.5);
}

div#user_notifications {
float: left;
height: 100%;
margin: 0 auto 0 -10px !important;
width: 10%;
}

div.dropdown {
width: 100% !important;
margin: 0 !important;
display: block !important;
height: calc(100% / 3);
}

button.btn.btn-xs.btn-default.dropdown-toggle {
background: linear-gradient(rgb(218, 5, 163), rgb(74, 0, 126)) !important;
padding: 2px;
border-radius: 0 !important;
border-color: rgb(74, 0, 126) !important;
transition: all 0.5s ease;
}

button.btn.btn-xs.btn-default.dropdown-toggle:hover {
background: rgb(81, 67, 228) !important;
border-color: rgb(81, 67, 228) !important;
}

ul.dropdown-menu {
background: rgb(81, 67, 228) !important;
border-radius: 0 !important;
}

li.dropdown-header {
font-family: Montserrat Subrayada !important;
color: rgb(0, 15, 33) !important;
}

ul.dropdown-menu li small {
color: rgb(218, 5, 163);
font-family: Montserrat Subrayada;
}

ul.dropdown-menu li p {
font: 12px Offside;
}

div#user_card {
border-color: rgb(74, 0, 126) !important;
box-shadow: 0 0 5px 2px !important;
float: right;
animation: glow 5s alternate infinite;
}

@keyframes glow {
0%, 100% { box-shadow: 0 0 5px 2px rgb(237, 245, 255); }
25% { box-shadow: 0 0 5px 2px rgb(81, 67, 228); }
50% { box-shadow: 0 0 5px 2px rgb(218, 5, 163); }
75% { box-shadow: 0 0 5px 2px rgb(74, 0, 126); }
}

div#user_card:hover span {
background: url(https://i.imgur.com/AqV3EOl.jpg) no-repeat !important;
background-size: cover !important;
background-position: 50%;
color: rgb(74, 0, 126) !important;
}

/* Second Profile Content Wrapper */
div#voltie.row {
width: 900px;
position: fixed;
top: 295px;
margin: auto !important;
left: 0;
right: 0;
overflow: hidden;
height: 360px;
visibility: visible !important;
border-bottom: 1px solid rgb(237, 245, 255);
}

div#voltie.row div.col-md-3:nth-child(1) {
width: calc(35% - 10px);
padding: 0px;
z-index: 3;
height: 370px;
}

div#voltie.row div.col-md-6 {
padding: 0px;
width: calc(50% - 10px);
height: `100%;
z-index: 2;
height: 580px;
}

div#voltie.row div.col-md-3:nth-child(3) {
padding: 0px;
width: calc(20% - 25px);
height: 329px;
z-index: 1;
overflow: hidden;
}

/* Profile Section Styling */
section {
padding: 5px !important;
font-family: Offside;
border-radius: 0 !important;
background: radial-gradient(rgba(), rgba()) !important;
color: rgb(237, 245, 255);
}

/* + Section Headers */
section h3 {
font: 14px Montserrat Subrayada !important;
margin: 0 auto 5px !important;
background: transparent !important;
color: rgb(218, 5, 163) !important;
text-shadow: 0 0 2px;
transition: all 0.5s ease;
}

section h3:hover { text-shadow: 0 0 5px; }

/* Info Section & Avatar */
section.voltie_info {
height: 360px;
margin: 0 0 5px !important;
background: url(https://i.imgur.com/ENWalRX.png) !important;
background-size: cover !important;
border-right: none !important;
}

section.voltie_info h2 {
font: 24px Montserrat Subrayada !important;
float: left;
width: 100%;
position: relative;
top: 295px;
margin-bottom: 0 !important;
background: rgba(237, 245, 255, 0.5) !important;
border-radius: 0 !important;
}

span.offline-orb, span.online-orb {
border: none;
padding: 20px;
background: #FFF;
position: relative;
top: 4px;
float: left;
border-radius: 0;
}

span.offline-orb {
border: 1px solid rgb(0, 15, 33);
background: rgba(0, 15, 33, 0.75);
}

@keyframes active {
0%, 100% { background: rgba(237, 245, 255, 0.70); border: 1px solid rgb(237, 245, 255); }
25% { background: rgba(81, 67, 228, 0.75); border: 1px solid rgb(81, 67, 228); }
50% { background: rgb(218, 5, 163, 0.75); border: 1px solid rgb(218, 5, 163); }
75% { background: rgb(74, 0, 126. 0.75); border: 1px solid rgb(74, 0, 126); }
}

span.online-orb {
animation: active 5s ease-in-out alternate infinite;
}

span.voltie_pronouns {
float: right;
color: rgb(218, 5, 163);
text-shadow: 0 0 2px;
}

span.voltie_username {
animation: fluorescence 5s alternate infinite;
float: right;
}

img.voltie_avatar {
position: relative;
top: -40px;
animation: fade 7s 5s ease normal infinite;
}

@keyframes fade {
0%, 100% { opacity: 1; }
50% { opacity: 0.25 }
}

img.voltie_avatar:hover { animation-play-state: paused; }

div.voltie_actions {
background: rgba(81, 67, 228, 0.5);
width: 100%;
margin: auto;
position: relative;
top: -38%;
opacity: 0;
transition: all 0.5s linear;
}

section.voltie_info:hover div.voltie_actions { opacity: 1; }

div.voltie_actions div {
width: 100%;
margin: 10px auto;
}

div.voltie_actions div a {
width: 100% !important;
display: block;
border-radius: 0 !important;
background: rgba(0, 15, 33, 0.5) !important;
color: rgb(237, 245, 255);
}

div.voltie_actions div a:hover {
color: rgb(218, 5, 163);
}

/* Video Player */
section.voltie_video {
position: fixed;
top: 50%;
left: -4%;
width: 220px;
height: 164px;
overflow: hidden !important;
margin: 0 auto !important;
transition: all 0.5s ease;
background: rgba(237, 245, 255, 0.75) !important;
}

section.voltie_video:hover {
transform: translateX(32%);
}

/* Bio */
section.voltie_bio {
height: 328px;
overflow-y: auto;
margin-bottom: 0 !important;
text-align: center;
border: none !important;
border-top: 1px solid rgb(237, 245, 255) !important;
background: rgba(81, 67, 228, 0.5) !important;
}

section.voltie_bio img {
border-radius: 50%;
width: 75%;
height: 50%;
box-shadow: 0 0 5px 2px rgba(0, 15, 33, 0.5);
}

/* Comments */
section.voltie_comments {
position: relative;
width: 135.3%;
height: 360px;
transition: all 0.5s linear;
overflow: hidden;
background: rgba(237, 245, 255, 0.55) !important;
}

section.voltie_comments:hover {
transform: translateY(-328px);
background: url() rgba(237, 245, 255, 0.85) !important;
}

section.voltie_comments ul {
height: 60%;
overflow-y: auto;
}

button.btn.btn-secondary.comments_load_more {
float: left;
width: 50%;
margin: 0 auto !important;
color: rgb(0, 15, 33);
background: transparent;
}

form#comment-form {
height: calc(40% - 56px);
float: left;
width: 100%;
}

form#comment-form div.col-xs-6 {
width: 50%;
float: left;
}

input#comment-button {
background: transparent;
position: relative;
font-size: 12px;
width: 100%;
border-radius: 0;
top: -106px;
padding: 4px;
border: none;
box-shadow: none;
color: rgb(218, 5, 163);
text-shadow: 0 0 2px;
transition: all 0.5s ease;
}

input#comment-button:hover {
background: rgba(218, 5, 163, 0.5) !important;
color: rgb(237, 245, 255);
}

textarea#comment-text {
margin: 0 !important;
border-radius: 0;
background: transparent;
box-shadow: inset 0 0 5px 2px rgba(0, 15, 33, 0.35);
height: 75px;
color: rgb(81, 67, 228);
}

#comment-form div.col-xs-6 > span { font-size: 10px; }

span#charsLeft { color: rgb(218, 5, 163) !important; }

section.voltie_comments ul li {
padding: 5px !important;
margin: 5px 0 !important;
}

section.voltie_comments ul li a {
color: rgb(237, 245, 255);
}

section.voltie_comments ul li small {
float: right;
color: rgb(0, 15, 33);
}

section.voltie_comments ul li p {
margin: 0 !important;
border-radius: 0 !important;
font-size: 12px !important;
}

section.voltie_comments ul li:nth-child(1n) p {
background: rgb(81, 67, 228) !important;
}

section.voltie_comments ul li:nth-child(1n) a {
text-shadow: 0 0 5px rgb(81, 67, 228);
}

section.voltie_comments ul li:nth-child(2n) p {
background: rgba(218, 5, 163) !important;
}

section.voltie_comments ul li:nth-child(2n) a {
text-shadow: 0 0 5px rgb(218, 5, 163);
}

section.voltie_comments ul li:nth-child(3n) p {
background: rgba(74, 0, 126) !important;
}

section.voltie_comments ul li:nth-child(3n) a {
text-shadow: 0 0 5px rgb(74, 0, 126);
}

/* Likes, Dislikes, Hobbies, and Friends */
section.voltie_likes, section.voltie_hobbies, section.voltie_friends {
font-size: 10px;
border: none !important;
border-right: 1px solid rgb(237, 245, 255) !important;
}

section.voltie_likes {
height: 35%;
margin: 0 !important;
background: rgba(218, 5, 163, 0.5) !important;
border-top: 1px solid rgb(237, 245, 255) !important;
}

section.voltie_hobbies {
height: 25%;
margin: 0 !important;
background: rgba(74, 0, 126, 0.5) !important;
}

section.voltie_friends {
background: url(https://i.imgur.com/3K276N4.jpg) !important;
background-size: cover !important;
height: 40%;
overflow-y: auto;
}

section.voltie_friends a {
margin: 10px !important;
background: rgba(0, 15, 33, 0.5);
border: 1px solid rgb(0, 15, 33);
border-radius: 50%;
}

section.voltie_friends a:hover {
background: rgba(218, 5, 163, 0.5);
}

/* End Custom Code */