1@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;500;700;900&display=swap");
2
3::-webkit-scrollbar {
4 width: 10px;
5}
6
7::-webkit-scrollbar-track-piece {
8 background-color: #393939;
9}
10
11::-webkit-scrollbar-thumb {
12 background-color: #ffffff;
13}
14
15html {
16 scrollbar-color: #ffffff #393939;
17 scrollbar-width: thin;
18}
19
20body {
21 position: relative;
22 margin: 0;
23 font-family: "Source Sans Pro";
24 color: white;
25 background: #000000;
26 font-weight: 200;
27 text-shadow: 0px 0px 5px black;
28 width: 100vw;
29 height: 100vh;
30}
31#container {
32 position: relative;
33 width: 100%;
34 height: 100vh;
35 scroll-snap-type: y mandatory;
36 overflow-y: scroll;
37}
38#home-link {
39 position: absolute;
40 top: 40px;
41 right: 40px;
42}
43#home-link-a {
44 color: white;
45 text-decoration: none;
46 font-size: 32px;
47 font-weight: 400;
48}
49#home-icon {
50 width: 32px;
51 height: 32px;
52}
53
54.sudoku-board-row {
55 display: flex;
56}
57
58#sudoku-board {
59 position: absolute;
60 left: 50%;
61 top: 50%;
62 -webkit-transform: translate(-50%, -50%);
63 transform: translate(-50%, -50%);
64}
65
66.sudoku-board-box {
67 width: 64px;
68 height: 64px;
69 display: flex;
70 justify-content: center;
71 align-items: center;
72 border: rgba(255, 255, 255, 0.5) 0.5px solid;
73 transition: font-size 0.5s ease-in-out, color 0.5s ease-in-out;
74}
75
76.sudoku-board-box-input {
77 background: transparent;
78 border: none;
79 font-size: 32px;
80 width: 32px;
81 height: 32px;
82 text-align: center;
83 color: white;
84}
85
86.sudoku-board-box-solved {
87 font-size: 32px;
88 color: white;
89}
90
91.sudoku-board-box-empty {
92 font-size: 0px;
93}
94
95.sudoku-board-box-unsolved {
96 font-size: 16px;
97 color: grey;
98}
99
100#run-solver-button,
101#reset-solver-button {
102 background: transparent;
103 border: white 1px solid;
104 color: white;
105 padding: 16px;
106 position: absolute;
107 font-size: 16px;
108}
109
110#run-solver-button {
111 left: 64px;
112 bottom: 64px;
113}
114
115#reset-solver-button {
116 left: 64px;
117 bottom: 128px;
118}