:root {
    --color-1: black;
    /*     --color-1: rgb(0,0,0); */
    --main2-bg-color: rgb(11, 9, 11);
    --text1-color: rgb(255, 255, 255);

    --color-2: rgb(50, 50, 50);
    --neon-color-1: rgb(255, 35, 35);
    --neon-color-2: rgba(255, 35, 35, 0.733);
    --neon-color-3: white;
    --neon-color-4: white;;

    --fadein-dur: 1.5s;

    --roadmap-spacing: 60px;
    --roadmap-initial-spacing: 35px;
}

@font-face {
    font-family: myFont;
    src: url(../fonts/HWYGOTH.TTF)
}

.myFont {
    font-family: myFont;
    color: var(--neon-color-1);
}

.v8phrase {
    color: var(--text1-color);
    font-size: 60px;
}

.bg-black {
    background-color: var(--color-1);
}
.bg-white {
    background-color: white;
}

.my-black2-row {
    background-color: var(--main2-bg-color);
}

#img-header {
    width: 100%;
    max-width: 375px;
    height: auto;
    margin: auto;
    display: block;
}

body {
    background-color: var(--color-1);
}

.full-screen-video-container {
    position: relative;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.full-screen-video-container video {
    z-index: -1;
    position: absolute;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.neonText {
    color: var(--neon-color-1);
    text-shadow:
        0 0 7px var(--neon-color-1),
        0 0 10px var(--neon-color-1),
        /*       0 0 21px var(--neon-color-1), */
        0 0 42px var(--neon-color-2),
        0 0 82px var(--neon-color-2),
        0 0 92px var(--neon-color-2),
        0 0 102px var(--neon-color-2)
        /*       0 0 151px var(--neon-color-2); */
}

.myGradient {
    background: linear-gradient(to bottom, blue, white);
}


.box {
    position: relative;
    border-radius: 0.75rem;
    /* color: white; */
    /* background-color: rgb(235, 84, 188); */
    background-color: var(--color-2);
    padding-bottom: 1.5rem !important;
    padding-top: 1.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    min-height: 300px;
}

h3{
    color:white;
    font-size: 60px;
    font-family: myFont;
}

p{
    color:white;
    font-size: 25px;
    font-family: myFont;
}

.footer{
    color:white;
    font-size: 16px !important;
    font-family: myFont;
}

.neon-button {
    z-index: 2;
    font-size: 25px;
    font-family: myFont;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: var(--neon-color-3);
    border: var(--neon-color-3) 2px solid;
    padding: 10px 10px;
    border-radius: 10px;

    text-shadow: 0 0 2px var(--neon-color-4), 0 0 8px currentColor;

    box-shadow: inset 0 0 8px 0 var(--neon-color-4), 0 0 8px 0 var(--neon-color-4);
  }

  .neon-button:hover {
    color: var(--color-2);
    background: var(--neon-color-3);
    box-shadow: 0 0 5px var(--neon-color-4), 0 0 20px var(--neon-color-4), 0 0 40px var(--neon-color-4);
    transition-delay: 0;
}

.noHover{
    pointer-events: none;
}

.timeline{
    position: relative;
    width: 75px;
    height: 550px;
    margin-top: 0px;
    margin-left: 0px;

    border-top: 2px solid var(--neon-color-1);
    border-right: 2px solid var(--neon-color-1);
    border-left: 0px solid var(--neon-color-1);
    border-top-right-radius: 30px;

    box-shadow: inset 0 0 4px 4px var(--neon-color-2), 0 0 4px 4px var(--neon-color-2);
    clip-path: inset(-20px -20000px 20px 20px);
}

.tab-circle {
    position: absolute;
    width: 30px !important;
    height: 30px !important;
    
    border-radius: 50%;

    bottom: 0%;
    display: block;
    left: auto;
    right: -16px;
}

.circle-active{
    background-color: var(--color-1);
    box-shadow: inset 0 0 5px 5px var(--neon-color-2), 0 0 5px 5px var(--neon-color-2);
    border: 2px solid var(--neon-color-1); ;
}
.circle-inactive{
    background-color: var(--color-1);
    border: 2px solid var(--color-2); ;
}

#timeline-col{
    max-width: 125px;
}

.description{
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 30px;
    line-height: 25px;
    height: 25px;
}

.ds2{
    margin-top: 45px;
}

.ds-inactive{
    color: var(--color-2);
}

.ds-active{
    color: white;
}

#roadmap-header{
    z-index: -1000 !important;
}

.footer-logo{
    max-height: 50px;
}

.color-2{
    color: var(--color-2);
}





@media screen and (max-width:961px) {
    .full-screen-video-container video {
        max-width: 1300px !important;
    }

    .full-screen-video-container {
        height: 85vh;
    }
}

@media screen and (max-width:641px) {
    .full-screen-video-container video {
        max-width: 700px !important;
    }

    .full-screen-video-container {
        height: 55vh;
    }
}

@media screen and (max-width:320px) {
    .full-screen-video-container video {
        max-width: 500px !important;
    }

    .full-screen-video-container {
        height: 45vh;
    }
}

.fadein {
    -webkit-animation: fadein var(--fadein-dur); /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein var(--fadein-dur);  /* Firefox < 16 */
        -ms-animation: fadein var(--fadein-dur);  /* Internet Explorer */
         -o-animation: fadein var(--fadein-dur);  /* Opera < 12.1 */
            animation: fadein var(--fadein-dur); 
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}