/* BG GRADIENT ANIMATION ----------------------------------------------------------------*/

@-webkit-keyframes gradient_transition {
    0% {
        top: 0;
        left: 0;
    }
    50% {
        top: -200%;
        left: -200%;
    }
    100% {
        top: 0;
        left: 0;
    }
}
@-moz-keyframes gradient_transition {
    0% {
        top: 0;
        left: 0;
    }
    50% {
        top: -200%;
        left: -200%;
    }
    100% {
        top: 0;
        left: 0;
    }
}
@-o-keyframes gradient_transition {
    0% {
        top: 0;
        left: 0;
    }
    50% {
        top: -200%;
        left: -200%;
    }
    100% {
        top: 0;
        left: 0;
    }
}
@keyframes gradient_transition {
    0% {
        top: 0;
        left: 0;
    }
    50% {
        top: -200%;
        left: -200%;
    }
    100% {
        top: 0;
        left: 0;
    }
}
body {
    color: white;
    font-family: "Roboto";
    font-weight: lighter;
    overflow: hidden;
}
body::before, body::after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
body::before {
    content: "";
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
body::after {
    content: "";
    width: 400%;
    height: 400%;
    opacity: 1;
    background: -moz-linear-gradient(-45deg, #0d1116, #111215, #09191f, #141928);
    background: -webkit-linear-gradient(-45deg, #0d1116, #111215, #09191f, #141928);
    background: linear-gradient(-45deg, #0d1116, #111215, #09191f, #141928);
    -webkit-animation: gradient_transition 15s ease infinite;
    -moz-animation: gradient_transition 15s ease infinite;
    -o-animation: gradient_transition 15s ease infinite;
    animation: gradient_transition 15s ease infinite;
}

/* BODY --------------------------------------------------------------------------*/

 body {
   margin: 0;
   padding: 2rem;
   overflow: hidden;
   width: 100%;
   height: 100%;
 }

header {
    /* height: 100px; */
    width: 100%;
    /* background-color: white; */
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: flex-start;
    top: 7%;
}

.footer-txt-1 {
    writing-mode: vertical-rl;
    font-size: 1.1rem;
    bottom: 1.2rem;
    float: right;
    transform: rotate(0.5turn);
    opacity: 0.70;
    line-height: 1.15;
    margin: 0 3.2rem 3.2rem 0;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 200;
    color: #fff;
}

/* BG LINE NODE ANIMATION --------------------------------------------------------------------------*/

#bouncyBall {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
   /*background: #162334;*/
   /*background: -webkit-linear-gradient(to top, #111215, #162334);*/
   /*background: linear-gradient(to top, #111215, #162334);*/
 }

 /* Navigation Menu ------------------------------------------------------------ */

 .menu {
   display: flex;
   justify-content: space-between;
   max-width: 400px;
   margin: 0 auto;
   list-style: none;
 }

 .menu li {
   width: 110px;
   height: 50px;
   -webkit-transition: background-position-x 1.2s linear;
   transition: background-position-x 1.2s linear;
   text-align: center;
 }

 .menu li a {
   font-size: 16px;
   color: #fff;
   font-family: 'Nunito', sans-serif;
   font-weight: 700;
   text-decoration: none;
   -webkit-transition: all 0.45s;
   transition: all 0.45s;
 }

 .menu li:hover {
   background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
   -webkit-animation: line 1.2s;
   animation: line 1.2s;
 }

 .menu li:hover a {
   color: #44b6df;
 }

 .menu li:not(:last-child) {
   margin-right: 20px;
 }

 @-webkit-keyframes line {
   0% {
     background-position-x: 350px;
   }
 }

 @keyframes line {
   0% {
     background-position-x: 350px;
   }
 }

 /* Name Logo Animation --------------------------------------------------------------- */

 .fancy_text {
   position: absolute;
   left: 45%;
   top: -40%;
 }


 /* Main ------------------------------------------------------------- */


 main {
   height: 70%;
   width: 70%;
   /* background-color: #ddd; */
   position: absolute;
   /* top: 0%; */
   /* left: 14%; */
 }
 #three-container {
  position: absolute;

 }

 /* Pagination -----------------------------------------------------------------------*/

 .pagination {
   height: 5%;
   width: 70%;
   /* background-color: #eee; */
   position: absolute;
   bottom: 2%;
   left: 14%;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .pagination>ul {
   display: flex;
   padding: 0;
   margin: 0;
   width: 30%;
   justify-content:space-around;
   color: #90989b;
   font-family: sans-serif;
 }

 .pagination>ul>li {
   list-style: none;
   font-size: 1.5em;
 }
 .pagination>ul>li:hover {
  color: #2b7789;
  cursor: pointer;
 }

 .first {
  color: #90989b;
   display: flex;
   flex-direction: column;
   align-items:center;
 }
 .first > span {
   display: block;
   height: 40px;
   width: 2px;
   margin-top: 10px;
   background-color: #797b7f;
 }