.leftCorner{
    position: fixed;
    bottom: 14px;
    left: 14px;
}

.rightCorner{
    position: fixed;
    bottom: 14px;
    right: 14px;
}

/* width >=700px*/

.triangleTable4{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100px 14px 100px 14px 100px 14px 100px;
    grid-template-columns: repeat(4, 100px);
    -ms-grid-rows:  100px 14px 100px 14px 100px 14px 100px;
    grid-template-rows:  repeat(4, 100px);
    gap: 14px 14px;
        grid-template-areas:
      ". . . ."
      ". . . ."
      ". . . ."
      ". . . .";
}

.triangleTable2{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100px 14px 100px;
    grid-template-columns: 100px 100px;
    -ms-grid-rows: 100px 14px 100px;
    grid-template-rows: 100px 100px;
    gap: 14px 14px;
        grid-template-areas:
      ". ."
      ". .";
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.triangleBox{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100px;
    height: 100px;
    aspect-ratio: 1;
    position: relative;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.5s linear;
    transition: -webkit-transform 0.5s linear;
    -o-transition: transform 0.5s linear;
    transition: transform 0.5s linear;
    transition: transform 0.5s linear, -webkit-transform 0.5s linear;
}

.triangle{
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-clip-path: polygon(0 10%, 0% 100%, 90% 100%);
            clip-path: polygon(0 10%, 0% 100%, 90% 100%);
    -webkit-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    transition: background-color 1s linear;
    -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
            transform-origin: left bottom;
}

.upTriangle{
    -webkit-clip-path: polygon(10% 0, 100% 0%, 100% 90%);
            clip-path: polygon(10% 0, 100% 0%, 100% 90%);
    -webkit-transform-origin: right top;
        -ms-transform-origin: right top;
            transform-origin: right top;
}

.mirrorTriangle{
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-clip-path: polygon(100% 10%, 100% 100%, 10% 100%);
            clip-path: polygon(100% 10%, 100% 100%, 10% 100%);
    -webkit-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    transition: background-color 1s linear;
    -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
            transform-origin: right bottom;
}

.mirrorUpTriangle{
    -webkit-clip-path: polygon(90% 0, 0% 90%, 0% 0%);
            clip-path: polygon(90% 0, 0% 90%, 0% 0%);
    -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
            transform-origin: top left;
}

.rowOne{
    -ms-grid-row: 1;
    grid-row: 1;
}

.rowTwo{
    -ms-grid-row: 2;
    grid-row: 2;
}

.rowThree{
    -ms-grid-row: 3;
    grid-row: 3;
}

.rowFour{
    -ms-grid-row: 4;
    grid-row: 4;
}

.colOne{
    -ms-grid-column: 1;
    grid-column: 1;
}

.colTwo{
    -ms-grid-column: 2;
    grid-column: 2;
}

.colThree{
    -ms-grid-column: 3;
    grid-column: 3;
}

.colFour{
    -ms-grid-column: 4;
    grid-column: 4;
}

.triangleTableColumn{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100px;
    grid-template-columns: 100px;
    -ms-grid-rows:  100px 14px 100px 14px 100px;
    grid-template-rows:  repeat(3, 100px);
    gap: 14px 14px;
        grid-template-areas:
      "."
      "."
      ".";
      width: auto;
}

.leftColumn{
    position: absolute;
    top: 14px;
    left: 14px;
}

.rightColumn{
    position: absolute;
    bottom: 14px;
    right: 14px;
}


/*@media screen and ((orientation:portrait) and  (max-width:1000px)), ((orientation:portrait) and (max-height:500px)), ((orientation:landscape) and (max-height:500px)), ((orientation:landscape) and (max-width:500px)){
*/

@media screen and (orientation:portrait), (max-width:1120px), (max-height:500px){
.triangleTable4{
  transform: scale(0.5);
        /*scale: 0.5;*/
        -webkit-transform-origin: bottom left;
            -ms-transform-origin: bottom left;
                transform-origin: bottom left;
    }
    .triangleTable2{
  transform: scale(0.5);
        /*scale: 0.5;*/
        -webkit-transform-origin: bottom right;
            -ms-transform-origin: bottom right;
                transform-origin: bottom right;
    }
    
}