@font-face {
  font-family: 'Goudy Trajan';
  src: url('../fonts/goudy_trajan/GoudyTrajan-Regular-trial.otf') format('woff2'),
       url('../fonts/goudy_trajan/GoudyTrajan-Regular-trial.otf') format('woff'),
       url('../fonts/goudy_trajan/GoudyTrajan-Regular-trial.otf') format('truetype');
}

@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/Orbitron/Orbitron-VariableFont_wght.ttf') format('woff2'),
       url('../fonts/Orbitron/Orbitron-VariableFont_wght.ttf') format('woff'),
       url('../fonts/Orbitron/Orbitron-VariableFont_wght.ttf') format('truetype');
}

::selection {
  background: rgba(245, 255, 153, 0.5); /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: rgba(245, 255, 153, 0.5); /* WebKit/Blink Browsers */
}

::-webkit-scrollbar {
    background-color: rgba(0, 0, 0, 0.4);
} 

::-webkit-scrollbar-thumb {
    background-color: rgba(25, 39, 54, 0.4);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(25, 39, 54, 0.6);
    -webkit-box-shadow: inset 0 0 6px rgba(25, 39, 54, 0.4);
}

::-webkit-scrollbar-thumb:active {
    background-color: rgba(25, 39, 54, 0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.4);
}

::-webkit-scrollbar-track {
    background-color: rgba(25, 39, 54, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(25, 39, 54, 0.4);
}

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

::-webkit-scrollbar-button {
    border-style: solid;
    height: 16px;
    width: 16px;
}

::-webkit-scrollbar-button:vertical:decrement {
  border-width: 0 7px 14px 7px;
  border-color: transparent transparent rgba(25, 39, 54, 0.5) transparent;
}

::-webkit-scrollbar-button:vertical:decrement:hover {
  border-color: transparent transparent rgba(25, 39, 54, 0.7) transparent;
}

::-webkit-scrollbar-button:vertical:decrement:active {
  border-color: transparent transparent rgba(25, 39, 54, 1) transparent;
}

::-webkit-scrollbar-button:vertical:increment {
  border-width: 14px 7px 0 7px;
  border-color: rgba(25, 39, 54, 0.5) transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:increment:hover {
  border-width: 14px 7px 0 7px;
  border-color: rgba(25, 39, 54, 0.7) transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:increment:active {
  border-width: 14px 7px 0 7px;
  border-color: rgba(25, 39, 54, 1) transparent transparent transparent;
}

body {
    background-color: #000;
}

:root{
  scrollbar-face-color: rgba(25, 39, 54, 0.3); /* Firefox 63 compatibility */
  scrollbar-track-color: rgba(0, 0, 0, 0.5); /* Firefox 63 compatibility */
  scrollbar-color: rgba(25, 39, 54, 0.3) rgba(25, 39, 54, 0.2);
}

.bricks {
    width: 91%;
    margin-left: 5%;
    margin-right: 5%;
    white-space: nowrap;
    opacity: 0;    
}

.brick {
    width: 4.5%;
    margin-bottom: -4px;
    margin-left: -2px;
}

.space {
    margin-right: 3.5%;
}

h1 {
    font-family: 'Goudy Trajan', sans-serif;
    font-size: 37px;
    margin-left: 5%;
    color: rgba(255, 0, 0, 0.5);
    text-shadow: 0 0 8px rgb(255, 0, 0);
    margin-top: 20px;
    margin-bottom: 25px;
}

h2 {
    font-family: 'Goudy Trajan', sans-serif;
    font-size: 30px;
    margin-left: 5%;
    margin-right: 5%;
    color: rgba(255, 0, 0, 0.8);
    text-shadow: 0 0 10px rgb(255, 0, 0);
    margin-top: 20px;
    margin-bottom: 40px;
}

.content {
    margin-left: 5%;
    margin-right: 5%;
    background-image: url("../images/background_2.jpg");
    background-size: cover;
    opacity: 0;
    margin-top: 4px;
    box-shadow: 0 0 20px rgb(0, 0, 0);
    padding: 10px;
    padding-bottom: 50px;
    z-index: 2;
}

.column1 p {
    margin-left: 5%;
    margin-right: 5%;
    font-size: 20px;
    color: #fff;
    font-family: 'Goudy Trajan', sans-serif;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.column1 p a {
    color: rgb(53, 154, 255);
    text-shadow: 0 0 10px rgb(53, 154, 255);
}

.column1 p a:hover {
    color: rgb(94, 174, 255);
    text-shadow: 0 0 20px rgb(94, 174, 255);
    text-decoration: none;
}

.qualifier {
    margin-left: 5%;
    margin-right: 5%;
    font-size: 12px;
    color: #aaa;
    font-family: 'Cambo', sans-serif;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

#youtube-link {
    color: rgb(255, 0, 0);
    text-shadow: 0 0 10px rgb(255, 0, 0);    
    opacity: 0.8;
}

#youtube-link:hover {
    opacity: 1.0;  
}

.column2 {
    padding-left: 5%;
}

#bioniker-trailer {
    -moz-box-shadow: 0 0 10px #FFFFFF;
    -webkit-box-shadow: 0 0 10px #FFFFFF;
    box-shadow: 0 0 10px #FFFFFF;    
}

#who-could-it-be, #so-evil {
    width: 120%;
    margin-top: 50%;
}

#who-could-it-be {
    margin-left: -15%;
}

#so-evil {
    margin-left: -7%;
}

.top-slider {
    position: relative;
    opacity: 0;
}

.topCarousel {
    opacity: 0;
    width: 90%;
    height: 0;
    padding-bottom: 45.5%;
    margin-left: 5%;
    margin-right: 5%;
    z-index: -1;
}

.bodyText {
    color: rgb(255, 255, 255);
    text-shadow: 0 0 10px rgb(255, 255, 255);
    font-family: 'Goudy Trajan', sans-serif;
    font-size: 200%;
    margin: auto;
    margin-top: 100px;
    text-align: center;
    transition: opacity 0.1s;
}

.shadow {
    color: rgb(0, 0, 0);
    text-shadow: 0 0 10px rgb(255, 0, 0);  
    font-weight: bold;
}

.hero {
    color: rgb(245, 255, 153);
    text-shadow: 0 0 10px rgb(245, 255, 153);    
}

.shite {
    color: rgb(81, 51, 27);
    text-shadow: 0 0 10px rgb(81, 51, 27);   
    font-size: 350%;
    font-weight: bold;
}

#masks {
    margin-top: 100px;
    width: 45vw;
}

#masks2 {
    width: 45vw;
}

.mask {
    width: 7vw;
}

.mask:hover {
    -moz-box-shadow: 0 0 10px #FFFFFF;
    -webkit-box-shadow: 0 0 10px #FFFFFF;
    box-shadow: 0 0 10px #FFFFFF;        
}

.mask-active {
    display: none;    
}

#maputa, #maputa-active {
    margin-left: 14.5vw;
}

#maputa:hover, #maputa-active:hover {
    -moz-box-shadow: 0 0 10px rgb(255, 0, 0);
    -webkit-box-shadow: 0 0 10px rgb(255, 0, 0);
    box-shadow: 0 0 10px rgb(255, 0, 0);    
}

#seventh_toa, #seventh_toa-active {
    margin-right: 14.5vw;
}

#seventh_toa:hover, #seventh_toa-active:hover {
    -moz-box-shadow: 0 0 10px rgb(245, 255, 153);
    -webkit-box-shadow: 0 0 10px rgb(245, 255, 153);
    box-shadow: 0 0 10px rgb(245, 255, 153);   
}

#protodermis {
    position: absolute;
    margin-left: 5px;
    margin-top: 110px;
    width: 100%;
    height: 22vw;
}

.bio {
    display: none;
}

#bioniker-bio {
    position: absolute;
    margin-left: 5px;
    margin-top: 100px;
    width: 100%;
    height: 27vw;
    background-image: url("../images/bioniker/slideshows/stone.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    font-size: 20px;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 5px rgb(255, 255, 255);
    padding-left: 5px;
    font-family: "Orbitron", sans-serif;
    border-radius: 5px;
}

.bio-slider {
    position: absolute;
    margin:auto;
    width: 94%;
    z-index: 0;
    -moz-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}

.text {
    position: absolute;
    z-index: 1;
    height: 88%;
    overflow-y: scroll;
    padding: 15px;
    width: 32%;
    margin-left: 62%;
    font-size: 18px;
}

#editors-note {
    font-family: "Times New Roman", serif;
    text-shadow: none;
    color: rgb(255, 255, 255);
    font-size: 16px;
}

.small {
    font-size: 16px;
}

#text-tahu {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(128, 32, 0, 0.8));
}

#text-tahu p::selection, #text-tahu b::selection, #text-tahu i::selection {
  background: rgba(128, 32, 0, 0.5); /* WebKit/Blink Browsers */
}

#text-tahu p::-moz-selection {
  background: rgba(128, 32, 0, 0.5); /* WebKit/Blink Browsers */
}

#text-gali {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(26, 54, 175, 0.8));
}

#text-gali p::selection, #text-gali b::selection, #text-gali i::selection {
  background: rgba(26, 54, 175, 0.5); /* WebKit/Blink Browsers */
}

#text-gali p::-moz-selection {
  background: rgba(26, 54, 175, 0.5); /* WebKit/Blink Browsers */
}

#text-pohatu {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(125, 61, 30, 0.8));
    width: 32%;
    margin-left: 62%;
    font-size: 18px;
}

#text-pohatu p::selection, #text-pohatu b::selection, #text-pohatu i::selection {
  background: rgba(128, 32, 0, 0.5); /* WebKit/Blink Browsers */
}

#text-pohatu p::-moz-selection {
  background: rgba(128, 32, 0, 0.5); /* WebKit/Blink Browsers */
}

#text-lewa {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(42, 98, 42, 0.8));
}

#text-lewa p::selection, #text-lewa b::selection, #text-lewa i::selection {
  background: rgba(42, 98, 42, 0.5); /* WebKit/Blink Browsers */
}

#text-lewa p::-moz-selection {
  background: rgba(42, 98, 42, 0.5); /* WebKit/Blink Browsers */
}

#text-kopaka {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(200, 200, 200, 0.8));
}

#text-kopaka p::selection, #text-kopaka b::selection, #text-kopaka i::selection {
  background: rgba(255, 255, 255, 0.5); /* WebKit/Blink Browsers */
}

#text-kopaka p::-moz-selection {
  background: rgba(255, 255, 255, 0.5); /* WebKit/Blink Browsers */
}

#text-onua {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(51, 62, 91, 0.8));
}

#text-onua p::selection, #text-onua b::selection, #text-onua i::selection {
  background: rgba(24, 218, 31, 0.5); /* WebKit/Blink Browsers */
}

#text-onua p::-moz-selection {
  background: rgba(24, 218, 31, 0.5); /* WebKit/Blink Browsers */
}

#text-tapua {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(25, 92, 184, 0.9));
}

#text-tapua p::selection, #text-tapua b::selection, #text-tapua i::selection {
  background: rgba(25, 92, 184, 0.5); /* WebKit/Blink Browsers */
}

#text-tapua p::-moz-selection {
  background: rgba(25, 92, 184, 0.5); /* WebKit/Blink Browsers */
}

#text-jaller {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(191, 120, 0, 0.8));
}

#text-jaller p::selection, #text-jaller b::selection, #text-jaller i::selection {
  background: rgba(191, 120, 0, 0.5); /* WebKit/Blink Browsers */
}

#text-jaller p::-moz-selection {
  background: rgba(191, 120, 0, 0.5); /* WebKit/Blink Browsers */
}

#text-hahli {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(53, 104, 180, 0.8));
}

#text-hahli p::selection, #text-hahli b::selection, #text-hahli i::selection {
  background: rgba(53, 104, 180, 0.5); /* WebKit/Blink Browsers */
}

#text-hahli p::-moz-selection {
  background: rgba(53, 104, 180, 0.5); /* WebKit/Blink Browsers */
}

#text-vakama {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(226, 101, 8, 0.8));
    width: 32%;
    margin-left: 62%;
    font-size: 18px;
}

#text-vakama p::selection, #text-vakama b::selection, #text-vakama i::selection {
  background: rgba(226, 101, 8, 0.5); /* WebKit/Blink Browsers */
}

#text-vakama p::-moz-selection {
  background: rgba(226, 101, 8, 0.5); /* WebKit/Blink Browsers */
}

#text-nokama {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(106, 114, 184, 0.8));
    width: 30%;
    margin-left: 64%;
    font-size: 18px;
}

#text-nokama p::selection, #text-nokama b::selection, #text-nokama i::selection {
  background: rgba(106, 114, 184, 0.5); /* WebKit/Blink Browsers */
}

#text-nokama p::-moz-selection {
  background: rgba(106, 114, 184, 0.5); /* WebKit/Blink Browsers */
}

#text-onewa {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(159, 128, 78, 0.8));
    width: 32%;
    margin-left: 62%;
    font-size: 18px;
}

#text-onewa p::selection, #text-onewa b::selection, #text-onewa i::selection {
  background: rgba(159, 128, 78, 0.5); /* WebKit/Blink Browsers */
}

#text-onewa p::-moz-selection {
  background: rgba(159, 128, 78, 0.5); /* WebKit/Blink Browsers */
}

#text-reggie {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(108, 37, 26, 0.8));
}

#text-reggie p::selection, #text-reggie b::selection, #text-reggie i::selection {
  background: rgba(108, 37, 26, 0.5); /* WebKit/Blink Browsers */
}

#text-reggie p::-moz-selection {
  background: rgba(108, 37, 26, 0.5); /* WebKit/Blink Browsers */
}

#text-boss {
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(116, 20, 18, 0.7));
}

#text-boss p::selection, #text-boss b::selection, #text-boss i::selection {
  background: rgba(116, 20, 18, 0.5); /* WebKit/Blink Browsers */
}

#text-boss p::-moz-selection {
  background: rgba(116, 20, 18, 0.5); /* WebKit/Blink Browsers */
}

#text-poopoo {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(65, 46, 41, 0.8));
}

#text-poopoo p::selection, #text-poopoo b::selection, #text-poopoo i::selection {
  background: rgba(65, 46, 41, 0.5); /* WebKit/Blink Browsers */
}

#text-poopoo p::-moz-selection {
  background: rgba(65, 46, 41, 0.5); /* WebKit/Blink Browsers */
}

#text-watu {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(93, 69, 35, 0.8));
}

#text-watu p::selection, #text-watu b::selection, #text-watu i::selection {
  background: rgba(93, 69, 35, 0.5); /* WebKit/Blink Browsers */
}

#text-watu p::-moz-selection {
  background: rgba(93, 69, 35, 0.5); /* WebKit/Blink Browsers */
}

#text-snowface {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(59, 72, 102, 0.8));
}

#text-snowface p::selection, #text-snowface b::selection, #text-snowface i::selection {
  background: rgba(59, 72, 102, 0.5); /* WebKit/Blink Browsers */
}

#text-snowface p::-moz-selection {
  background: rgba(59, 72, 102, 0.5); /* WebKit/Blink Browsers */
}

#text-cahkshi {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(21, 133, 31, 0.7));
}

#text-cahkshi p::selection, #text-cahkshi b::selection, #text-cahkshi i::selection {
  background: rgba(21, 133, 31, 0.5); /* WebKit/Blink Browsers */
}

#text-cahkshi p::-moz-selection {
  background: rgba(21, 133, 31, 0.5); /* WebKit/Blink Browsers */
}

#text-maputa {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(115, 12, 8, 0.8));
}

#text-maputa p::selection, #text-maputa b::selection, #text-maputa i::selection {
  background: rgba(115, 12, 8, 0.5); /* WebKit/Blink Browsers */
}

#text-maputa p::-moz-selection {
  background: rgba(115, 12, 8, 0.5); /* WebKit/Blink Browsers */
}

#text-seventh-toa {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(194, 171, 102, 0.8));
    width: 32%;
    margin-left: 62%;
    font-size: 18px;
}

#text-seventh-toa p::selection, #text-seventh-toa b::selection, #text-seventh-toa i::selection {
  background: rgba(245, 255, 153, 0.5); /* WebKit/Blink Browsers */
}

#text-seventh-toa p::-moz-selection {
  background: rgba(245, 255, 153, 0.5); /* WebKit/Blink Browsers */
}

#select-a-mask {
    text-align: center;
    margin-right: 5%;
    margin-top: 4%;
    font-size: 100%;
}

.twitter {
    width: 100%;
    height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-right: 0;
    margin-bottom: 10px;
}

footer {
    height: 300px;
    background-image: linear-gradient(rgb(0,0,0), rgb(25,39,54));
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 100px;
    box-shadow: 0 0 10px rgb(0, 0, 0);
    opacity: 0;
    position: relative;
}

.footer-nav {
    width: 100%;
}

.footer-link-list {
    margin-left: 20%;
    margin-right: 5%;
}

.footer-links td {    
    display: inline-block;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    font-size: 1.8vw;
    color: rgb(255, 255, 255);   
    text-decoration: none;
    font-family: 'Goudy Trajan', monospace;
    margin-left: 8%;
    margin-top: 10px;
    font-size: 1.9vw;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
}

.footer-links td a {
    font-size: 1.9vw;
    color: rgb(255, 255, 255);   
    text-decoration: none;
    opacity: 0.7;
}

.footer-links td a:hover {
    opacity: 1.0;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    z-index: 10;
}

.projects-list {
    list-style-type: none;
    float: right;
}

.projects-list li a {
    width: 100%;
}

.projects-list a {
    text-decoration: none;
}

.projects-list li {
    padding: 1px;
    box-shadow: 0 0 5px rgb(0, 0, 0);
    background: rgba(25, 39, 54, 1);
}

.projects-list li:hover {
    box-shadow: 0 0 1px rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.5);
}

#bioniker-footer, #nostalgiarush-footer, #dayz-footer {
    font-family: 'Goudy Trajan', sans-serif;
    font-size: 1.6vw;
    color: rgba(0, 0, 0, 1);
    padding: 10px;
    display: table-row;
    text-decoration: none;
}

#current-footer {
    color: rgb(245, 255, 153);
    text-shadow: 0 0 20px rgb(245, 255, 153);
}

.cb-logo {
    position: absolute;
    bottom: 5px;
    right: 5px;
    margin: auto;
    width: 10%;
    z-index: 2;
    margin-left: 90%;
    margin-top: 2%;
    opacity: 0.4;
}

.social {
    overflow: hidden;
    position: absolute;
}

.youtube-logo, .twitter-logo, .instagram-logo, .tiktok-logo, .twitch-logo {
    width: 6.0%;
    opacity: 0.6;
    position: absolute;
}

.youtube-logo {
    margin-left: 0%;
    background-image: url(../images/bioniker/bricks/brick4.png);
    background-size: cover;
}

.twitter-logo {
    margin-left: 6%;
    background-color: rgb(15, 0, 0);
    background-image: url(../images/bioniker/bricks/brick1.png);
    background-size: cover;
}

.instagram-logo, .tiktok-logo {
    margin-left: 12%;
    background-color: rgb(15, 0, 0);
    background-image: url(../images/bioniker/bricks/brick3.png);
    background-size: cover;
}

.twitch-logo {
    margin-left: 18%;
    background-color: rgb(15, 0, 0);
    background-image: url(../images/bioniker/bricks/brick4.png);
    background-size: cover;
}

#disclaimer {
    position: absolute;
    text-align: center;
    bottom: 0px;
    margin: auto;
    width: 100%;
    font-family: 'Cambo', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);    
}

#disclaimer a {
    color: rgb(245, 255, 153, 0.6);
    
}

#disclaimer p {
    margin: 0;
}

.youtube-logo:hover, .twitter-logo:hover, .instagram-logo:hover, .tiktok-logo:hover, .twitch-logo:hover {
    opacity: 1.0;
    margin-top: -1%;
    box-shadow: 0 0 12px rgb(255, 255, 255);
}

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  z-index: -20;
  right: 0;
}

.video-container video {
  opacity: 0.7;
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}