:root
{

    --mobile-device-width:       440px;
    --desktop-device-width:      1280px;
    --color-palette-barn-red:    #7A001F;
    --color-palette-licorice:    #3D000F;
    --color-palette-white-smoke: #F5F5F5;
    --color-pallete-gray:        #7A7A7A;
    --default-border-radius:     1.2rem;
    --font-size-navigation:      0.7rem;
    --golden-ratio:              1.61803398875;
    --backdrop-opacity:          60%;

    --display-large-desktop:     189.80px;
    --display-medium-desktop:    118.49px;
    --display-small-desktop:     73.97px;
    --headline-desktop:          46.18px;
    --title-desktop:             25.63px;

    --display-large-mobile:      58.45px;
    --display-medium-mobile:     46.18px;
    --display-small-mobile:      36.49px;
    --headline-mobile:           28.83px;
    --title-mobile:              22.78px;

    --display-large:             var(--display-large-mobile);
    --display-medium:            var(--display-medium-mobile);
    --display-small:             var(--display-small-mobile);
    --headline:                  var(--headline-mobile);
    --title:                     var(--title-mobile);
    --body:                      16px;
    --label:                     12.64px;

    --padding_0:                 4px;
    --padding_1:                 8px;
    --padding_2:                 16px;
    --padding_3:                 32px;
}

*, *:before, *:after
{
    scroll-behavior: smooth !important;
    scrollbar-width: none;
    box-sizing:      inherit;
    user-select:     none;

}

html
{
    scroll-behavior: smooth !important;

    box-sizing:      border-box;
    margin:          0;
    padding:         0rem;
    /*background-color: red;*/
    /*background-color: blue;*/
    font-family:     "Montserrat", sans-serif, "Arial";
    font-weight:     normal;

    min-width:       320px;
}

body
{

    margin:      0;

    padding:     0;
    /*background-color: var(--color-palette-licorice);*/
    color:       #EBEBEB;
    background:  linear-gradient(to bottom, rgba(67,2,18, 1) 0%,
                                            rgba(55, 6, 9, 1) 50%,
                                            rgba(67,2,18, 1) 100%);

    font-family: "Montserrat", Courier, serif;

}

.hidden
{
    display: none;
}

a
{
    color:           var(--color-palette-white-smoke);
    text-decoration: none;

}

a:visited
{
    color:           var(--color-palette-white-smoke);
    text-decoration: none;
}

.background-image
{
    position:        absolute;
    top:             100vh;
    left:            50%;
    /*z-index: 11;*/
    display:         flex;
    /*align-items: center;*/
    justify-content: center;
    width:           100%;
    object-fit:      fill;
    /*opacity: 50%;*/
    transform:       translateX(-50%);
}

.fadeout-horizontal
{
    z-index:    13;
    mask-image: linear-gradient(
                        to right,
                        transparent,
                        black 5rem,
                        black calc(100% - 5rem),
                        transparent
                );
}

.fadeout-vertical
{
    mask-image: linear-gradient(
                        to bottom,
                        transparent,
                        black 5rem,
                        black calc(100% - 5rem),
                        transparent
                );
}

.page
{
    /*scroll-snap-align: start;*/
    /*scroll-snap-stop:  always;*/
    width:      100%;
    min-width:  100%;
    min-height: 100vh;
}

.hero-layout
{
    position:        relative;

    display:         flex;
    flex-direction:  column;
    align-items:     center;
    /*position: absolute;*/
    /*display:        flex;*/
    /*flex-direction: column;*/
    /*align-content: stretch;*/

    justify-content: center;
    /*width:            100% - 40px;*/
    /*margin-right: 20px;*/
    /*margin-left: 20px;*/
    gap:             30rem;
}

.rhs
{
    text-align: right;
}

.lhs
{
    text-align: left;
}

.noise
{
    position:              absolute;
    z-index:               2;
    width:                 100%;
    height:                100vh;
    background-color:      transparent;
    background-image:      url("../assets/hexed_16.png");
    background-position:   center;
    background-position-x: 50%;
    background-position-y: 50%;
    background-size:       3px 3px;

    background-repeat:     repeat;
    opacity:               50%;
}

#scene
{
    display:          flex;
    flex-direction:   column;
    scroll-snap-type: y proximity;

    width:            100%;
    margin:           0;
    padding:          0;

    gap:              20rem;
}

.about-title
{
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    width:           100%;
    min-width:       0;
    padding:         1rem;
    color:           var(--color-palette-white-smoke);
    font-size:       3rem;
    text-align:      center;
    text-wrap:       wrap;
}

.about-subtitle
{
    min-width: 0;

}

.about-section
{
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    /*width: 50%;*/
    justify-content: space-around;
    height:          100%;
    color:           var(--color-palette-white-smoke);
}

.about-section-heading
{

    padding:   1rem;
    font-size: 2rem;
    /*letter-spacing: 1rem;*/
}

.about-container
{

    display:                 grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns:   1fr 0.5fr;
    gap:                     var(--padding_3);
    align-items:             start;
    justify-content:         left;
    padding: var(--padding_2);
    width: 100%;
}

.about-section-text
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    /*padding:         1rem;*/
    line-height:     200%;
    text-wrap:       nowrap;
    text-align:      center;
}

.about-text-section
{
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    border-radius:   16px;
    min-width:       0;
    min-height:      0;
    width:           80%;
    height:          80%;
    /*box-shadow:      inset 0 0px 40px 4px rgba(255, 255, 255, 0.1), 0 0px 40px 1px rgba(33, 8, 12, 0.7);*/
    /*backdrop-filter: blur(5px);*/
}

@media screen and (width < 1280px)
{
    .about-container
    {
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns:   1fr;
    }
    #scene
    {
            gap:              5rem;
    }
}