html        {font-size: 8px; line-height: 3.75rem; word-spacing: 0.125rem;}
body {
    background-image: linear-gradient(
        rgb(0, 0, 0), 
        rgb(20, 20, 20), 
        rgb(20, 20, 20),
        rgb(53, 53, 53));
    background-attachment: fixed;
    margin: 0rem; 
    padding: 0rem; 
    text-align: center; }

body *      {all: unset; transition: 0.1s, background-color 1s, color 1s, background 1s;}

/*--------------------------------Divisions--------------------------------*/

header, main, footer
            {display: flex;}

.main-area  {display: flex; flex-direction: row;}
main        {flex-direction: column;}

/*header {}*/
    header nav 
            {margin: auto; display: flex; flex-direction: row;}

section {margin: auto; display: block;}
    section.contained {
        width:          80rem;
        padding:        4rem;
        margin-bottom:  7.5rem;
        border-radius:  0rem;
        border-width:   0.75rem;
        border-style:   double;
        border-color:   var(--clr_rim);
        background:     linear-gradient(90deg, 
                        color-mix(in srgb, var(--clr_base), black 30%),
                        var(--clr_base) 30%, 
                        var(--clr_base) 70%,
                        color-mix(in srgb, var(--clr_base), black 30%)); }

        @media (orientation: portrait) {
            section.contained {width: 75vw !important} }

/*--------------------------------Elements--------------------------------*/

/*nav {}*/
    nav.side 
        {flex-direction: column; position: fixed; bottom: 0; top: 0; padding: 1.5%; }
            nav.side button, nav.side a.button 
                {display: flex; margin-top: 2rem; position: relative;}
            nav.side.left a.button
                {margin-right: auto; margin-left: 0;}
            nav.side.left p
                {margin-left: 1.5rem; font-size: 2rem;}
            nav.side.right button
                {margin-right: 0; margin-left: auto;}
            nav.side.right p
                {margin-right: 1.5rem; font-size: 2rem;}

/*svg {}*/
    svg.standard    {width: 4rem; height: 4rem;}
    svg.major       {width: 6rem; height: 6rem;}
    svg.minor       {width: 3.5rem; margin: 0rem 1.25rem 0rem 0rem; height: 3.5rem;}

/*button, a.button {}*/
    button:hover p, button:focus p, a.button:hover p, a.button:focus p 
        {opacity: 100%; transition: 0.2s; right: 0rem;}
    a.button p, a.button p, button p, button p
        {position: relative; margin: auto; opacity: 0%; right: -5rem;}
    button:focus svg, a.button:focus svg, button:hover svg, a.button:hover svg
        {transform: scale(1.15); transition: 0.05s; transform-origin: center;}

hr  {border-style: inset; display: block; border-width: 3px; border-color: rgb(128, 81, 54);}

/*img {}*/
    img:not(.borderless) {
        max-width: 100%;
        border-radius: 0rem;
        border-width: 0.375rem;
        border-color: lightgray;
        border-style: double;}

    img.icon        {width: 9rem; display: block;}
    img.title       {width: 45rem; display: block;}
    img.left        {margin-left: -15rem; float: left; max-width: calc(53rem - 0.125rem);}
    img.right       {margin-right: -15rem; float: right; max-width: calc(53rem - 0.125rem);}

a.button svg, button svg {
    color: var(--clr_base);
    border: 0.5rem outset white; border-radius: 50%;}

/*--------------------------------Text--------------------------------*/


h1, h2, h3, h4, h5, h6 {
    font-family: "Alegreya_SC"; 
    display: block; 
    font-weight: 400; 
    text-align: center; 
    font-size: 4rem; 
    color: var(--clr_base-complement);}

p, a, span      {color: var(--clr_base-complement);}

p, a            {font-weight: 500; text-align: center; font-size: 2rem;}

i               {font-style: italic;}

h1              {font-family: "Nuosu";}

p:has(+ p.tooltip), p.tooltip + p 
    {display: inline;}

p {font-family: "Sanchez";}

a {font-family: "Nuosu";}

a.title {
    display: block;
    line-height: 12rem;
    font-size: 6rem; 
    margin-bottom: 1rem;
    color: white;
    transform: scale(1, 1.4); 
    mask-image:
    repeating-linear-gradient(transparent, transparent 4%, black 4px, black 5%),
    linear-gradient(white, white 41px, transparent 57px);}
    /* mask-image: 
    repeating-linear-gradient(transparent, transparent 5%, black 1px, black 7%),
    linear-gradient(white, white 41px, transparent 57px);} */

    @media (orientation: portrait) {
        a.title {
            width: 100vw; 
            font-size: 3rem; 
            transform: scale(1,1.4);
            margin-bottom: 0rem;
            mask-image:
            repeating-linear-gradient(transparent, transparent 4%, black 4px, black 5%),
            linear-gradient(white, white 41px, transparent 57px);} }
    

/*--------------------------------Classes--------------------------------*/

.left       {left: 0;}
.right      {right: 0;}

.row        {flex-direction: row;}
.column     {flex-direction: column;}

.gutter     {flex-grow: 100}

.float:hover, .float:focus 
            {transform: translateY(-0.5rem); transition: 0.05s;}

.expand:hover, .expand:focus
            {transform: scale(1.15); transition: 0.05s; transform-origin: center;}

.outlined   {
            color: black; font-weight: 700; 
            -webkit-text-stroke: 0.75rem white; paint-order: stroke fill;}