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

#contact-page
{
    position:       relative;

    display:        flex;

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

#about-page
{
    position:        relative;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-start;
    min-height:      100vh;
}

#options-page
{
    position:        relative;
    display:         flex;

    justify-content: space-between;
    flex-direction:  column;
    align-items:     center;
    width:           100%;
    min-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:            95%;
    left:           50%;
    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%;
    min-height: 100vh;
}

#engineering-page
{
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    align-items:     center;
    position:        relative;
    /*scroll-snap-align: center;*/
    /*scroll-snap-stop:  always;*/
    width:           100%;
    min-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:           300vh;*/
}