.typewriter-text1 {
animation-name: typewriter1;
}



.typewriter-text1{
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 15s;
animation-timing-function: steps(45, end);
animation-iteration-count: infinite;
}

.typewriter-text1::after {
content: "|";
position: absolute;
animation: caret infinite;
animation-duration: 0.5s;
animation-timing-function: steps(1, end);
}

@keyframes typewriter1 {
0%,
50%,
100% {
 width: 0;
}
10%,
40% {
 width: 25em;
}
}

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

body {
 margin: 0;
 padding: 0;
 background-color: black;
 overflow: hidden;
 font-family: "Brandon Light";
 color: white;
 user-select: none;
 opacity: 0;
 transition: opacity 2s;
 -webkit-transition: opacity 5s; /* Safari */
}

a {
 color: white;
 text-decoration: none;
 padding: 0;
}

.center {
 position: absolute;
 text-align: center;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);

}

#border {
 position: absolute;
 width: 100%;
 height: 100%;
 box-sizing: border-box;
 pointer-events: none;
 z-index: -1;
}


#borderTop, #borderBottom {
 position: absolute;
 width: 0%;
 height: 4px;
 background-color: rgb(58, 10, 10);
}

#borderRight, #borderLeft {
 position: absolute;
 width: 3px;
 height: 0%;
 background-color: rgb(58, 10, 10);
}

video {
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 z-index: -2;
 filter: blur(5px) brightness(30%);
 pointer-events: none;
}

#test p {
 opacity: 0;
}

pre {
 -webkit-animation: fadein 2s;
 font-weight: bold;
 font-size: 16px;
 user-select: none;
 color: rgb(58, 10, 10);
 background: repeating-linear-gradient(120deg, rgb(255, 255, 255) 0%, rgb(117, 117, 117) 40%, rgb(255, 255, 255) 60%);
 background-size: 60vw 60vw;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 animation: slide 5s linear infinite forwards;
}

@keyframes slide {
 0% {
     background-position-x: 0%;
 }
 100% {
     background-position-x: 60vw;
 }
}

pre2 {
 font-weight: bold;
 font-size: 16px;
 user-select: none;
 color: rgb(255, 255, 255);
 background: repeating-linear-gradient(120deg, rgb(12, 0, 116) 0%, rgb(65, 125, 255) 40%, rgb(0, 38, 255)60%);
 background-size: 60vw 60vw;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 animation: slide2 5s linear infinite forwards;
}

@keyframes slide2 {
 0% {
     background-position-x: 0%;
 }
 100% {
     background-position-x: 60vw;
 }
}


#widgetContainer {
 opacity: 0;
 position: absolute;
 right: 20px;
 top: 20px;
 width: 400px;
 height: 38px;
 background: repeating-linear-gradient(120deg, rgb(0, 101, 160) 0%, rgb(160, 87, 255) 40%, rgb(48, 0, 110) 60%));
 background-size: 60vw 60vw;
 animation: slide 10s linear infinite forwards;
 transition: 1s;
}

#widget {
 position: absolute;
 width: 394px;
 height: 29px;
 margin: 3px;
 background-color: rgb(0, 101, 160);
 z-index: 1;
 transition: 2s;

}

#widgetMain {
 position: absolute;
 display: inline-flex;
 justify-content: space-between;
 margin-top: 3px;
 padding-right: 10px;
 padding-left: 10px;
 width: 374px;
 height: 29px;
 z-index: 2;
 background-color: rgb(0, 101, 160);
}

#burgerMenu {
 cursor: pointer;
}

#dropDownContent {
 display: none;
 opacity: 0;
 transition: 2s;
 width: 100%;
 height: 100%;
 position: absolute;
 margin-top: 30px;
}

#links {
 right: 5px;
 width: 100px;
 float: left;
 margin-top: -4px;
}

#groups {
 float: right;
 margin-top: 5px;
}

#dropDownContent div a {
 opacity: 0;
 transition: 1s;
 line-height: 18px;
}

#dropDownContent div span {
 margin-left: 10px;
 margin-right: 10px;
}

#groups a, #groups span {
 float: right;
}

.hitCount {
 position: fixed;
 bottom: 5px;
 right: 5px;
 transition: 3s;
 color: var(--color);
 font-size: 24px;
 opacity: 0;
 bottom: -3px;
}

a.hitCounter.badge-done0 {
 display: none!important;
}