@import url('fonts.css');

:root {
    /* --color1: #000000;
    --color2: #150050;
    --color3: #3F0071;
    --color4: #610094;
    --altcolor1: #5e61fa;
    --altcolor2: #9391fa;
    --altcolor3: #bbb6ff;
    --altcolor4: #ffb9f6;
    --altcolor5: #adb2ff;
    --altcolor6: #b897ff;
    --hoverColor: rgba(0, 0, 0, 0.473);
    --headerimg: rgba(0, 0, 0, 0.705);
    --bigtextcolor: #a8aeff; */
    --color1: #000000;
    --color2: #150050;
    --color3: #3F0071;
    --color4: #610094;
    --altcolor1: #c5c5c5;
    --altcolor2: #b1b1b1;
    --altcolor3: #929292;
    --altcolor4: #c3dce7;
    --altcolor5: #b9bcdf;
    --altcolor6: #b897ff;
    --hoverColor: rgba(0, 0, 0, 0.473);
    --headerimg: rgba(0, 0, 0, 0.705);
    --bigtextcolor: #bcbedd;
    --fixedBG: url('/img/background/alaksiej-carankievic-xSgj9JUTiLg-unsplash.jpg');
}
a {
    color: var(--altcolor5);
    /* transition: color 0.5s, size 0.1s, font-size 2s ease 0s; */
    transition-property: color;
    transition-duration: 0.5s;
    transition-timing-function: ease;

    text-decoration: none;
}
.universalTransition, .universalTransition table a {
    transition: font-size 2s ease 0s, color 0.5s ease 0s;
}
#loadcover { 
    display: none;
    background-color: black;
    position: absolute;
    height: 100000vh;
    width: 100%;
    transition: height 0.5s ease;
    z-index: 999999;
}
.socialredir {
    /* position: absolute; */
    text-align: right;
    font-size: 0.5em;
}
#rottext {
    z-index: 998;
    position: relative;
    color: var(--bigtextcolor);
    /* transition: all 2s ease-in-out !important; */
}
.socialredir, #typethis {
    transition: all 2s ease 0s !important;
}
/* a:visited {
    color: var(--altcolor6);
}
.forehead a:visited {
    color: var(--altcolor3);
} */
.forehead.header, .forehead.header > * {
    transition: all 3s ease-in-out !important;
}
a:hover {
    color: var(--altcolor4);
}
a:hover:after {
    position: absolute;
    content: "?" !important;
    color: red;
    font-weight: 500;
    animation: 1.5s fadeinout linear infinite;
}
a:active {
    transition: color 0.3s;
    color: var(--altcolor1);
}
body {
    height: 300%;
    overflow-x: hidden !important;
}
html {
    scroll-behavior: smooth;
}
* {
    cursor: url('src/cursor/cur.png'), auto;
}
/* width */
::-webkit-scrollbar {
    width: 1px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #000;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--altcolor2);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color4);
  }
@keyframes fadeinout {
    0%,25%,100% { opacity: 0; }
    75% { opacity: 1; }
}
/* Overwrite the h1 to be normal. For SEO. */
h1 {
    display: inherit;
    font-size: inherit;
    margin-block-start: inherit;
    margin-block-end: inherit;
    margin-inline-start: inherit;
    margin-inline-end: inherit;
    font-weight: inherit;
}
h2 {
    display: inherit;
    font-size: inherit;
    margin-block-start: inherit;
    margin-block-end: inherit;
    margin-inline-start: inherit;
    margin-inline-end: inherit;
    font-weight: inherit;
    
    /* display: inherit !important;
    font-size: inherit !important;
    margin-block-start: inherit !important;
    margin-block-end: inherit !important;
    margin-inline-start: inherit !important;
    margin-inline-end: inherit !important;
    font-weight: inherit !important; */
}

::selection {
    background: var(--color2);
    color: var(--altcolor3);
  }
  ::-moz-selection {
    background: var(--color2); 
    color: var(--altcolor3);
  }

body {
    /* background: url('img/grunge.svg') var(--altcolor2); */
    /* background: url('img/grunge.svg'); */
    z-index: 0;
    /* background: url('img/grunge.png'), linear-gradient(180deg, #af13ff 0%, #c913ff 25%); */
    /* background: url('img/grunge.png'), linear-gradient(180deg, #af13ff 0%, #c813ffec 25%); */
    /* background-size: 800px; */
    /* background-color: red !important; */
    margin: 0;

    /* background: url('img/background/christian-lue-Kj0GmcL2Rww-unsplash-final.jpg') no-repeat; */
    background-size: cover;
    background-attachment: fixed;    
}
#fixedBG {
    content: var(--fixedBG);
    z-index: -1;
    position: fixed;
    min-width: 100%;
    height: auto;
}
#separator {
    height: 2%;
}

.socialredir a:hover:after {
    content: " " !important;
}
#socials {
    margin: 0 auto;
    padding-top: 0;
}
#socials table {
    width: 100%;
    margin: 0 auto;
    text-align: center !important;
    padding-bottom: 5%;
}
#socials img, .hide{
    display: none;
}
#socials div.grungeBackground {
    /* animation-duration: 5000s !important; */
    background: url('img/9.png'), rgba(0, 0, 0, 0.13);
    /* background-size: 100vw !important; */
}
#socials .headersocial {
    width: 100%;
    color: var(--altcolor4);
    text-align: center;
    font-family: headerfont;
    border-bottom: 1px solid var(--altcolor2);
}
#abody .tbborder {
    padding-top: 20%;
    transition: padding 3s ease-in-out;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.411), rgba(0, 0, 0, 0.568)), var(--headerimg) no-repeat;
    /* background: var(--headerimg) no-repeat; */
    /* background-color: white; */
    background-size: cover;
    background-blend-mode:screen;
    color: #fff;
    border-bottom: 1px dotted var(--altcolor1);
    /* filter: brightness(1); */
}
.tbborder {
    overflow: hidden;
}

.tbborder table {
    width: 100%;
}
.tbborder table tr td, #typeThis {
    font-family: stretch;
    font-size: 3.5vh;
    /* position: relative; */
    width: 50%;
    vertical-align: bottom;
}
.maindiv {
    /* padding-top: 5px; */
    margin: 0 auto;
    width: 100%;
    /* border: solid 3px var(--color1); */
    /* border-left: 2px solid black; */
    /* border-right: 2px solid black; */
    /* border-top: 2px solid black; */
    /* border-image: url('img/verborder.svg') 27 repeat; */
}
.tTable {
    /* position: relative; */
    /* margin: 0 25%; */
    /* width: 75%; */
    /* max-height: 100%; */
    border-collapse: collapse;
}

.tA {
    display: none;
    width: 5%;

    /* background-image: linear-gradient(black 80%, rgba(255,255,255,0) 0%); */
    /* background-position: right; */
    /* background-size: 2px 33px; */
    /* background-repeat: repeat-y; */
    /* border-right: 2px solid #000; */
}
.tB {
    z-index: 999;
    overflow: hidden;
    /* width: 15%; */

    /* background-image: linear-gradient(black 80%, rgba(255,255,255,0) 0%); */
    background-position: right;
    background-size: 2px 33px;
    background-repeat: repeat-y;
}

@keyframes slide {
    0% {
      background-position: 0 0;
    }
    100% {
      /* background-position: -1408.3467px 1122.52px; */
      background-position: 1122.52px -1408.3467px;

    }
  }
.grungeBackground {
    background: url(
        ) var(--color1);
    background-size: contain;
    background-attachment: fixed;
    background-position: 0 0;
    background-repeat: repeat;
    animation: slide 800s linear infinite;
}
.traspBackground {
    background: rgba(0, 0, 0, 0.425);
}
.traspBackground:hover {
    background: rgba(0, 0, 0, 0.725);
}
.tC.tcells {
    background-color: rgba(0, 2, 19, 0.329);
}
.fontclip {
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background: url('img/ifold.gif');
    background-attachment: fixed;
    background-position: 0 0;
    background-repeat: repeat;
    animation: slide 250s linear infinite;
    color: var(--altcolor2) !important;
}
.decbox {
    height: auto;
    z-index: 1;
    width: 100%;



    z-index: 1;
    margin: 0 auto;
    color: var(--altcolor2);
    text-align: center;
    font-size: 40px;
    /* margin-bottom: 2%; */
    transition: color 0.5s, padding 3s !important;

    border-bottom: 1px dotted var(--altcolor2);
}
    .decA {
        /* font-family: 'Times New Roman', Times, serif; */
        font-family: panton;
        /* writing-mode: vertical-rl; */
        /* vertical-align: middle; */
        /* padding: 150% 0 150% 0; */
    }
    .decB {
        font-size: 20px;
    }
    .decC {
        font-size: 20px;
        font-family: fontBody;
        /* padding-bottom: 105%; */
        /* padding-top: 2vh; */
    }
    .decFill {
        width: 100%;
        /* height: 92.92vh; */
        /* background: red; */
    }

.dectext {
    font-family: headerfont;
    text-align: center;
    transition: all 0.5s;
    color: #fff;
}
.dectext:hover {
    color: var(--altcolor3);
}
.decbox:hover {
    color: var(--altcolor3);
}
.postbody {
    z-index: 1;
    margin: 0 auto;
    /* width: 80%; */
    min-height: 20vh;
    margin-right: 0;
    position: relative;
    border-bottom: 1px dotted var(--altcolor1);
    /* margin-bottom: 5; */
    overflow: hidden;
    transition: all 5s;
}
#pI, #pI .postcontent table {
    min-height: 10vh !important;
}
#animatethis {
    transition: all 5s;
}
#coverheader {
    display: none;
    font-family: bebaskai;
    /* color: var(--color2); */
    color: white;
    font-size: 3.3vh;
    text-align: right;
}
#coolimg {
    transition: all 0.5s;
    display: none;
}
#randimg {
    filter: brightness (0.8), saturate(15.5%);
    transition: all 0.5s;
    height: auto;
    width: 100%;
}
.posttitle {
    max-width: 100%;
    padding-left: 5;
    padding-top: 2;
    padding-bottom: 2;
    font-family: headerfont;
    color: var(--altcolor2);
    border-bottom: solid 1px var(--altcolor1);
    font-size: 1.3vw;
    text-transform: uppercase;
}
.posttitle, .topbar table td {
    font-size: 1.7vh;
}
.tbborder, .tC {
    /* width: 100vw; */
    margin: 0 auto;
    transition: width 1s !important;
}
.postcontent td {
    font-size: 0.8rem;
    transition: all 2s;
}
@media (min-width: 1400px) {
    .posttitle, .topbar table td {
        font-size: 0.9vw;
    }
    .tbborder, .tC {
        width: 50vw;
    }
    .postcontent td {
        font-size: 1rem;
    }
    #abody .tbborder {
        padding-top: 15%;
    }
    #portraitVid {
        width: 15vw !important;
    }
}
#portraitVid {
    width: 50vw;
}
.postcontent {
    /* text-transform: uppercase; */
    padding: 5 5 0 5;
    font-family: fontBody;
    color: #fff;
    transition: background ease-in-out 0.3s !important;
}
.postcontent table {
    width: 100%;
    min-height: 20vh;
    transition: all 5s;
    line-height: 1.5em;

}
/* Scanlines from systemspace.network - stolen code & image - sorry this is just too good*/
.coverintro {
    cursor: url('src/cursor/help_r.png'), auto;
}
.coverintro:hover {
    animation: pulse 2s ease-in-out 0.2s infinite;
}
@keyframes pulse {
    0% {
        background-color: #000;
    } 50% {
        background-color: #070707fb;
    } 100% {
        background-color: #000;
    }
}
#mutepress {
    mix-blend-mode: difference;
}
body:after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    background-image: url('img/scan.png');
    background-repeat: all;
    background-position: 0px 0px;
    animation-name: Static;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(4);
}
@keyframes Static {
    0% { background-position: 0px 0px; }
    100% { background-position: 0px 4px; }
}
.postcontent td {
    color: white;
    vertical-align: top;
    text-align: right;
}
.postcontent .leftcontent {
    text-align: left;
}
td .rightcontent {
    margin-right: 0;
}

.rightcontent img {
    width: 100%;
}
.topbar {
    font-family: tsblock;
    border-bottom-style: dotted;    
}
.topbar table {
    color: var(--altcolor3);
    width: 100%;
    text-align: center;
}
.topbar table td {
    transition: inherit;
    border-right: 1px solid var(--altcolor1);
    padding: 0% 1.5vw 0% 1.5vw;
}
.topbar table td:last-of-type {
    border-right: 0px;
}
.expand, .accordion {
    transition: opacity 2s ease-in-out 3s, border-bottom 2s ease-in-out 2s, max-height 5s ease-in-out 5s, padding 1s ease-in-out 5s, border 1s ease-in-out 5s !important;
    --bgOne: rgba(18, 0, 36, 0.205);
    --bgTwo: rgba(3, 0, 39, 0.089);
    /* background: var(--bgOne); */
    /* background-image: linear-gradient(to bottom, var(--bgOne) 0%, var(--bgOne) 100%), linear-gradient(to bottom, var(--bgTwo) 0%, var(--bgTwo) 100%);
    background-clip: content-box, padding-box !important; */
    border-bottom: 0px dotted var(--altcolor3) !important;
}
.expand a {
    font-weight: bold;
}
.expand a:before {
    content: "//"
}
.accordion > .expand {
    padding: 0;
    max-height: 0;
    overflow: hidden;
}
.accordion:hover > .expand, .jshoveraccordion > .expand {
    transition: opacity 0.5s ease-in-out 0s, max-height 5s ease-in-out 0s, padding 0.5s ease-in-out 0s, background-color 3s ease-in-out 0s !important;
    max-height: 300vh;
    /* height: auto; */
    padding-bottom: 0vh;
    color: #fff;
    padding-top: 1vh;
    border-bottom: 1px dotted var(--altcolor2) !important;
}
.subdir {
    padding-left: 1vw;
}
.accordion .posttitle {
    color: var(--altcolor2);
}
.expand.postcontent div {
    /* margin: 0 auto; */
    /* width: fit-content; */
    user-select: none !important;
}
.tC.tcells {
    word-wrap: break-word;
    overflow: hidden;
}
.accordion  {
    min-height: 0vh !important;
}
.button {
    transition: all 0.2s ease-in-out;
    display: inline-block;
    text-align: center;
    vertical-align: center;
    cursor: pointer;
    position: relative;
    top: 0px;
    border: 0;
    box-shadow: 0px 3px var(--altcolor3);
    margin-bottom: 3px;
    font-family: panton;
    font-size: 13px;
    background-color: rgba(0, 0, 0, 0.658);
    color: var(--altcolor4);
    border: 0;
}
.button:hover {
    top: -2px;
    box-shadow: 0px 5px var(--altcolor3);
    color: var(--altcolor5);
}
.button:active {
    transition: all 0.1s;
    top: 2px;
    color: #000;
    background-color: var(--altcolor3);
    box-shadow: 0px 0px var(--altcolor6);
    color: var(--altcolor5);
}
#robloxContact #submit {
    width: 100%;
}
#robloxContact * {
    transition: all 0.5s;
}
#robloxContact *:focus {
    outline: none !important;
    background-color: #000000f6;
}
#robloxContact input, #robloxContact textarea {
    width: 100%;
    background-color: #000000b9;
    border: 0;
}
#robloxContact input {
    line-height: 0em;
    padding: 0;
    height: 15px !important;
    margin: 0;
    font-family: panton;
    color: var(--altcolor3) !important;
}
#robloxContact input:focus {
    font-family: terminal !important;
}
#robloxContact input::placeholder {
    font-family: panton;
    color: var(--altcolor1) !important;
}
#robloxContact input:focus::placeholder {
    font-family: terminal;
}
#robloxContact textarea {
    font-family: terminal;
    color: rgb(200, 230, 255);
}

#robloxContact notice:hover {
    background-color: black;
}
p {
    padding: 5px 0 5px 0;
    animation-duration: 5000s !important;
    background: url('img/9.png'), #000;
}
.hide {
    display: none;
}