@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.loadingAnimationBackground{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.light-loading{
    background-color: #e0e0e0;
}

.dark-loading{
    background-color: #161616;
}


.loadingAnimationBackground h1{
    font-size: 5em;
    text-align: center;
    margin-top: 40vh;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.loadingAnimationContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1em;
    margin-top: 35vh;
}

.loadingAnimationBackground h1, .loadingAnimationContainer{
    z-index: 5;
    position: relative;
}

/* https://css-loaders.com/dots/ */
.light-loader {
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
    background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7 1s infinite linear;
}

.dark-loader{
    width: 60px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,#fff 90%,#0000);
    background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7 1s infinite linear;
}

@keyframes l7 {
      33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
      50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
      66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}

.differentColor{
    height: 0vh;
    width: 100vw;
    position: absolute;
    bottom: 0;
    animation: run 5s ease-out;
}

.light-diffColor{
    background-color: #f5f5f5;
}

.dark-diffColor{
    background-color:#000;
}


@keyframes run {
    0%{
        height: 0vh;
    } 100%{
        height: 100vh;
    }
}

.differentColor.complete{
    animation: complete 0.8s;
}

.loadingAnimationBackground.complete{
    animation: completeFinal 1.2s;
}

@keyframes complete{
    0%{
        bottom: 0vh;
    }
    100%{
        bottom: 100vh;
    }
}

@keyframes completeFinal {
    0%{
        top: 0vh;
    }100%{
        top: -100vh;
    }
}

body{
    overflow-y: hidden;
    overflow-x: hidden;
}

.firstSection{
    display: none;
    justify-content: center;
    align-items: center;
    height: 84vh;
    width: 80%;
    padding: 0px 10% 5vh 10%;
    gap: 5em;
    margin: 0 auto;
    margin-top: 84vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: local;
}

.firstSection h1 span:first-child{
    width: 100%;
    display: block;
}

.firstSection.show{
    display: flex;
    animation: showFirstSection 1s;
}

@keyframes showFirstSection{
    0%{
        margin-top: -84vh;
    }100%{
        margin-top: 0%;
    }
    
}

.firstSectionText{
    margin-right: 5vw; 
}

.firstSection h1{
    font-size: 5em;
}

.firstSection button{    
    font-size: 2vh;
    margin-top: 3vh;
    background: #0046d5;
    padding: 2vh 3vh;
    border-radius: 15px;
    color: #f8f9fa;
    box-shadow: 0px 4px 15px -5px #0046d5;
    font-weight: 700;
    border: none;
    cursor: pointer;
}



.roadmapConatnier{
    flex-direction: column;
    margin-top: -15vh;
}

.roadmap-ipv4, .roadmap-mods, .roadmap-ipv6{
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 2em;
    width: 100%;
    height: 80vh;
}

.roadmap-mods{
    flex-direction: row-reverse;
    align-items: center;
    height: 100vh;
}

.roadmap-mods .roadmap-text{
    justify-content: center;
    padding-left: 0%;
    padding-right: 10%;
    font-size: 225%;
}

.roadmap-ipv6{
    align-items: start;
}

.roadmap-ipv6 .roadmap-text{
    justify-content: start;
    margin-top: 5vh;
    height: 75vh;
}
/*https://www.w3schools.com/HOWTO/howto_css_circles.asp*/
.dot {
    height: 5vh;
    width: 5vh;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
  }

/*https://www.w3schools.com/howto/howto_css_vertical_line.asp*/
.vl {
    background: #bbb;
    height: 5vh;
    width: 6px;
    margin: 0 auto;
}

.vl-margin{
    margin-top: -10%;
}

html {
	scroll-snap-type: y proximity;
}

.roadmap-ipv4 .roadmap{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: end;
}

.roadmap-ipv6 .roadmap{
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: -1%;
}   

.roadmap-img{
    width: 40%;
    /* height: 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
    /*https://stackoverflow.com/questions/45040451/remove-the-background-of-an-image-in-css*/
    /* mix-blend-mode: multiply; */
}

.roadmap-text{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: start;
    flex-direction: column;
    padding-left: 10%;
    font-size: 200%;
}

.roadmap-text a {
    font-size: 2vh;
    margin-top: 5vh;
    background: #0046d5;
    /* padding: 2vh 3vh; */
    border-radius: 15px;
    box-shadow: 0px 4px 15px -5px #0046d5;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

.roadmap-text a{
    color: #f8f9fa;
    padding: 2vh 3vh;
    display: block;
}


@media screen and (width <= 1700px){
    .roadmapConatnier{
        background-position-y: -25rem;
    }
    
    .firstSection h1 {
        font-size: 3em;
    }

    .roadmap-img img{
        width: 100%;
        overflow-y: hidden;
    }

    .roadmap-text{
        font-size: 100%;
    }

    .roadmap-mods .roadmap-text{
        font-size: 100%;
    }
    
    .roadmap-ipv6 .roadmap-img img{
        width: 50%;
    }

    .firstSection img{
        width: 100%;
    }

    .roadmap-ipv6{
        height: 75vh;
    }

    .roadmap-ipv6 .roadmap-text {
        margin-top: 5vh;
        height: 70vh;
    }
}

@media screen and (width <= 1024px) {
    .firstSectionText{
        margin-right: 0vw; 
    }
}

@media screen and (width <= 450px){
    .firstSection {
        flex-direction: column;
    }

    .roadmap-img{
        display: none;
    }

    .roadmap-mods{
        flex-direction: row;
    }

    .roadmap-ipv4, .roadmap-mods, .roadmap-ipv6{
        justify-content: left;
        padding-left: 4%;
        width: 95%;
    }

    .roadmap{
        width: 42px;
    }

    .roadmap-text{
        width: 75%;
        padding-left: 0%;
        padding-right: 0%;
    }

    .roadmap-mods .roadmap-text{
        width: 75%;
        padding-left: 0%;
        padding-right: 0%;
    }

    .roadmap-ipv6 .roadmap-text{
        height: 50vh;
        margin-top: 10vh;
    }
}