#hero-page
{
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: space-between;
}

#contact-page
{
    position:        relative;

    display:         flex;

    flex-direction:  column;
    align-items:     center;
    justify-content: space-between;
    height:          100vh;
}

#about-page
{
    position:        relative;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    height:          100vh;

}

#options-page
{
    position:          relative;
    display:           flex;
    scroll-snap-align: center;
    scroll-snap-stop:  always;
    /*justify-content: space-between;*/
    flex-direction:    column;
    align-items:       center;
    width:             100%;
    height:            100vh;
}

.window
{
    position:                  absolute;
    top:                       50vh;
    left:                      50%;
    width:                     300vw;
    height:                    300vh;

    mix-blend-mode:            soft-light;
    opacity:                   70%;
    transform:                 translate3d(-50%, -50%, 0);

    animation-name:            window-rotate;
    animation-duration:        1s; /* acts as a unit scale for progress */
    animation-timing-function: linear;
    animation-timeline:        scroll();
}

@keyframes window-rotate
{
    to
    {

        transform: translate3d(-50%, -50%, 0) rotate(180deg);
    }

}

#contact-window
{
    position:       absolute;
    top:            50%;
    left:           50%;
    width:                     210vw;
    height:                    210vh;

    mix-blend-mode: soft-light;
    opacity:        80%;
    transform:      translate3d(-50%, -50%, 0);
}

#about-window
{
    position:       absolute;
    top:            50%;
    left:           50%;
    width:                     110vw;
    height:                    110vh;

    mix-blend-mode: soft-light;
    opacity:        80%;
    transform:      translate3d(-50%, -50%, 0);
}

.transparent-container
{

    display:        flex;
    flex-direction: column;

    border-radius:  var(--default-border-radius);
    padding:        0;

    background:     linear-gradient(to bottom, rgba(49, 12, 18, 0.57), rgba(163, 0, 40, 0.65));
    /*background-color: black;*/
    /*background-color: rgba(61,0,15, 0.6);*/
    box-shadow:     0 0px 80px 80px rgba(61, 0, 15, 0.68);
    /*backdrop-filter:  blur(20px);*/
    color:          var(--color-palette-white-smoke);
    font-size:      var(--font-size-navigation);

}

#design-page
{
    scroll-snap-align: center;
    scroll-snap-stop:  always;
    width:             100%;
    height:            100vh;
}

#engineering-page
{
    position:          relative;
    scroll-snap-align: center;
    scroll-snap-stop:  always;
    width:             100%;
    height:            100vh;
}

#services-page
{
    position:          relative;
    display:           flex;
    scroll-snap-align: center;
    scroll-snap-stop:  always;
    flex-direction:    column;
    align-items:       center;
    justify-content:   space-between;
    height:            100vh;
}