/* Reset */
       * {
           box-sizing: border-box;
           margin: 0;
           padding: 0;
           font-family: Arial, Helvetica, sans-serif;
           overflow-x: hidden;
       }


       /* Background Styling */
       body {
           background-color: hsla(215.24, 57.8%, 21.37%, 1);

           justify-content: center;
           align-items: center;
           height: 100vh;
       }

       /* Container styling */
       .container {
           text-align: center;
           color: white;

           width: 100%;

       }



       .section1 {

           margin-left: auto;
           margin-right: auto;
           padding-top: 12em;
           padding-bottom: 6em;

       }

       .section0 {

           margin-left: auto;
           margin-right: auto;
           padding-top: 12em;
           padding-bottom: 6em;

       }


       .section2 {


           margin-left: auto;
           margin-right: auto;
           padding-top: 6em;
           padding-bottom: 6em;

       }

       .section3 {

           margin-left: auto;
           margin-right: auto;
           padding-top: 2em;
           padding-bottom: 2em;

       }


       .section4 {

           margin-left: auto;
           margin-right: auto;
           padding-top: 3em;
           padding-bottom: 3em;

       }

       .section5 {

           margin-left: auto;
           margin-right: auto;
           padding-top: 3em;
           padding-bottom: 3em;

       }

       .coll {


           max-width: 450px;
           width: 100%;
           margin-right: auto;
           margin-left: auto;
           padding-bottom: 5em;
           padding-top: 5em;
       }

       .coll2 {

           padding-bottom: 5em;
           max-width: 450px;
           width: 100%;
           margin-right: auto;
           margin-left: auto;
           padding-bottom: 5em;

       }





       /* Keypad styling */
       .keypad {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 20px;
           padding: 30px;
           border-radius: 5px;
           background-color: #fff;
       }

       .keypad button {
           width: 82px;
           height: 84px;
           font-size: 38px;
           color: #1a2b47;
           background-color: white;
           border: 1px solid #a1bde9;
           border-radius: 50%;
           cursor: pointer;
           display: flex;
           font-family: Arial, Helvetica, sans-serif;
           font-weight: lighter;
           margin-left: auto;
           margin-right: auto;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           transition: 0.3s ease;
       }

       .keypad button small {
           font-size: 14px;
           color: #1a2b47;
           font-weight: 400;
           margin-top: -15px;

       }

       .keypad button:hover {

           background-color: #a1bde9;
           color: #000;
       }

       /* Enter Button styling */
       .enter-button {
           background-color: #1a2b47;
           color: #fff;
           font-weight: bold;
           padding: 15px 30px;
           width: 100%;
           border-radius: 25px;
           font-size: 30px;
           font-family: Arial, Helvetica, sans-serif;
           cursor: pointer;
           transition: 0.3s ease;
           margin-top: 50px;
           border: 7px solid #fff;

       }

       .btnn {

           width: 55%;


       }


       h1 {

           margin-top: 15px;
           font-size: 42px;
       }



       .col {

           border-radius: 30px;
           border: 7px solid #ffd700;
           /* Yellow border */
           padding: 30px;

       }


       .col4 {


           padding-bottom: 2em;

       }


       .score-button {

           font-size: 64px;
           font-weight: bold;
           color: #ffd700;
           /* Yellow text color */
           background-color: transparent;
           -webkit-text-stroke: 3px #ffd700;
           letter-spacing: 2px;
           line-height: 1.1em;


           text-decoration: none;
           transition: background-color 0.3s ease, color 0.3s ease;
       }


       .title {
           font-size: 36px;
           font-weight: bold;
           margin-bottom: 30px;
           font-size: 54px;
           font-weight: bold;
           color: #ffd700;
           /* Yellow text color */
           background-color: transparent;
           -webkit-text-stroke: 3px #ffd700;
           letter-spacing: 2px;
           line-height: 1.1em;
       }


       .title2 {



           font-size: 75px;
           font-weight: lighter;
           color: #fff;
           text-align: left;
           font-family: Arial, Helvetica, sans-serif;

       }


       .title3 {



           font-size: 42px;
           font-weight: lighter;
           color: #fff;
           text-align: center;
           font-family: Arial, Helvetica, sans-serif;
           padding-top: 35px;


       }

       p {

           font-size: 42px;
           font-weight: lighter;
           color: #fff;
           text-align: left;
           line-height: 1.1em;



       }

       /* Player Info and Score Styles */
       .player-info,
       .score-box {
           border: 4px solid;

           padding: 10px 20px;
           font-size: 20px;
           font-weight: bold;
       }

       .player-info-yellow {
           border: 8px solid #ffd700;
           color: #ffd700;
           border-radius: 35px;
           background-color: transparent;
           font-size: 24px;

       }

       .player-info-sign-in {
           border: 8px solid #fff;
           color: #000;
           border-radius: 35px;
           background-color: #fff;
           font-size: 24px;

       }

       .player-info-blue {
           border: 8px solid #87a6c7;
           color: #87a6c7;
           border-radius: 35px;
           background-color: transparent;
           font-size: 24px;
       }

       .score-box-yellow {
           background-color: #ffd700;
           color: #1a2b47;
           font-size: 48px;
           text-align: center;
       }

       .score-box-blue {
           background-color: #87a6c7;
           color: #1a2b47;
           font-size: 48px;
           text-align: center;
       }




       .vs-text {
           font-size: 36px;
           font-weight: bold;
           color: #ffffff;
       }

       /* Submit Button Styling */
       .submit-button {
           font-size: 24px;
           font-weight: bold;
           color: #ffffff;
           border: 4px solid #ffffff;
           padding: 10px 40px;
           border-radius: 10px;
           background-color: transparent;
           text-align: center;
           margin-top: 30px;
           transition: background-color 0.3s ease, color 0.3s ease;
       }

       .submit-button:hover {
           background-color: #ffffff;
           color: #1a2b47;
       }

       /* Logo Styling */
       .logo {
           position: absolute;
           top: 20px;
           right: 20px;
       }

       .logo img {
           width: 100px;
       }


       .logo {

           width: 200px;
           height: auto;
           padding-right: 2em;
       }

       /* Responsive adjustments */




       @media (max-width: 767px) {
           .keypad button {
               width: 60px;
               height: 60px;
               font-size: 20px;
           }

           .enter-button {
               font-size: 16px;
               padding: 10px 20px;
           }

           .keypad {
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               gap: 20px;
               padding: 25px;

               margin: 20px;

               background-color: #fff;
           }



           .section0 {

               margin-left: auto;
               margin-right: auto;
               padding-top: 6em;
               padding-bottom: 1em;

           }


           .section1 {

               margin-left: auto;
               margin-right: auto;
               padding-top: 8em;
               padding-bottom: 4em;

           }

           .section2 {

               margin-left: auto;
               margin-right: auto;
               padding-top: 3em;
               padding-bottom: 3em;

           }

           .section3 {

               margin-left: auto;
               margin-right: auto;
               padding-top: 1em;
               padding-bottom: 1em;

           }


           .section4 {

               margin-left: auto;
               margin-right: auto;
               padding-top: 3em;
               padding-bottom: 3em;

           }

           .section5 {

               margin-left: auto;
               margin-right: auto;
               padding-top: 3em;
               padding-bottom: 3em;

           }




           button.enter-button.btnn {

               margin-top: -5%;
           }



           .col {

               border-radius: 25px;
               border: 5px solid #ffd700;
               /* Yellow border */



           }

           .score-button {

               font-size: 32px;
               font-weight: bold;
               color: #ffd700;
               /* Yellow text color */
               background-color: transparent;
               -webkit-text-stroke: 3px #ffd700;
               letter-spacing: 2px;
               line-height: 1.1em;


               text-decoration: none;
               transition: background-color 0.3s ease, color 0.3s ease;
           }

           .row {


               padding-bottom: 2em;

           }

           .row.justify-content-center.align-items-center.mb-4 {

               margin-top: -40px;
           }


           .coll {


               max-width: 450px;
               width: 100%;
               margin-right: auto;
               margin-left: auto;
               padding-bottom: 3em;
               padding-top: 1em;
           }


           .coll2 {

               padding-bottom: 5em;
               max-width: 450px;
               width: 100%;
               margin-right: auto;
               margin-left: auto;
               padding-bottom: 3em;
               padding-top: 1em;

           }


           .title {
               font-size: 36px;
               font-weight: bold;
               margin-bottom: 20px;

               font-weight: bold;
               color: #ffd700;
               /* Yellow text color */
               background-color: transparent;
               -webkit-text-stroke: 3px #ffd700;
               letter-spacing: 2px;
               line-height: 1.1em;
           }

           .btnn {

               width: 96%;


           }

           .title3 {



               font-size: 32px;
               font-weight: lighter;
               color: #fff;
               text-align: center;
               padding-left: 10px;
               padding-right: 10px;
               padding-top: 20px;


           }

           p {

               font-size: 21px;
               font-weight: lighter;
               color: #fff;
               text-align: left;
               padding-left: 10px;
               padding-right: 10px;



           }


           .row.justify-content-center.align-items-center {

               padding-left: 10px;
               padding-right: 10px;
               margin-top: -13%;
           }

           .vs-text {
               font-size: 25px;
               font-weight: bold;
               color: #ffffff;
           }

           .keypad button small {
               font-size: 12px;
               color: #1a2b47;
               font-weight: 400;
               margin-top: -5px;

           }


       }

       @media (max-width: 768px) {

           .row.justify-content-center.align-items-center {

               padding-left: 10px;
               padding-right: 10px;
           }


           .logo {
               position: absolute;
               top: 20px;
               z-index: 0;

           }

           .logo img {
               width: 100px;
           }

           .title3 {



               font-size: 26px;
               font-weight: lighter;
               color: #fff;
               text-align: center;
               padding-left: 10px;
               padding-right: 10px;
               padding-top: 20px;


           }

           p {

               font-size: 25px;
               font-weight: lighter;
               color: #fff;
               text-align: left;
               padding-left: 10px;
               padding-right: 10px;



           }

           h2.title {

               padding-top: 20px;
           }

           .col4 {


               padding-bottom: -3em;

           }

           .logo {

               width: 120px;
               height: auto;
               padding-right: 0em
           }

       }


       @media only screen and (max-width: 320px) {


           .score-button {


               font-size: 24px;
               font-weight: bold;
               color: #ffd700;
               /* Yellow text color */
               background-color: transparent;
               -webkit-text-stroke: 3px #ffd700;
               letter-spacing: 2px;
               line-height: 1.1em;


               text-decoration: none;
               transition: background-color 0.3s ease, color 0.3s ease;


           }

       }