:root
{

    --minimum-device-width:      320px;
    --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%;

}

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

}

@font-face
{
    font-family: "Montserrat";
    src:         url("../font/Montserrat-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style:  normal;
}

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;

}

body
{

    margin:           0;

    padding:          0;
    background-color: var(--color-palette-licorice);

}

.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;
    overflow-x:      clip;
    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;
}

.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
{
    /*position:         absolute;*/
    /*overflow-y:       auto;*/
    overflow:         auto;
    scroll-snap-type: y mandatory;

    width:            100%;
    height:           100vh;
    margin:           0;
    padding:          0;
    background-color: var(--color-palette-licorice);

}

.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-between;
    height:          100%;
    color:           var(--color-palette-white-smoke);
}

.about-section-heading
{

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

.about-container
{
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    height:          100%;

}

.about-section-text
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    margin-right:    1rem;
    margin-left:     1rem;
    padding:         1rem;
    font-size:       2rem;
    line-height:     200%;
    text-wrap:       nowrap;
}

.about-text-section
{
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    border-radius:   16px;
    /*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);*/
}