/* -
-*-~*~-*-*-~*~-*-*-~*~* |
●▬▬▬▬▬▬▬๑۩۩๑▬▬▬▬▬▬▬●
Made by ~
Areal Alien ❥ 雷克斯
●▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬●
──────▄▀▄─────▄▀▄
─────▄█░░▀▀▀▀▀░░█▄
─▄▄──█░░░░░░░░░░░█──▄▄
█▄▄█─█░░▀░░┬░░▀░░█─█▄▄█
-*-~*~-*-*-~*~-*-*-~*~* |
- */
:root {
/* Primary Colors */
--bc: #0c0c0d;
--bc-gray: #0d0e10;
--bc-purple: #1e2731;
--bc-purple-darker: #181c23;
--bc-nav-foot: #101317;
--section: #0e0e10;
--primary: #94c2e3;
--secondary: #4888b5;
/* Colors */
--white: #ffffff;
--black: #000000;
--dark-blue: #1f2029;
--extra-dark-blue: #13141a;
--red: #da2c4d;
--orange: #fd7e14;
--yellow: #f8ab37;
--warning: #ffc107;
--green: #28a745;
--light-green: #24e33a;
--teal: #20c997;
--cyan: #17a2b8;
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--light-gray: #ebecf2;
--bright-gray: #d9d5de;
--gray: #6c757d;
--gray-extra-dark: #343a40;
--dark: #343a40;
/* Minecraft Colors */
--m-darkred: #aa0000;
--m-red: #ff5555;
--m-gold: #ffaa00;
--m-yellow: #ffff55;
--m-green: #55ff55;
--m-darkgreen: #00aa00;
--m-darkaqua: #00aaaa;
--m-aqua: #55ffff;
--m-blue: #94c2e3;
--m-darkblue: #0000aa;
--m-purple: #aa00aa;
--m-pink: #ff55ff;
--m-gray: #aaaaaa;
--m-darkgray: #555555;
/* Gradients */
--gradient: linear-gradient(45deg, rgba(148,194,227,1) 0%, rgba(72,136,181,1) 100%);
--gradient2: linear-gradient(45deg, rgba(148,194,227,1) 0%, rgba(72,136,181,1) 100%);
/* Sizes */
--heading: 3.4rem;
--heading-medium: 2rem;
--paragraph: 1.1rem;
--button-large: 1.6rem;
--button-small: 1.2rem;
--button-smallest: 1rem;
/* Fonts */
--font-main: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-secondary: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--font-slim: "Roboto";
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
width: 100%;
min-height: 100vh;
overflow-x: hidden;
font-family: var(--font-main);
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
background-color: var(--bc-gray);
transition: background-color .2s ease-in-out;
}
main {
min-height: 100vh;
}
footer {
background-color: var(--bc);
}
/* Classes */
/* ScrollTop */
.back-to-top {
position: fixed;
right: 30px;
bottom: 30px;
display: none;
z-index: 98;
}
.back-to-top a svg {
fill: var(--bc-purple);
}
.back-to-top a {
display: block;
padding: 10px;
cursor: pointer;
opacity: 0;
transition: all .35s ease-in-out;
}
.back-to-top a:hover {
transform: scale(1.1, 1.1);
}
/* Space */
.space {
min-height: 15vh;
}
.large-space {
min-height: 35vh;
}
/* Global Classes */
.flexbox {
display: flex;
justify-content: center;
align-items: center;
}
.flexbox-col {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* Normal classes */
/* Navbar */
#navbar {
top: 0;
width: 100%;
height: 4.5em;
background-color: var(--bc);
display: grid;
grid-template-columns: 1fr 30% 35% 1fr;
position: fixed;
z-index: 500;
}
.nav-left-space {
grid-column: 1;
}
.nav-right-space {
grid-column: 4;
}
.nav-left {
height: 100%;
grid-column: 2;
display: flex;
justify-content: flex-start;
align-items: center;
}
.nav-right {
height: 100%;
grid-column: 3;
display: flex;
justify-content: flex-end;
align-items: center;
}
/* Nav Button */
.nav-button {
margin: 0;
width: 2em;
height: 1.5em;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .35s cubic-bezier(.175,.685,.32,1.175);
-moz-transition: .35s cubic-bezier(.175,.685,.32,1.175);
-o-transition: .35s cubic-bezier(.175,.685,.32,1.175);
transition: .35s cubic-bezier(.175,.685,.32,1.175);
cursor: pointer;
z-index: 110;
}
.nav-button span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: var(--white);
border-radius: 19px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .35s cubic-bezier(.175,.685,.32,1.175);
-moz-transition: .35s cubic-bezier(.175,.685,.32,1.175);
-o-transition: .35s cubic-bezier(.175,.685,.32,1.175);
transition: .35s cubic-bezier(.175,.685,.32,1.175);
}
.nav-button span:nth-child(1) {
top: 0;
}
.nav-button span:nth-child(2),.nav-button span:nth-child(3) {
top: 0.75em;
}
.nav-button span:nth-child(4) {
top: 1.5em;
}
.nav-button.open span:nth-child(1) {
top: 2em;
width: 0;
}
.nav-button.open span:nth-child(2) {
width: 100%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-button.open span:nth-child(3) {
width: 100%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nav-button.open span:nth-child(4) {
top: 18px;
width: 0;
left: 50%;
}
/* Navbar Items */
#navbar-items {
padding: 0;
list-style-type: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
.navbar-items {
padding: 0;
margin: .5em 0 2em 0;
list-style-type: none;
display: flex;
justify-content: flex-start;
align-items: center;
}
.no-desk {
display: none;
}
.navbar-item {
margin: 0 .75em;
line-height: 0;
color: var(--white);
font-size: 1.22rem;
font-weight: 300;
cursor: pointer;
}
.nb-item-last {
margin: 0 0 0 1em;
}
.navbar-item-inner {
margin: 0;
text-decoration: none;
color: var(--white);
transition: color .3s;
}
.navbar-item-inner:hover {
color: var(--primary);
}
.navbar-item-inner-red {
margin: 0;
position: relative;
text-decoration: none;
color: var(--white);
transition: color .3s;
}
.navbar-item-inner-red:hover {
color: var(--red);
}
.navbar-item-inner-red::before {
content: 'We are working on this page';
color: var(--red);
padding: 1em;
display: none;
position: absolute;
left: -100%;
top: 50px;
width: 300%;
opacity: 0;
transition: opacity .2s ease-in-out;
}
.navbar-item-inner-red:hover::before {
display: inline-block;
opacity: 1;
}
.navbar-item-inner-red::after {
border-bottom: 2px solid var(--red);
content: '';
display: block;
position: relative;
left: 0;
top: -10px;
transition: width .3s;
width: 0;
}
.navbar-item-inner-red:hover::after {
width: 102%;
}
.navbar-item-inner::after {
border-bottom: 2px solid var(--primary);
content: '';
display: block;
position: relative;
left: 0;
top: 6px;
transition: width .3s;
width: 0;
}
.navbar-item-inner:hover::after {
width: 102%;
}
.navbar-item-inner-active {
margin: 0;
text-decoration: none;
color: var(--white);
}
.navbar-item-inner-active::after {
border-bottom: 2px solid var(--primary);
content: '';
display: block;
position: relative;
left: 0;
top: 14px;
transition: width .3s;
width: 100%;
}
/* Menu */
#menu {
top: 4.5em;
width: 100%;
background-color: var(--bc);
display: none;
grid-template-columns: 1fr 21.66% 21.66% 21.66% 1fr;
position: fixed;
overflow: hidden;
z-index: 450;
}
.menu-left-space {
display: inline-block;
grid-column: 1;
}
.menu-right-space {
display: inline-block;
grid-column: 5;
}
.menu-left {
display: inline-block;
grid-column: 2;
color: var(--white);
}
.menu-left h3 {
margin: 0 .75em .5em .75em;
}
.menu-center {
display: inline-block;
grid-column: 3;
color: var(--white);
}
.menu-center h3 {
margin: 0 .75em .5em .75em;
}
.menu-right {
display: inline-block;
grid-column: 4;
color: var(--white);
}
.menu-right h3 {
margin: 0 .75em .5em .75em;
}
/* Menu Items */
.menu-items {
margin: 0 .75em;
padding: 0 0 2em 0;
list-style-type: none;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
.menu-item {
margin: .45em 0;
line-height: 0;
color: var(--white);
font-size: 1.22rem;
font-weight: 300;
cursor: pointer;
}
.menu-item-inner {
margin: 0;
text-decoration: none;
color: var(--white);
transition: color .3s;
}
.menu-item-inner:hover {
color: var(--primary);
}
.menu-item-inner::after {
border-bottom: 2px solid var(--primary);
content: '';
display: block;
position: relative;
left: 0;
top: 6px;
transition: width .3s;
width: 0;
}
.menu-item-inner:hover::after {
width: 102%;
}
.menu-item-inner-active {
margin: 0;
text-decoration: none;
color: var(--white);
}
.menu-item-inner-active::after {
border-bottom: 2px solid var(--primary);
content: '';
display: block;
position: relative;
left: 0;
top: 14px;
transition: width .3s;
width: 100%;
}
/* User Profile */
.user-header-wrapper {
width: 100%;
position: relative;
}
.user-icon-wrapper {
width: 100%;
position: absolute;
z-index: 12;
}
.user-icon {
width: 100%;
display: block;
border-radius: 50%;
border: .5em solid var(--bc);
background-color: var(--bc);
z-index: 12;
}
.user-header-inner {
z-index: 5;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.user-header-overlay {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, .15);
z-index: 6;
}
.user-header {
width: 100%;
height: 100%;
}
.username-wrapper {
width: 100%;
position: relative;
}
.username-dev {
margin: 0;
display: inline-block;
color: var(--m-blue);
font-size: 2em;
cursor: default;
}
.uname-verified {
margin: 0 0 0 .25em;
width: 25px;
cursor: default;
}
.verified {
width: 100%;
color: var(--black);
background-color: var(--white);
font-family: var(--font-slim);
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 900;
text-align: center;
border-radius: 5px;
font-size: 1em;
padding: .25em;
position: absolute;
pointer-events: none;
top: 150%;
left: 0;
opacity: 0;
transition: all .5s cubic-bezier(.175,.885,.32,1.275);
}
.verified::before {
content: "";
display: block;
width: 0;
height: 0;
transform: rotateZ(-90deg);
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid var(--white);
position: absolute;
top: -15px;
left: 50%;
}
.user-info-bar {
width: 100%;
display: grid;
padding: .75em 0 1em 0;
background-color: var(--bc);
grid-template-columns: 1fr 10% 35% 20% 1fr;
grid-template-rows: auto;
grid-template-areas:
".ufo-bar-col1 .ufo-bar-col2 .ufo-bar-col3 .ufo-bar-col4 .ufo-bar-col5";
}
.ufo-bar-col2-inner {
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
.ufo-bar-col3-inner {
display: flex;
padding: .5em 0;
position: relative;
justify-content: flex-start;
align-items: center;
}
.username-wrapper-outer {
display: flex;
margin: 0 0 0 1.5em;
justify-content: center;
flex-direction: column;
align-items: flex-start;
}
.ufo-bar-bio {
color: var(--gray);
}
.ufo-bar-col3-inner {
width: 100%;
height: 100%;
}
.ufo-bar-fff {
margin: .25em .5em 0 0;
color: var(--dark);
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.ufo-bar-fff span {
color: var(--dark);
font-weight: 600;
}
.ufo-bar-fff-active {
margin: .25em .5em;
color: var(--primary);
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.ufo-bar-fff-active span {
font-weight: 600;
}
.ufo-bar-col4-inner {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.ufo-bar-col5 {
}
.user-info-bar2 {
width: 100%;
display: grid;
color: var(--white);
background-color: var(--bc);
grid-template-columns: 1fr 16.25% 16.25% 16.25% 16.25% 1fr;
grid-template-rows: auto;
grid-template-areas:
".ufo-bar2-col1 .ufo-bar2-col2 .ufo-bar2-col3 .ufo-bar2-col4 .ufo-bar2-col6 .ufo-bar2-col7";
}
.ufo-bar2-block-active {
position: relative;
cursor: default;
}
.ufo-bar2-block {
border-bottom: 3px solid var(--bc);
cursor: pointer;
}
.ufo-bar2-block span {
margin: 0 .3em;
color: var(--dark);
}
.ufo-bar2-block h3 {
color: var(--white);
font-weight: 500;
}
.ufo-bar2-block:after {
content:"";
background: var(--gradient);
background-size: 700%;
display: block;
height: 3px;
width: 100%;
bottom: 0;
}
.ufo-bar2-col2-inner {
width: 100%;
}
.ufo-bar2-col3-inner {
width: 100%;
}
.ufo-bar2-col4-inner {
width: 100%;
}
.ufo-bar2-col5-inner {
width: 100%;
}
.ufo-bar2-col6-inner {
width: 100%;
}
/* Button 2 */
.button2, .btn-secondary2 {
margin: 0 .4em;
position: relative;
cursor: pointer;
padding: .9em 1em;
letter-spacing: .1em;
text-align: center;
font-weight: 300;
color: var(--bc);
font-size: var(--button-small);
background: var(--gradient2);
background-size: 1100%;
border-radius: 50px;
border: none;
transform: scaleX(1);
transition: background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275);
transition: transform .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955);
transition: transform .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.button2 {
transition: bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275);
transition: transform .3s cubic-bezier(.175,.885,.32,1.275),bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955);
transition: transform .3s cubic-bezier(.175,.885,.32,1.275),bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.button2, .button2 .btn-secondary2 {
background-position: 0 50%;
bottom: 0;
}
.button2 .btn-secondary2 {
left: 0;
width: 90%;
position: absolute;
filter: blur(16px);
opacity: .9;
z-index: -1;
transform: scale3d(.9, .9, 1);
transition: bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275),-webkit-filter .3s cubic-bezier(.175,.885,.32,1.275);
transition: transform .3s cubic-bezier(.175,.885,.32,1.275),filter .3s cubic-bezier(.175,.885,.32,1.275),bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955);
transition: transform .3s cubic-bezier(.175,.885,.32,1.275),filter .3s cubic-bezier(.175,.885,.32,1.275),bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275),-webkit-filter .3s cubic-bezier(.175,.885,.32,1.275);
}
.button2:focus, .button2:hover {
transform: scale3d(1.1, 1.1, 1);
background-position: 100% 50%;
outline: none;
bottom: 2px;
}
.button2:focus .btn-secondary2, .button2:hover .btn-secondary2 {
background-position: 100% 50%;
filter: blur(25px);
bottom: -5px;
}
/* Footer */
#footer {
width: 100%;
min-height: 30vh;
padding: 25vh 0 0 0;
}
.footer-logo-wrapper {
width: 100%;
}
.footer-logo {
padding: 5vh 0 10vh 0;
width: 115px;
opacity: 1;
}
.footer-inner {
width: 80%;
min-height: 25vh;
}
.footer-left {
width: 50%;
height: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.footer-left a {
color: var(--white);
font-size: 1.11rem;
letter-spacing: .1em;
font-weight: 300;
cursor: pointer;
transition: color .2s ease-in-out;
}
.footer-left a:hover {
color: var(--primary);
}
.footer-ico {
width: 25px;
}
.footer-right {
width: 50%;
height: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
}
.footer-links {
margin: 0 0 1.5em 0;
}
.footer-link {
margin: 0 1em;
color: var(--white);
cursor: pointer;
text-decoration: none;
transition: color .2s ease-in-out;
}
.footer-link:hover {
color: var(--primary);
}
.fl-first {
margin: 0 1em 0 0;
}
.fl-last {
margin: 0 0 0 1em;
}
.footer-text {
margin: 1em .5em;
color: var(--gray);
font-size: .85em;
width: 50%;
transition: color .2s ease-in-out;
}
.footer-sites {
color: var(--gray);
font-size: .85em;
}
.footer-sites a {
margin: 0 .5em;
color: var(--white);
border-bottom: 1px solid var(--white);
text-decoration: none;
font-size: .8em;
cursor: pointer;
transition: all .2s ease-in-out;
}
.footer-sites a:hover {
color: var(--primary);
border-bottom: 1px solid var(--primary);
}
/* Selection */
::selection {
color: var(--white);
background: var(--primary);
}
/* SCROLLBAR */
::-webkit-scrollbar-track {
background-color: #F5F5F5;
}
::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-color: var(--primary);
}
/* @keyframes */
@keyframes menufade {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes menufade-back {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes header-btn {
0% { top: 0; }
50% { top: 8px; }
100% { top: 0; }
}
/* @media rules */
@media (max-width: 1440px) {
#navbar {
grid-template-columns: 1fr 30% 45% 1fr;
}
#menu {
grid-template-columns: 1fr 25% 25% 25% 1fr;
}
.user-info-bar {
grid-template-columns: 1fr 13% 42% 20% 1fr;
}
.user-info-bar2 {
grid-template-columns: 1fr 18.75% 18.75% 18.75% 18.75% 1fr;
}
}
@media (max-width: 1024px) {
#navbar {
grid-template-columns: 1fr 25% 60% 1fr;
}
#menu {
grid-template-columns: 1fr 28.33% 28.33% 28.33% 1fr;
}
.user-info-bar {
grid-template-columns: 1fr 18% 46% 21% 1fr;
}
.user-info-bar2 {
grid-template-columns: 1fr 21.25% 21.25% 21.25% 21.25% 1fr;
}
.user-info-inner {
width: 80%;
}
.ufo-text {
display: none;
}
.ufo-num {
color: var(--white);
}
.footer-inner {
width: 100%;
flex-direction: column;
}
.footer-left {
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.footer-right {
width: 100%;
align-items: center;
justify-content: center;
}
.footer-mail {
margin: 2em 0 0 0;
}
.footer-links {
margin: 1.5em 0 1.5em 0;
}
.footer-text {
text-align: center;
}
.footer-sites {
margin: .5em 0 4em 0;
}
.fl-first {
margin: 0 1em 0 1em;
}
.fl-last {
margin: 0 1em 0 1em;
}
.button2, .btn-secondary2 {
letter-spacing: 0;
font-size: var(--button-smallest);
}
}
@media (max-width: 767px) {
#navbar {
grid-template-columns: 1fr 25% 65% 1fr;
}
#menu {
grid-template-columns: 1fr 30% 30% 30% 1fr;
}
.user-info-bar {
grid-template-columns: 1fr 21% 44% 25% 1fr;
}
.user-info-bar2 {
grid-template-columns: 1fr 23.75% 23.75% 23.75% 23.75% 1fr;
}
.user-info-inner {
width: 100%;
}
.username-dev {
font-size: 1.5em;
}
.uname-verified {
width: 19px;
}
.no-mob {
display: none;
}
.no-desk {
display: block;
}
.button2, .btn-secondary2 {
padding: .8em .8em;
letter-spacing: 0;
}
}
@media (max-width: 560px) {
#menu {
background-color: var(--bc);
grid-template-columns: 90%;
grid-template-rows: 1fr 1fr 1fr;
justify-content: center;
flex-direction: column;
align-items: center;
}
.menu-left {
grid-area: 1;
}
.menu-center {
grid-area: 2;
}
.menu-right {
grid-area: 3;
}
.menu-left-space {
display: none;
}
.menu-right-space {
display: none;
}
.username-dev {
font-size: 1.6em;
}
.uname-verified {
width: 21px;
}
.footer-link {
display: block;
margin: 1em 0 1em 0;
}
}
@media (max-width: 420px) {
.username-dev {
font-size: 1.5em;
}
.uname-verified {
width: 20px;
}
}
