body
{
}


body {
    padding: 0;
    margin: 0;
}


#xxx_image_info_1 {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;

    height: calc(99vw*(4/6)*(1/20));
    width: fit-content;

    font-size: calc(99vw*(4/6)*(1/22));
    font-weight: 700;
    background-color: black;
    color: yellow;
    z-index: 20;
}


#xxx_image_info_2 {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 20px;
    height: calc(99vw*1/20);
    height: calc(99vw*(4/6)*(1/20));
    width: fit-content;
    font-size: 10px;
    font-size: calc(99vw*1/21);
    font-size: calc(99vw*(4/6)*(1/22));  
    font-weight: 700;
    background-color: black;
    color: yellow;
    z-index: 21;
}


button {
    padding: 0;
    margin: 0;
    margin-bottom: 0px;
    width: 100%;
    height: 100%;
    /*  max-width:96px;  */
}

img {
    padding: 0;
    margin: 0;
    margin-bottom: -2px; /*slight modification to centre properly*/
    width: 100%;
    height: 100%;
    /* max-width: 96px; */
    aspect-ratio: 1/1;
    /* border: 2px solid blue;  */
}

#suggestion{
    display:none;
}

#rules {
    display: none;
}


.four_six { /* #game_container */
    position: relative;
    margin: 0;
    padding: 0;
    display: grid;
   /* width: 100%;
    width: 100vw;
    width: fit-content;  */

    width: 100%;
    height: auto;  

  /*  width:600px;
    height:400px;  */

    grid-template-rows: repeat(4, minmax(30px, 96px));
    grid-template-columns: repeat(6, minmax(30px, 96px));
    /*   grid-template-rows: repeat(6, 1fr);
            grid-template-columns: repeat(8, 1fr);
            aspect-ratio: auto;                          */
    margin: 0 auto;
}

.five_six { /* #game_container */
    margin: 0;
    padding: 0;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-rows: repeat(5, minmax(30px, 96px));
    grid-template-columns: repeat(6, minmax(30px, 96px));
}

.six_six { /* #game_container */
    margin: 0;
    padding: 0;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-rows: repeat(6, minmax(30px, 96px));
    grid-template-columns: repeat(6, minmax(30px, 96px));
}

.six_seven { /* #game_container */
    margin: 0;
    padding: 0;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-rows: repeat(6, minmax(30px, 96px));
    grid-template-columns: repeat(7, minmax(30px, 96px));
}

.six_eight { /* #game_container */
    margin: 0;
    padding: 0;
    display: grid;
    width: 100vw;
    width: fit-content;
    width: 100%;
    height: auto;
    grid-template-rows: repeat(6, minmax(30px, 96px));
    grid-template-columns: repeat(8, minmax(30px, 96px));
    */
}


/*
        #heading_container {
            width: 625px;
            height: 30px;
            display: grid;
            grid-template-rows: 30px;
            grid-template-columns: 330px 100px 105px 100px;
            grid-template-areas: "gametitle attempts time matches";
            grid-area: titlesection;
        }  */

#heading_one {
    margin: 0;
    padding: 0;
    grid-area: gametitle;
    margin-top: 0px; /*-10px;*/
    margin-bottom: 0px;
  /*  border: 1px dotted green;  */
    /* height:25px; */
}

#attempts {
    grid-area: attempts;
    margin-top: 0px;
}

#time {
    grid-area: time;
    margin-top: 0px;
}

#matches {
    grid-area: matches;
    margin-top: 0px;
}




@media screen and (orientation:portrait) {
    .four_six { /* #game_container */
        /*      display: grid;
                width: 360px;
                height: 250px;  */
        /*     width:100%;
                width: calc(99vh*8/6);  */
        /*      width: 99vw;
                height: calc(99vw*768/576);
                height: calc(99vw*6/8);    */
        /*    width:540px; */
        /*   aspect-ratio:768/576; */

        width: 100%;
        height: calc(99vw*4/6); /*calc(99vw*576/768);*/
        position: relative;
        grid-area: game_container;
    }

    .five_six { /* #game_container */
        width: 100%;
        height: calc(99vw*5/6); /*calc(99vw*576/768);*/
        position: relative;
        grid-area: game_container;
    }

    .six_six { /* #game_container */
        width: 100%;
        height: calc(99vw*6/6); /*calc(99vw*576/768);*/
        position: relative;
        grid-area: game_container;
    }

    .six_seven { /* #game_container */
        width: 100%;
        height: calc(99vw*6/7); /*calc(99vw*576/768);*/
        position: relative;
        grid-area: game_container;
    }

    .six_eight { /* #game_container */
        width: 100%;
        height: calc(99vw*576/768);
        position: relative;
        grid-area: game_container;
    }

    #main_container {
        margin: 0;
        padding: 0;
        width: fit-content;                              /*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
        height: fit-content;
        /*width: 600px;  */
        display: none;                          /*grid*/
        grid-template-rows: 55px auto;
        grid-template-columns: 1fr;
        grid-template-areas: "heading_container" "game_container";
        margin-top: 50px;
     /*   border: 1px dashed pink;   */
    }

    #sub_container {
        margin: 0;
        padding: 0;
        width: 99%;
        display: grid;
        grid-template-rows: 20px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "attempts matches time";
        grid-area: sub_container;
        margin-top: 0px;
      /*  border: 1px solid blue;  */
    }

    #heading_container {
        margin: 0;
        padding: 0;
        width: 99%; /*625px;*/
        height: 55px;
        display: grid;
        grid-template-rows: 35px 20px;
        grid-template-columns: 1fr;
        grid-template-areas: "gametitle" "sub_container";
        grid-area: heading_container;
      /*  border: 1px solid red;  */
    }


    #xxx_image_info_1 {
        height: calc(99vw*(4/6)*(1/28));
        /* height: 50px;  */
        font-size: calc(99vw*(4/6)*(1/32));
        background-color: black;
        color:yellow;
        border:1px solid black;
        text-align:center;
        vertical-align:top;
        bottom:1px;
        left:0;
    }

    #xxx_image_info_2 {
        height: calc(99vw*(4/6)*(1/28));
        /* height: 50px;  */
        font-size: calc(99vw*(4/6)*(1/32));
        background-color: black;
        color: yellow;
        border: 1px solid black;
        text-align: center;
        vertical-align: top;
        bottom: 1px;
        right: 0;
    }

    .four_six_xxx { /* #image info button */
        height: calc(99vw*4/6); /*calc(99vw*576/768);*/
        height: calc(99vw*(4/6)*(1/25));
        font-size: calc(99vw*(4/6)*(1/27));
    }

    .five_six_xxx { /* #image info button */
        height: calc(99vw*4/6); /*calc(99vw*576/768);*/
        height: calc(99vw*(4/6)*(1/20));
        font-size: calc(99vw*(4/6)*(1/22));
    }

    .six_six_xxx { /* #image info button */
        height: calc(99vw*4/6); /*calc(99vw*576/768);*/
        height: calc(99vw*(4/6)*(1/50));
        font-size: calc(99vw*(4/6)*(1/55));
        background-color:aqua;
    }

    .six_seven_xxx { /* #image info button */
        height: calc(99vw*4/6); /*calc(99vw*576/768);*/
        height: calc(99vw*(4/6)*(1/20));
        font-size: calc(99vw*(4/6)*(1/22));
    }

    .six_eight_xxx { /* #image info button */
        height: calc(99vw*4/6); /*calc(99vw*576/768);*/
        height: calc(99vw*(4/6)*(1/20));
        font-size: calc(99vw*(4/6)*(1/22));
    }
}




@media screen and (orientation:landscape) {
    .four_six { /* #game_container */
        height: 99vh; /*412px*/
        width: calc(99vh*768/576);
        width: calc(99vh*6/4); /*  calc(99vh*8/6);  */
        /*    width:540px; */
        /*   aspect-ratio:768/576; */
        position: relative;
        grid-area: game_container;
    }

    .five_six { /* #game_container */
        height: 99vh; /*412px*/
        width: calc(99vh*6/5); /*  calc(99vh*8/6);  */
        position: relative;
        grid-area: game_container;
    }

    .six_six { /* #game_container */
        height: 99vh; /*412px*/
        width: calc(99vh*6/6); /*  calc(99vh*8/6);  */
        position: relative;
        grid-area: game_container;
    }

    .six_seven { /* #game_container */
        height: 99vh; /*412px*/
        width: calc(99vh*7/6); /*  calc(99vh*8/6);  */
        position: relative;
        grid-area: game_container;
    }

    .six_eight { /* #game_container */
        height: 99vh; /*412px*/
        width: calc(99vh*768/576);
        width: calc(99vh*8/6);
        position: relative;
        grid-area: game_container;
    }



    #main_container {
        margin: 0;
        padding: 0;
        width: fit-content;
        height:fit-content;                                     /*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
        display: none;                   /*grid*/
        grid-template-rows: 55px auto;
        grid-template-columns: 1fr;
        grid-template-areas: "heading_container" "game_container";
        margin-top: 50px;
   /*     border: 1px dashed pink;  */
        margin: 50px auto 10px;
    }

    #sub_container {
        margin: 0;
        padding: 0;
        width: auto;
        display: grid;
        grid-template-rows: 20px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "attempts matches time";
        grid-area: sub_container;
        margin-top: 0px;
 /*       border: 1px solid blue;  */
    }

    #heading_container {
        margin: 0;
        padding: 0;
        width: auto; /*625px;*/
        height: 55px;
        display: grid;
        grid-template-rows: 35px 20px;
        grid-template-columns: 1fr;
        grid-template-areas: "gametitle" "sub_container";
        grid-area: heading_container;
   /*     border: 1px solid red;  */
    }


    #xxx_image_info_1 {
        height: calc(99vh*(1/30));
        /* height: 50px;  */
        font-size: calc(99vh*(1/32));
        background-color: black;
        background-color: black;
        color: yellow;
        border: 1px solid black;
        text-align: center;
        vertical-align: top;
        bottom: 1px;
        left: 0;
    }

    #xxx_image_info_2 {
        height: calc(99vh*(1/30));
        /* height: 50px;  */
        font-size: calc(99vh*(1/32));
        background-color: black;
        background-color: black;
        color: yellow;
        border: 1px solid black;
        text-align: center;
        vertical-align: top;
        bottom: 1px;
        right: 0;
    }

    .four_six_xxx { /* #image info button */
      
        height:calc(99vh*(1/20));
        height:50px;
        font-size:calc(99vh*(1/22));
        background-color:aqua;
    }

    .five_six_xxx { /* #image info button */
        height: calc(99vw*4/6); /*calc(99vw*576/768);*/
        height: calc(99vw*(4/6)*(1/20));
        font-size: calc(99vw*(4/6)*(1/22));
    }

    .six_six_xxx { /* #image info button */
        height: calc(99vw*4/6); /*calc(99vw*576/768);*/
        height: calc(99vw*(4/6)*(1/20));
        font-size: calc(99vw*(4/6)*(1/22));
    }

    .six_seven_xxx { /* #image info button */
        height: calc(99vw*4/6); /*calc(99vw*576/768);*/
        height: calc(99vw*(4/6)*(1/20));
        font-size: calc(99vw*(4/6)*(1/22));
    }

    .six_eight_xxx { /* #image info button */
        height: calc(99vw*4/6); /*calc(99vw*576/768);*/
        height: calc(99vw*(4/6)*(1/20));
        font-size: calc(99vw*(4/6)*(1/22));
    }
}





#play_again2 {
    display: none;
    position: absolute;
    /*     top:150px;
            left:200px;   */
    width: 100px; /*80px*/
    height: 20px;
    text-align: center;
    z-index:100;
}


@media screen and (min-height:599px) and (min-width:799px) {

    #main_container {
        width: 600px; /*  fit-content; */
        display: none;                                     /*grid*/
        grid-template-rows: 55px 1fr;                            /* 599px;   $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$  */
        grid-template-columns: 1fr;                            /*800px;  $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$    */
        grid-template-areas: "heading_container" "game_container";
        margin: 50px auto 10px;
   /*     border: 1px dashed pink;  */
    }


    #sub_container {
        width: 599px;
        display: grid;
        grid-template-rows: 30px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "attempts matches time";
        grid-area: sub_container;
   /*     border: 1px solid blue;  */
    }

    #heading_container {
        width: 599px; /*625px;*/
        height: 55px;
        display: grid;
        grid-template-rows: 35px 20px;
        grid-template-columns: 1fr;
        grid-template-areas: "gametitle" "sub_container";
        grid-area: heading_container;
    /*    border: 1px solid red;  */
    }
}

@media screen and (max-width:500px) {
    #suggestion {
        display: none;
    }
}

    @media screen and (max-width:300px) {
        #heading_one {
            font-size: 22px;
            padding-top: 5px;
        }
    }


@media screen and (min-width:800px) and (min-height:600px) {

    #main_container {
        background-color: orange;                     /*pink*/
        width: fit-content;
        height: fit-content;
    }

    #game_container {
        background-color: yellow;
        width: fit-content;
        height: fit-content;
        /* background-image: url(../origin_of_the_world_600X400.png);
    background-size: 100% 100%;  */
    }

    #xxx_image_info_1 {
        height: 15px;
        font-size: 13px;
        background-color: black;
    }

    #xxx_image_info_2{
        height:15px;
        font-size:13px;
        background-color:black;
    }
}

 /*   #game_container {
        border:5px solid black;
    }    */