:root {
    --fSize_Dft:12.7pt;
    --padding_TopL:70px;
    --padding_TopR:25px;
    --iPhoneW:257px;
    --iPhoneH:521px;
}

/* 1 - - - - - - - - - - - - - - - - - - - */

*{margin: 0; padding: 0;}

body{
    margin: 0;
    font-family: Helvetica, Arial, Tahoma, sans-serif;
    font-weight: normal;
    font-size: var(--fSize_Dft);
    line-height: calc(var(--fSize_Dft) * 1.55);
    color:#676767;
    background:
        linear-gradient(to bottom, rgb(255 255 255 / 97%), rgb(225 225 190 / 97%)),
        url("i3/bg_XL_logo.png") top center no-repeat;
    background-size:
        100% 100%,
        auto auto;
    background-attachment: fixed;
}
p{
    margin: 1em 0 1em 0;
    text-align: justify;
}
.noJustify p{
    text-align: left;
}
a{text-decoration: none; color: #55a555;}
h1{
    font-size: calc(var(--fSize_Dft) * 2.0);
    color: #449944;
    margin-top: 1.4vw;
}
h4{
    font-size: calc(var(--fSize_Dft) * 1.14);
    line-height: calc(var(--fSize_Dft) * 1.2);
    margin:30px 0 -10px 0;
}
div#Grid_Main{
    display: grid;
    height: 100vh;
    grid-template-columns: auto 257px 43px 550px auto;
    grid-template-rows: auto 110px;
}
/*div#Grid_Main div{
    border: 1px solid #000;
}*/
#Grid_Main_Bottom{
    display: grid;
    grid-column: 1 / 6;
    grid-row: 2;
    grid-template-columns: subgrid;/* NESTED SUBGRID: */
}
div#Footer_Content_Grid{
    display: grid;
    grid-column: 2 / 5;
    grid-row: 1;
    grid-gap: 90px;
    grid-template-columns: auto 50%;
    grid-template-rows: 1fr;
    background-image:url("i3/ftBg-Ball.png");
    background-size: 100px 110px;
    background-position-x: right;
    background-repeat: no-repeat;
}
.ColGrn{color:#55a555}
.ColBrn{color:#985522}
.ColYllGrn{color:#ccee11}

/* 2 - - - - - - - - - - - - - - - - - - - */

#bg_L{
    background: url("i3/ftBg_Flag_T.png") bottom center no-repeat; 
    background-size: 57px 111px;
}

/* 3 - - - - - - - - - - - - - - - - - - - */

#iPhoneColumn{
    grid-column: 2;
    grid-row: 1;
}
#iP_Col_R1{/* phone imgs */
    position: relative;/*(For iP frame)*/
    height: calc(var(--iPhoneH) + var(--padding_TopL) + 10px);
}
#iP_Col_R1 img#iP_Frame {
    position: absolute;
    z-index: 20;
    top: var(--padding_TopL);
    left: 10;
    width: var(--iPhoneW);
    height: var(--iPhoneH);
    cursor: pointer;
}
#iP_Col_R1 img#h_screenshotIMG {
    position: absolute;
    z-index: 10;
    top: calc(var(--padding_TopL) + 10px);
    left: 18px;
    width:227px;
    height:494px;
}
div#sshotsNav{
    display: flex;
    column-gap: 1px;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 30px;
}
div#sshotsNav img{
    height: 30px;
    width: 23px;
    cursor: pointer;
}
div#sshotsNav img:nth-child(1),
div#sshotsNav img:nth-child(2){
    width: 21px;
}
#iP_Col_R3{/* apple btn */
    text-align: center;
    padding: 2.4vh 0 2.4vh 0;
}
#iP_Col_R3 img{
    width:136px;
    height:46px;
}

/* 4 - - - - - - - - - - - - - - - - - - - */

#mainCol{
    padding-top: var(--padding_TopR);
}
#Flex_Top{
    display: flex;
    width: 100%;
}
#Flex_Top div:nth-child(1){
    width: 45%;
}
#Flex_Top div:nth-child(2){
    width: 55%;
    text-align: right;
}
#Flex_Top #logo{
    position: relative;
    top: -14px;
    width: 225px;
    height: 225px;
}
#Grid_TopNav{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 41px);
    
    position: relative;
    top:52px;
}
#Grid_TopNav a{
    line-height: 0;
}
#Grid_TopNav a img{
    width:167px;
    height:31px;
}
#btn_ScreenShots{
    display: none;
}


/* 5 - - - - - - - - - - - - - - - - - - - */


img#line{
    width:100%; height:25px;
    margin-top: 0;
}
#mainText p:nth-child(1){
    margin-top:0;
}
#h_para1 {
    font-style: oblique;
    color: #339933;
}
p#h_para2 .span1{
    display: inline-block;
    margin-top: 0;
    padding: 0 5px 0 5px;
    font-size: calc(var(--fSize_Dft) * 1.4);
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    line-height: calc(var(--fSize_Dft) * 1.7);
    color: #f3f3ee;
    background: url("i3/grass_block_single.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
p#h_para2 .span1 span:nth-child(1){
    color: #ccee11;
}

ul {
    padding-left:1vw;
}
ul li {
    color: #55a555;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    font-size: calc(var(--fSize_Dft) * 1.1);
    line-height: calc(var(--fSize_Dft) * 1.25);
}
#mainText img.appleBtn{
    display: none;/* mobiles only */
}

/* 6 - - - - - - - - - - - - - - - - - - - */

#Grid_Main_Bottom{
    font-size: calc(var(--fSize_Dft) * 0.82);
    background:
        url("i3/ftBg_Board.png") top left repeat-x,
        url("i3/ftBg_Grass.png") top left repeat;
    background-size: 600px auto;
}
#ftBg_L{
    background-image:url("i3/ftBg_Flag_B.png");
    background-size: 57px 111px;
    background-position-x: center;
    background-repeat: no-repeat;
}
#ft_Links{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#ft_Links a{
    margin-top:48px;
    color:#f2f2f2;
    text-decoration: none;
}
#ft_Links a.screenShots{
    display: none;/* desktop hide */
}
#Classicodes{
    display: flex;
    align-items: center;
    column-gap: 1em;
}
#Classicodes span{
    margin-top:48px;
}

/* 7 - - - - - - - - - - - - - - - - - - - */