﻿html 
    {
        --BodyColor:red;
        --ContainerColor:white;
        --ContainerTextColor:darkslategray;
        --StandardPadding:5px;
    } /* End */
        body 
        { 
            padding:0px;
            margin:0px;
            background-color:var(--BodyColor);
        } /* End*/
            .Container 
            {
                display:grid;
                grid-template-rows:50px auto 1fr 50px;
                grid-template-columns:1fr;
                margin:0px 10vw;
                padding:0px;
                                                min-height:100vh;
                background-color:var(--ContainerColor);
                color:var(--ContainerTextColor);
            } /* ENd */
              .Header 
              {
                  display:grid;
                  grid-template-columns:1fr;
                                } /* End */
.MainNavigation 
    {
    grid-row:1;
    display: grid;
    width:450px;
    justify-self: center;
    align-self:center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    column-gap:5px;
    font-size: 2.0em;
    text-align:center;
    font-weight:bold;
} /* End */
    .MainNavigation span span , .MainNavigation a span 
  {
padding:0px 5px;
  } /* End */
  .MainNavigation a 
                  {
                      text-decoration:none;
                      text-align:center;
                      font-weight:bold;
                      color:var(--BodyColor);
                      } /* End */
                .Banner, .Copyright, .AppsList 
                {
                    background-color:var(--ContainerTextColor);
                                    } /* ENd */
                    .AppsList, .AppsList a, .Banner, .Banner a, .Copyright, .Copyright a, .Features, .Features a 
                    {
                        color: var(--ContainerColor);
                        font-weight:bold;
                    } /* End */
                      .MainContentItem a 
                      {
                          color:var(--ContainerTextColor);
                      } /* End */
.Banner {
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* To Do: height:250px; */
} /* End */
                  .BannerItem 
                  {
                      display:grid;
                      grid-template-columns:1fr;
                      grid-template-rows:auto auto;
                      row-gap:5px;
                                            align-self:center;
                  } /* End */
                    .BannerItem span:first-of-type {
                        display: grid;
                        justify-self: center;
                        align-self: end;
                        align-content: center;
                        justify-content: center;
                        background-color: var(--BodyColor);
                        width: 50%;
                        max-width: 150px;
                        aspect-ratio: 1 / 1;
                        font-family: 'Segoe MDL2 Assets', SegoeMDL2AssetsEmbedded;
                        text-align: center;
                        font-size: 75px;
                    } /* End */
                      .BannerItem h3 
                      {
                          text-align:center;
                          justify-self:center;
                          align-self:start;
                      } /* End */
                              .AppsList, .MainContentItem, .MainContentAside, .Features, .Copyright, .Banner, .Header  
      {
          padding:var(--StandardPadding);
      } /* End */
.MainContent 
{
    display: grid;
    grid-row:3;
    grid-template-rows: 1fr auto;
    grid-template-columns: 0.66fr 0.34fr;
    column-gap: var(--StandardPadding);
} /* End */
            .MainContentItem 
            {
                display:grid;
                grid-row:1;
                grid-column:1;
            } /* End */
.MainContentAside 
{
    display:grid;
    grid-column:2;
    grid-row:1;
} /* End */
  .Features 
  {
background-color:var(--BodyColor);
  } /* End */
      .Copyright 
      {
          display:grid;
          justify-items:center;
          grid-row:4;
      } /* End */
            /* Begin Mobile Device Css */
@media only screen and (max-width:900px) { /* Begin Mobile Css */
    .Container {
        margin: 0px;
    }
        /* End */
    .MainNavigation 
    {
                width: unset;
        font-size: 1.5em;
    }
    /* End */
    .MainContent 
    {
        grid-template-columns:1fr 0px;
                column-gap: 0px;
        row-gap: var(--StandardPadding);
    }
    /* ENd */
    .MainContentItem 
    {
grid-row:1;
grid-column:1;
    } /* End */
    .MainContentAside {
        grid-row: 2;
        grid-column: 1;
    } /* End */
    .Banner {
        display: grid;
        grid-template-columns: repeat(2, 25%);
        grid-template-rows: repeat(2, auto);
        align-content: center;
        justify-content: center;
        /* To Do: height:300px;*/
    } /* End */
                    .BannerItem 
                    {
                    /* To DO: remove if not needed */                            
                    } /* End */
                .BannerItem span:first-of-type 
                {
                    max-width:90px;
                    font-size:50px;
                    width:100%;
                }  /* End */
            } /* End 900px Mobile Css */
              @media only screen and (max-width:450px) 
              { /* Begin 450px mobile css */
                body 
                {
                    font-size:0.50em;
                } /* End */
                  .MainNavigation 
                  {
                      /* To Do: Delete if not required */
                  } /* eND */
                .Banner {
                    /* To Do:  height:160px; */
                } /* End */
                .BannerItem span:first-of-type {
                    max-width: 45px;
                    font-size: 25px;
                    width: 100%;
                }
                /* End */

              } /* End 450px Mobile css */