*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}
:root {
    color-scheme: light dark;

}

:root 
body {

    color: light-dark( black, var(--clr-txtdark));

    background-color: light-dark(var(--clr-light), var(--clr-dark));
    }

:root {
    --grid-style-hz: 
    "a a a"
    "b b b"
    "c c c"
    "d d d";
    --grid-style-vt: 
    "a b c"
    "a b c"
    "a b c";
    --grid-style-flag: 
    "a b b"
    "a c c"
    "a d d";
    }

    .body-wrapper {
        background: light-dark(var(--clr-light), var(--clr-dark));

        display: grid;
        grid-template: var(--grid-style-hz);
        max-width: 55.5rem;
        margin: auto;
    }




/*Wrapper and Title*/

    .head-wrapper {
        background: light-dark(var(--clr-light), var(--clr-dark));

        background-image: url("CakeBanner4testing.png");

        grid-area: a;

    }

        .stump-title , .name-title {
            font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            font-size: xxx-large;
            font-weight: 800;
/*Title Outline Setup*/
            color: light-dark(#0022ffdc , #28262c3d);

            -webkit-text-fill-color: light-dark(#c8d0ffd5,  #d3fff3e5);
            -webkit-text-stroke: 1px;

            cursor: default;

            text-align: center;
    }


/*Flowers*/
    #floLeft {
        opacity: 0;
    }

    #floRight {
       opacity: 0;
    }

/*Nav Styling*/
    .nav-bar {
        display: grid;
        grid-template: var(--grid-style-vt);
    }

        .butn {
            border: none;
            background-color: light-dark(var(--clr-light), var(--clr-dark));

            width: 100%;

            border: .4rem light-dark(#14248a8e, #998fc7b7);
            border-style: none outset outset none;
            border-radius: 2em;

            font-size: large;
            font-weight: 400;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

            cursor: pointer;
        }


/*Main Body Style*/

    .main-wrapper {
        background-color: light-dark( #f6d1ff48 , #d4c2fc02);
        border: 2px ;
        border-radius: .5rem;
        padding: .4rem;

        grid-area: c;
    }

        .greeting-box{
        text-anchor: middle;
        display: grid;
        grid-template: 
        "a a"
        "b c" 
        "b c";
        }

        .welcome-box {
            margin: .25em;
            width: 1fr;
            grid-area: a;

            background-color: light-dark(#afbbf2, #53427505);

            border: 2px light-dark(var(--clr-bdrlight), #d4c2fc42);
            border-style: dashed outset outset dashed;
            border-radius: 5px;

            block-size: 5rem;

            text-align: center;
            padding-top: 1.9rem;
        }

        .chara-select {
            background-color: light-dark(#d4d7ffbd , #53427515);

            border: 5px light-dark(var(--clr-bdrlight) , #d4c2fc42);
            border-style: double outset outset double;
            border-radius: 6px;

        }

            .Octo-PThree {
                width: 55%;
            }

        .main-bio {
            grid-area: b;
            margin: .2rem;
            padding: .4rem;

            width: 15rem;

            background-color: light-dark(#d4d7ffc2 , #53427505);

            border: solid 5px light-dark(var(--clr-bdrlight) , #d4c2fc42);
            border-style: double outset outset double;
            border-radius: 10px; 
        }

            .disclaimer {
                border: dotted 2px;
          
                padding: .5rem;

                font-size: .85rem;
            }

            h3 {
                text-align: center;
            }
/*Content stacks at certain screenn width*/
   @media (max-width: 35em) {
      .greeting-box {
         grid: var(--grid-style-hz);
         .welcome-box {
            grid-area: a;
         }
         .chara-select {
            grid-area: b;
         }
         .main-bio {
            grid-area: c;
            width: 100%;
         }
      }
   }
/*Ad/ Section Style*/

    .fake-ads {
        margin: .5rem;

        display: grid;
        grid: var(--grid-style-vt);
    }
        .magazine-button {
            grid-area: a;
        }

        .news-rack {
            grid-area: b;
        }
   @media (max-width: 40rem) {
      .fake-ads {
        grid: var(--grid-style-hz);
        .magazine-button {
            grid-area: a;
        }
        .news-rack {
            grid-area: b;
        }
      }
   }

    .page-footer {
        text-align: center;
    }