html { scroll-behavior: smooth; font-family: Arial;; } /* Define the custom font */ @font-face { font-family: 'SudokuFont'; src: url('../fonts/sudokufont.ttf') format('truetype'); } /* Apply the custom font to body or specific elements */ body { font-family: 'SudokuFont', Arial, sans-serif; margin: 0; padding: 0; background-color: #f9f9f9; } .navbar-logo a{ text-decoration: none; color: #333; } main{ min-height: 65vh; padding: 20px; text-align: center; user-select: none !important; -webkit-tap-highlight-color: transparent !important; } /* Remove background color on click for links */ a:active, a:focus { background-color: transparent !important; outline: none !important; }  a { user-select: none !important; -webkit-tap-highlight-color: transparent !important; } .fixit{ background: #E9E9E9; } .cross{ /* background: bisque !important; */ border: 2px solid #03a9f4 !important; } nav { background-color: #ffffff; border-bottom: 1px solid #e0e0e0; } .navbar-container { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; position: relative; min-height: 30px; } .navbar-left { display: flex; align-items: center; } .navbar-logo { display: flex; align-items: center; } .navbar-logo img { height: 30px; margin-right: 10px; } .navbar-center { display: flex; justify-content: center; flex-grow: 1; } .navbar-menu { display: flex; list-style: none; padding: 0; margin: 0; } .navbar-menu li { margin-right: 20px; margin-left: 20px; width: 130px; text-align: center; } .navbar-menu a { text-decoration: none; color: #333; padding: 10px 0; display: block; } .navbar-menu a:hover { color: #007bff; } .mobile-menu .dropdown-content { display: block; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; position: absolute; background-color: #ffffff; z-index: 1; width: 150px; } .mobile-menu .dropdown:hover .dropdown-content { max-height: 200px; /* Adjust this value based on the content height */ } .dropdown-content { display: none; position: absolute; background-color: #ffffff; z-index: 1; width: 150px; text-align: left; } .mobile-menu .dropdown-content { position: relative; } .dropdown:hover .dropdown-content { display: block; } .dropdown-content a { padding: 10px 20px; text-decoration: none; display: block; color: #333; } .dropdown-content a:hover, a:active { background-color: #f1f1f1; } .navbar-right img, .navbar-mobile img { height: 22px; margin-left: 20px; } .navbar-burger { display: none; cursor: pointer; flex-direction: column; justify-content: space-between; height: 24px; } .navbar-burger span { display: block; min-height: 2px; width: 22px; background-color: #aaa; margin: 3px 0; } .navbar-burger.is-active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); } .navbar-burger.is-active span:nth-child(2) { opacity: 0; } .navbar-burger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .mobile-menu { position: fixed; top: 50px; left: -250px; width: 250px; height: 100%; background-color: #ffffff; /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */ overflow-y: auto; transition: left 0.3s ease; z-index: 1000; } .mobile-menu ul { list-style: none; padding: 0; margin: 0; } .mobile-menu li { width: calc(100% - 40px); text-align: left; padding: 10px 20px; border-bottom: 1px solid #e0e0e0; } .mobile-menu a { text-decoration: none; color: #333; display: block; } .overlay { display: none; position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999; } .navbar-mobile { display: none; } @media (max-width: 1010px){ .navbar-menu li { margin: 0px; } } @media (max-width: 810px) { .navbar-center{ display: none; } .navbar-left { flex-grow: 1; justify-content: space-between; } .navbar-logo { position: absolute; left: 45%; transform: translateX(-50%); } .navbar-mobile { display: flex; align-items: center; } .navbar-burger { display: flex; } .navbar-container { position: relative; } .navbar-menu { display: none; } } @media (min-width: 811px) { .mobile-menu { display: none; } .overlay { display: none; } }  footer { background-color: #ffffff; padding-top: 20px; border-top: 1px solid #e0e0e0; } .footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20px 50px 20px 50px; } .footer-section { flex: 1; padding: 10px; min-width: 200px; } .footer-section h2 { margin-top: 0; } .footer-section ul { list-style: none; padding: 0; } .footer-section ul li { margin-bottom: 10px; } .footer-section ul li a { text-decoration: none; color: #333; } .footer-section ul li a:hover { color: #007bff; } .footer-bottom { background-color: #333; color: #ffffff; text-align: center; padding: 20px 0; margin-top: 20px; } .footer-bottom .social-icons { margin-bottom: 20px; } .footer-bottom .social-icons a { margin: 0 10px; display: inline-block; } .footer-bottom .social-icons img { height: 40px; border-radius: 5px; } .footer-bottom p { margin: 0; font-size: 12px; } @media (max-width: 768px) { .footer-content { flex-direction: column; text-align: center; } } .social-icons a img { transition: background-color 0.3s; } .social-icons a.facebook:hover img { background-color: #3b5998; } .social-icons a.twitter:hover img { background-color: #1DA1F2; } .social-icons a.instagram:hover img { background-color: #E1306C; } .social-icons a.linkedin:hover img { background-color: #0077B5; } .social-icons a.whatsapp:hover img { background-color: #25D366; }  .sudoku-container { width: 100%; max-width: 600px; /* Adjust as needed */ margin: 0 auto; } .sudoku-table { width: 100%; border-collapse: collapse; border: 2px solid #777; } .sudoku-table td { width: 11.11%; /* 100% / 9 = 11.11% */ position: relative; border: 1px solid #bbb; } .sudoku-table td::after { content: ''; display: block; padding-bottom: 100%; /* Maintain aspect ratio */ } .borderRight{ border-right: 2px solid #777 !important; } .borderBottom{ border-bottom: 2px solid #777 !important; } .sudoku-table td:hover { background-color: #EEEEEE; } .activeCell { /* background-color: #ffebbc !important; */ background-color: #cddc39 !important; } .sudoku-table td.activeCell:hover { background-color: #ffebbc; } .fixedCell { font-family: Arial;; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* font-size: min(5vw, 50px); */ font-size: 1.5rem; background: #E9E9E9; } .enteredCell{ font-family: Arial;; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 1.5rem; } .notes { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); z-index: 1; /* Ensure notes are below input */ } .note { font-family: Arial;; background-color: transparent; color: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; transition: color 0.2s; user-select: none !important; -webkit-tap-highlight-color: transparent !important; } .activeCell .note:hover{ color: #999; } .note.permanent { background-color: transparent; color: #000; } .note.visible { display: flex; color: #000 !important; } @media (max-width: 600px){ .note { font-size: 0.5rem; } }  .sudoku-box { max-width: 700px; background-color: #ffffff; overflow: hidden; margin: 0 auto; border-radius: 5px; } .sudoku-menubar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #d9d5d6; } .sudoku-difficulty { display: flex; align-items: center; } .sudoku-difficulty button{ background: none; border: none; font-size: 1.2em; cursor: pointer; } .sudoku-difficulty .new{ margin: 0 5px; padding: 5px; background-color: #be845c; color: #ffffff; border: none; border-radius: 4px; font-size: 12px; } .sudoku-difficulty .new:hover{ background-color: #a36f4c; } @media (max-width: 710px){ .sudoku-difficulty .new { position: relative; font-size: 0; } .sudoku-difficulty .new::before{ content: 'New'; color: #fff; font-size: 12px; } } .sudoku-time { display: flex; align-items: center; } .sudoku-time span { margin-right: 10px; } #hintCnt{ position: absolute; border-radius: 50px; font-size: 10px; color:white; background-color: black; padding: 0px 3px 0px 3px; top: 0; right: 0; } .sudoku-time button { position: relative; background: none; border: none; font-size: 1.2em; margin-left: 10px; cursor: pointer; font-weight: bolder; } .sudoku-time button:hover { color: #bdc3c7; } .sudoku-main { display: flex; position:relative; } .sudoku-container { flex: 1; padding: 20px; border-right: 1px solid #d9d5d6; } .sudoku-input { width: 180px; padding: 20px; display: flex; flex-direction: column; align-items: center; } .input-type { display: flex; justify-content: space-between; width: 100%; margin-bottom: 20px; max-width: 310px; } .input-type button { flex: 1; margin: 0 5px; padding: 10px; background-color: #b3b3b3; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; } .input-type button:hover { background-color: #777; } .number-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .number-box button { width: 50px; height: 50px; font-size: 1.5em; background-color: #ecf0f1; border: 1px solid #bdc3c7; border-radius: 4px; cursor: pointer; } .number-box button:hover { background-color: #bdc3c7; } .erase { width: 100%; padding: 10px; background-color: #e74c3c; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 20px; font-size: 12px; } .erase:hover { background-color: #c0392b; } .auto-candidate { display: flex; align-items: center; } .auto-candidate input { margin-right: 10px; } .eraseMob{ display: none; } @media (max-width: 810px) { .sudoku-container { border-right: none; } .sudoku-main{ display: block; } .number-box { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 5px; width: 100%; max-width: 300px; margin-bottom: 10px; } .erase{ display: none; } .eraseMob{ display: block; background-color: #e74c3c; } .sudoku-input { width: calc(100% - 40px); position: relative; } .sudoku-table { width: calc(100% - 40px); } } .candidateButtons{ font-size: 12px !important; padding: 30px 30px 0px 0px !important; } .activeMode{ background-color: #be845c !important; }  .circles{ display: none; padding: 0; margin: 0; position: absolute; top: 0; left: 0; width: 98vw; height: 100vh; overflow: hidden; pointer-events: none; z-index: 999; } .circles li{ position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: red; animation: animate 10s linear infinite; bottom: -150px; pointer-events: none; } .circles li:nth-child(1) { background-color: #333; } .circles li:nth-child(2) { background-color: #ff6347; /* Example color */ } .circles li:nth-child(3) { background-color: #00bfff; /* Example color */ } .circles li:nth-child(4) { background-color: tomato; /* Example color */ } .circles li:nth-child(5) { background-color: red; /* Example color */ } .circles li:nth-child(6) { background-color: green; /* Example color */ } .circles li:nth-child(6) { background-color: greenyellow; /* Example color */ } .circles li:nth-child(6) { background-color: yellow; /* Example color */ } .circles li:nth-child(1){ left: 25%; width: 80px; height: 80px; animation-delay: 0s; } .circles li:nth-child(2){ left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; } .circles li:nth-child(3){ left: 70%; width: 20px; height: 20px; animation-delay: 4s; } .circles li:nth-child(4){ left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; } .circles li:nth-child(5){ left: 65%; width: 20px; height: 20px; animation-delay: 0s; } .circles li:nth-child(6){ left: 75%; width: 110px; height: 110px; animation-delay: 3s; } .circles li:nth-child(7){ left: 35%; width: 150px; height: 150px; animation-delay: 7s; } .circles li:nth-child(8){ left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; } .circles li:nth-child(9){ left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; } .circles li:nth-child(10){ left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; } @keyframes animate { 0%{ transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100%{ transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } .circles.winning { display: block; /* Show when winning */ } .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent background */ display: none; /* Initially hidden */ justify-content: center; align-items: center; z-index: 9999; /* Ensure it's on top */ } .popup-content { background-color: #fff; padding: 20px; border-radius: 8px; text-align: center; max-width: 80%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); position: relative; /* Ensure close button is positioned correctly */ } .popup .close { position: absolute; top: 0px; right: 15px; font-size: 2.5rem; cursor: pointer; color: #aaa; } .popup h2 { font-size: 1.5rem; color: #333; margin-bottom: 10px; } .popup p { font-size: 1rem; color: #666; } .popup button { background-color: #be845c; color: white; border: none; padding: 10px 20px; font-size: 1rem; cursor: pointer; border-radius: 5px; margin-top: 15px; }  @media (max-width: 600px) { .popup-content { max-width: 90%; } }.confirmation-dialog { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .confirmation-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ max-width: 400px; /* Max width for larger screens */ text-align: center; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .confirm, .cancel { margin: 10px; padding: 10px 20px; font-size: 16px; } .confirm { background-color: #4CAF50; /* Green */ color: white; border: none; border-radius: 5px; } .confirm:hover { background-color: #45a049; } .cancel { background-color: #f44336; /* Red */ color: white; border: none; border-radius: 5px; cursor: pointer; } .cancel:hover { background-color: #da190b; } .confirmLevel{ padding: 10px; background: antiquewhite; margin: 5px; border-radius: 5px; cursor: pointer; } .confirmLevel:hover{ background: rgb(255, 211, 154); }.pause-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); color: white; justify-content: center; align-items: center; z-index: 10; } .paused-message { font-size: 80px; font-weight: bold; } @media only screen and (max-width: 600px) { .print{ display: none; } .pause, .hint{ margin-left: 0px !important; } .sudoku-time span { margin-right: 0px !important; } #time{ font-size: 10px; } } @media print { body{ margin: 50px 200px 200px 200px; } #sudoku-container, #sudoku-container * { visibility: visible; } #sudoku-container { position: absolute; left: 0; top: 0; right: 0; margin: 100px; } #sudoku-container { page-break-inside: avoid; background: white; /* Ensure the background is white */ } #sudoku-container .fixedCell { background-color: gray !important; /* Preserve the gray background for fixed cells */ color: white; /* Adjust text color if necessary */ } #sudoku-container td { border: 1px solid #000; /* Ensure borders are printed */ } } .cd-popup { position: fixed; left: 0; top: 0; z-index: 100; padding-top: 5%; height: 100%; width: 100%; background-color: rgba(94, 110, 141, 0.1); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; } .cd-popup.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s; transition: opacity 0.3s 0s, visibility 0s 0s; } .cd-popup-container { position: relative; width: 90%; max-width: 400px; margin: 4em auto; background: #FFF; border-radius: .25em .25em .4em .4em; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); /* Force Hardware Acceleration in WebKit */ -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .cd-popup-container p { padding: 3em 1em; } .cd-popup-container .cd-buttons:after { content: ""; display: table; clear: both; } .cd-popup-container .cd-buttons li { float: left; width: 50%; list-style: none; } .cd-popup-container .cd-buttons a { display: block; height: 60px; line-height: 60px; text-transform: uppercase; color: #FFF; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-popup-container .cd-buttons li:first-child a { background: #fc7169; border-radius: 0 0 0 .25em; cursor: pointer; } .no-touch .cd-popup-container .cd-buttons li:first-child a:hover { background-color: #fc8982; } .cd-popup-container .cd-buttons li:last-child a { background: #5cb4f5; border-radius: 0 0 .25em 0; cursor: pointer; } .no-touch .cd-popup-container .cd-buttons li:last-child a:hover { background-color: #c5ccd8; } .cd-popup-close { cursor: pointer; } .cd-popup-container .cd-popup-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; } .cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after { content: ''; position: absolute; top: 12px; width: 14px; height: 3px; background-color: #8f9cb5; } .cd-popup-container .cd-popup-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); left: 8px; } .cd-popup-container .cd-popup-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 8px; } .is-visible .cd-popup-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } @media only screen and (min-width: 1170px) { .cd-popup-container { margin: 8em auto; } } .lang { display: inline-block; box-sizing: border-box; width: 33%; padding: 1% 0% 1% 0%; cursor: pointer; border: 1px solid #fff; transition: border 0.1s ease-out; } .selected{ color: #fff; font-weight: 900; background-color: #209bd6; border-radius: 3px; } .lang:hover { border: 1px solid #209bd6; border-radius: 3px; } .langBox{ padding: 10% 4% 4% 4%; font-size: 14px; } .langBox a{ text-decoration: none; color: #555; } .stat-nav-wrapper button{ border: none; color: #555; cursor: pointer; background: 0 0; } .stat-nav-wrapper .langSel{ position: absolute; right: 5px; } .stat-nav-wrapper .share{ position: absolute; right: 95px; } .stat-nav-wrapper button>img { width: 20px; height: auto; margin-right: 2px; vertical-align: middle; } button:focus {outline:0;} a:focus {outline:0;} textarea:focus {outline:0;} @media only screen and (max-width: 900px) { .stat-nav-wrapper button { font-size: 0; } .stat-nav-wrapper .langSel{ right: 5px; } .stat-nav-wrapper .share{ right: 40px; } } header { height: 200px; line-height: 200px; text-align: center; background-color: #5e6e8d; color: #FFF; } header h1 { font-size: 20px; font-size: 1.25rem; } .cd-popup-trigger { display: block; width: 170px; height: 50px; line-height: 50px; margin: 3em auto; text-align: center; color: #FFF; font-size: 14px; font-size: 0.875rem; font-weight: bold; text-transform: uppercase; border-radius: 50em; background: #35a785; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07); } @media only screen and (min-width: 1170px) { .cd-popup-trigger { margin: 6em auto; } }  .cd-popup-container .message{ padding: 2em 1em !important; font-size: 15px !important; color: #007bb6 !important; } .cd-popup-container .btn{ cursor: pointer; width: 60px; height: 60px; border-radius: 50% !important; } .cd-popup-container .share-buttons:after { content: ""; display: table; clear: both; } .cd-popup-container .share-buttons li { list-style: none; padding: 0% 0% 5% 0%; display: inline-block; } .cd-popup-container .share-buttons a { display: block; height: 60px; line-height: 60px; text-transform: uppercase; color: #FFF; } .share-buttons img{ -webkit-filter: drop-shadow( 1px 1px 10px rgba(0, 0, 0, .5)); filter: drop-shadow( 1px 1px 10px rgba(0, 0, 0, .5)); height: 45px; } 
  .wrong {
    animation: shake 0.5s;
    animation-iteration-count: once;
    color: black;
  }
  
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); color: red;}
    10% { transform: translate(-1px, -2px) rotate(-1deg);  color: red;}
    20% { transform: translate(-3px, 0px) rotate(1deg);  color: red;}
    30% { transform: translate(3px, 2px) rotate(0deg);  color: red;}
    40% { transform: translate(1px, -1px) rotate(1deg);  color: red;}
    50% { transform: translate(-1px, 2px) rotate(-1deg);  color: red;}
    60% { transform: translate(-3px, 1px) rotate(0deg);  color: red;}
    70% { transform: translate(3px, 1px) rotate(-1deg);  color: red;}
    80% { transform: translate(-1px, -1px) rotate(1deg);  color: red;}
    90% { transform: translate(1px, 2px) rotate(0deg);  color: red;}
    100% { transform: translate(1px, -2px) rotate(-1deg); color: black;}
  }