* {margin: 0; 
padding: 0;
box-sizing: border-box;}

body {
background-color:black;
position: relative;}


    header {
     position: fixed;
     width: 30vw;
     height: 30vh;
     background-color: black;
     display: flex;
     flex-direction: row-reverse;;
     top: 35vh;
     bottom: 35vh;
     left: 35vw;
     right:35vw;
     justify-content: space-evenly;
     text-size-adjust: auto;
     border-radius: 5px;
     justify-content: space-evenly;
     align-items: center;
     z-index: 1;
     border-style:inset;
     border-width: 3px;
     border-color: black;

   }

        .heading1{
         animation-duration: 10s;
         animation-name:color;
         animation-iteration-count: infinite;
         display: flex;
         width: 30vw;
         height: 30vh;
         font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
         font-variant:small-caps;
         font-weight:600;
         font-stretch: extra-expanded;
         -webkit-text-size-adjust: auto;
         /* color: rgb(255, 255, 255);  */
         letter-spacing: 0.7dvi;
         justify-content: space-evenly;
         align-items: center;
         /* margin: 1.5vw; */
         padding-left: 0.5rem;
         padding-right: 0.2rem;
         overflow: hidden;
         border-width: 0.4;
         }
         
             @keyframes color { 
             0% { -webkit-text-fill-color: rgb(197, 2, 2);text-shadow: rgba(241, 14, 14, 0.542) 1px 0 11px;}
             25%{-webkit-text-fill-color:rgb(195, 195, 1);text-shadow: rgba(242, 252, 131, 0.907) 1px 0 8px;}
             50%{ -webkit-text-fill-color:rgb(1, 96, 1);text-shadow:rgba(8, 255, 8, 0.395) 1px 0 9px; }
             75%{ -webkit-text-fill-color:rgb(4, 4, 146);text-shadow: rgba(32, 32, 237, 0.671) 1px 0 14px;}
             100%{ -webkit-text-fill-color:rgb(197, 2, 2);text-shadow: rgba(255, 34, 34, 0.55) 1px 0 16px;}}




        .buttons { 
         position: relative; padding-bottom: 1vh;}

            .start {
             display: flex;
             justify-content: center;
             margin: 2dvi; 
             padding: 10px; 
             border-width: 5px;
             border-style: outset;
             border-radius: 3px; 
             font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
             font-variant:small-caps;
             font-weight: 800;
             background-color:rgb(128, 125, 125);
             animation-duration: 2s;
             animation-name: bottonColor;
             animation-iteration-count: infinite;
             cursor: pointer;
             -webkit-text-fill-color: black;
            }

            .start:active{
              background-color: #6b6b6b;
              /* border-style: inset; */
              transform: translateY(2px);
            }
                  
              /* @keyframes bottonColor {  */
                     /* 0% {border-style: outset ;}
                     50% {border-style: inset;}
                     100% {border-width: outset;}} */ 


          .wrapperPointNext {
           position: fixed;
           width: 30vw;
           height: 30vh;
           background-color: black;
           display: flex;
           flex-direction: row-reverse;;
           top: 35vh;
           bottom: 35vh;
           left: 35vw;
           right:35vw;
           justify-content: space-evenly;
           text-size-adjust: auto;
           border-radius: 5px;
           justify-content: space-evenly;
           align-items: center;
           z-index: 1;
           border-style:inset;
           border-width: 3px;
           border-color: black;
           flex-direction: column
          }

            
            
            .points { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
             color: whitesmoke;
             letter-spacing: 0.4dvi;}
             /* position: fixed; }    */

            .next { 
              display: flex;
              justify-content: center;
              /* margin: 2dvi;  */
              padding: 10px; 
              border-width: 5px;
              border-style: outset;
              border-radius: 3px; 
              font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
              font-variant:small-caps;
              font-weight: 800;
              background-color:rgb(128, 125, 125);
              animation-duration: 2s;
              animation-name: bottonColor;
              animation-iteration-count: infinite;
              cursor: pointer;
              -webkit-text-fill-color: black;
             }

             .next:active{
              background-color: #6b6b6b;
              /* border-style: inset; */
              transform: translateY(2px);
            }

          .winner{
            position: fixed;
            width: 30vw;
            height: 30vh;
            background-color: black;
            display: flex;
            flex-direction: row-reverse;;
            top: 35vh;
            bottom: 35vh;
            left: 35vw;
            right:35vw;
            justify-content: space-evenly;
            text-size-adjust: auto;
            border-radius: 5px;
            justify-content: space-evenly;
            align-items: center;
            z-index: 0;
            border-style:inset;
            border-width: 3px;
            border-color: black;
            flex-direction: column;
            font-variant: small-caps;
            font-size:xx-large;
            text-align: center;
            -webkit-text-fill-color: rgb(133, 197, 38);
            z-index: -1;
           }
            
           .loser{
            position: fixed;
            width: 30vw;
            height: 30vh;
            background-color: black;
            display: flex;
            flex-direction: row-reverse;;
            top: 35vh;
            bottom: 35vh;
            left: 35vw;
            right:35vw;
            justify-content: space-evenly;
            text-size-adjust: auto;
            border-radius: 5px;
            justify-content: space-evenly;
            align-items: center;
            z-index: 0;
            border-style:inset;
            border-width: 3px;
            border-color: black;
            flex-direction: column;
            font-variant: small-caps;
            font-size:xx-large;
            -webkit-text-fill-color: rgb(133, 197, 38);
            text-align: center;
            z-index: -1;
           }
        

      .squaresUp{
       display: flex; 
       justify-content: center; 
       margin-top: 2vh ; 
       margin-bottom: 2vh;
       margin-right: 1vw; 
       margin-left:1vw ;}

         .squareRed { 
          width: 47vw;; 
          height: 47vh; 
          background-color: rgb(57, 12, 12);
          margin-right: 1.7vw;
          border-top-left-radius: 10px;
          border-top-right-radius: 1%;
          border-bottom-left-radius: 1%;
          border-bottom-right-radius: 1%;
          border-style:outset;
          border-width: 10px;
          border-left-color:rgb(187, 37, 37);
          border-top-color:rgb(158, 29, 29);
          border-bottom-color:rgb(130, 30, 30);
          border-right-color:rgb(4, 1, 1);
          cursor: pointer;
          z-index: -1;}
            
          .squareRed:active{
            background-color: red;
            border-style: inset; 
            transform: translateY(4px);
          }


         .squareBlue {
          width:47vw;
          height: 47vh; ;
          background-color: rgb(12, 12, 63);
          border-top-right-radius: 10px;
          border-bottom-right-radius: 1%;
          border-top-left-radius: 1%;
          border-bottom-right-radius: 1%;
          border-bottom-left-radius: 1%;
          border-style:inset;
          border-width: 10px;
          border-left-color:rgb(1, 2, 9);
          border-top-color:rgb(28, 39, 246);
          border-bottom-color:  rgb(1, 2, 11);
          border-right-color:rgb(12, 22, 205);
          z-index: -1;
          cursor: pointer;} 

          .squareBlue:active{
            border-style: outset; 
            transform: translateY(4px);
          }




   .squaresDown { 
    display: flex; 
    justify-content: center;
    margin-bottom: 2vh;
    margin-right: 1vw; 
    margin-left:1vw }

         .squareGreen { 
          width:47vw;
          height: 47vh;
          background-color: rgb(12, 57, 12);
          border-bottom-right-radius: 10px;
          border-top-right-radius: 1%;
          border-bottom-left-radius: 1%;
          border-top-left-radius: 1%;
          border-style:inset;
          border-width: 10px;
          border-left-color:rgb(6, 26, 6);
          border-top-color: rgb(26, 116, 26);
          border-bottom-color:  rgb(26, 116, 26);
          border-right-color:rgb(21, 91, 21) ;
          cursor: pointer;
          z-index: -1;}

          .squareGreen:active{
            background-color:green;
            transform: translate(-3px,4px);
            border-style: outset; 
          }

          /* .squareGreen.active {hover, }
          */
        .squareYellow {
          width: 47vw;
          height:47vh;
          background-color: rgb(83, 82, 21);
          margin-right: 1.7vw;
          border-bottom-left-radius: 10px;
          border-top-left-radius: 1%;
          border-top-right-radius: 1%;
          border-bottom-right-radius: 1%;
          border-left-color: rgb(158, 156, 41);
          border-top-color: rgb(12, 12, 5);
          border-bottom-color: rgb(215, 215, 75);
          border-right-color:rgb(12, 12, 5) ;
          border-width: 10px;
          z-index: -1;
          cursor: pointer;}

          .squareYellow:active{
            transform: translate(3px,2px);
            border-style: inset; 
            border-top: 1px;
          }

         
          @media screen and (max-width: 800px) {
            body {max-width: 100%;
              max-height: 100%;
              overflow-y: hidden; }
            header {flex-direction:column-reverse;}
            .heading1 {
              font-size:x-large;
              text-align: center;
              margin-bottom: 3vw;
              overflow: hidden;}
            .start{margin: 0.2dvb; 
              overflow: hidden; 
              border-color: rgb(128, 125, 125);
            } }

          @media screen and (max-width: 540px) {
            body {max-width: 100%;
              max-height: 100%;
              overflow-y: hidden; }
            header {flex-direction:column-reverse;
              .heading1 {
                font-size:large;
                text-align: left;
              margin-bottom: 3vh;
              overflow: hidden;}
              .start{margin-top: 3dvb; 
              overflow: hidden;
              border-color: rgb(128, 125, 125) }
           .next{
            margin: 3px; 
            padding: 4px;
            border-color: rgb(128, 125, 125) 
              }
          }}

          @media screen and (max-width: 400px) {
            body {max-width: 100%;
              max-height: 100%;
              overflow-y: hidden; }
            header {flex-direction:column-reverse;
              .heading1 {
                font-size:medium;
                text-align: left;
                overflow: hidden; 
              margin-bottom: 3vh;}
              .start{margin-top: 3dvb;  
                overflow: hidden;
                border-color: rgb(128, 125, 125)}
              .next {
                margin: 2px; 
                padding: 4px;
                border-color: rgb(128, 125, 125) 
              }
          }}

          @media screen and (max-width: 390px) {
            body {max-width: 100%;
              max-height: 100%;
              overflow-y: hidden; }
            header {flex-direction:column-reverse;}
              .heading1 {
                font-size:small;
                text-align: left;
                overflow: hidden; 
              margin-bottom: 5vw;}
              .start{margin: 0.2dvb;  
                overflow: hidden;
                border-color: rgb(128, 125, 125)}
               .next {
                margin: 2px; 
                padding: 4px;
                border-color: rgb(128, 125, 125)}
              .points{
                font-size: smaller;
              }}

          @media screen and (max-width: 307px) {
            body {max-width: 100%;
                  max-height: 100%;
                  overflow-y: hidden; }
            header {flex-direction:column-reverse;}
              .heading1{
                font-size:x-small;
                text-align: left;
                overflow: hidden; 
                margin-bottom: 1vh;
                margin-top: 0.2vh;}
              .start{
                margin-top: 20px;
                margin: 5px;  
                overflow: hidden;
                padding: 7px; 
                border-width: 3px;
                border-color: rgb(128, 125, 125)}
               .next {
               margin: 1px; 
               padding: 4px; 
               border-color: rgb(128, 125, 125)}

               .points{
                font-size: smaller;} }