@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: rgba(10, 46, 79, 1.0);
    background: radial-gradient(at center bottom, rgba(10, 46, 79, 1.0), rgba(0, 0, 0, 1.0));
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}

 #canvas1 {
    background: transparent;
    position: absolute;
}


section {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    margin: auto;
}

}

section h1 {
    font-size: calc(3.525rem + 3.3vw);
  }
  
  @media (min-width: 1200px) {
    section h1 {
      font-size: 9rem;
    }
  }

section h2 {
    font-size: calc(1.25rem + .5vw);
  }
  
  @media (min-width: 1200px) {
    section h2 {
      font-size: 2rem;
    }
  }

section h1 {
    text-align: center;
    position: relative;
    font-family: 'Lato', sans-serif;
    
    -webkit-font-smoothing: antialiased;
    align-items: center;
	user-select: none;
    color: white;
    margin: auto;
    letter-spacing: 1.5vh;
}

h2 {
    text-align: center;
    position: relative;
    color: white;
    margin: auto;
    font-family: 'Lato', sans-serif;
    align-items: center;
	user-select: none;
}

section h3 {
    color: white;
    font-family: 'Lato', sans-serif;
    
}

p {
    color: white;
    font-family: 'Lato', sans-serif;
}

.button {
    transform: translateY(20vh);
    float: inline-end;
    background-size: contain;
    position: center;
    z-index: 3;
}

.header {
    position: absolute;
    padding: -10px 0;
    background-size: contain;
    transform: translateY(10vh);
}


.center {
    position: absolute;
    padding: 10px 0;
    transform: translateX(4vh);
    
}

.fancy_card {
    opacity: 80%;
}

.fancy_card:hover {
    opacity: 100%;
    transform: translate3D(0,-1px,0) scale(1.05);
    transition: all .2s ease;
}




body {
    .background {
    }
    
    .parallax_wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 300px;
        scroll-behavior: smooth;
        scroll-snap-type: y proximity;
        

        .intro_screen { 
            height: 200vh;
            background: rgba(10, 46, 79, 1.0);
            background: radial-gradient(at center bottom, rgba(10, 46, 79, 1.0), rgba(0, 0, 0, 1.0));
            justify-content: center;
            align-items: center;
            display: flex;
        }


        .outro_screen {
            height: 100vh;
            background-color: teal;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .parallax_group {
            position: relative;
            height: 100vh;
            transform-style: preserve-3d;
            display: flex;
            justify-content: center;
            align-items: center;
            scroll-snap-align: center;
            scroll-snap-stop: always;

            .parallax_layer {
                position: absolute;
                inset: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                
            }

            .base_layer {
                transform: translateZ(-300px) scale(2.1);
                z-index: -1;

                background: rgba(10, 46, 79, 1.0);
                background: radial-gradient(at center top, rgba(11, 56, 82, 1.0), rgba(10, 46, 79, 1.0), rgba(5, 20, 55, 1.0), rgba(0, 0, 0, 1.0));
                
            }

            .mid_layer {
                pointer-events: none;
                transform: translateZ(0);
                
            }

            .top_layer {
                transform: translateZ(210px) scale(0.3);
            }
            .background_layer {
                pointer-events: none;
                transform: translateZ(0);
                background: #2E1B4B;
                background: radial-gradient(at center bottom, #2E1B4B, #01172A);
            }
        }

        #intro {
            z-index: 1;
        }
        

        #group-1 {
            z-index: -1;        
        }
        

        #group-1 > .base_layer {
            z-index: 10;        
            

        }
        
        #group-1 > .mid_layer {
            
        }

        #group-2 {
            z-index: ;
        }

        #group-2 > .mid_layer {
            background-color: rgb(189, 189, 189);
        }

        #outro {
            background-color: rgb(66, 66, 66);
            z-index: 3;
        }
    }
}