keyboard main

keyboard/style.css

@@ -0,0 +1,168 @@
+/* 
+CSS CODE.. I DON'T KNOW WHAT ELSE TO SAY. IT WORKS, BUT COULD BE IMPROVED
+*/
+
+@font-face {
+    font-family: 'crueltysquad';
+    src: url('https://easyfiles.cc/2024/11/da8c7731-4b49-4155-bad5-e4344a2ab6da/gamefont(1).ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #2a2a2a;
+    transition: background-color 0.3s, color 0.3s;
+    overflow-x: hidden;
+    overflow-y: visible;
+}
+
+* {
+    font-family: monospace;
+    outline: none;
+}
+
+button, p {
+    font-weight: 600;
+}
+
+.help {
+    color: #f0f0f0;
+    background: none;
+    border: none;
+}
+
+.container {
+    background-color: #4b4b4b;
+    border-radius: 8px;
+    padding: 30px 100px;
+    box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
+    transition: background-color 0.3s;
+    width: 900px;
+    max-width: 900px;
+    margin: 100px;
+    text-align: center;
+    top: 0;
+    left: 0;
+
+}
+
+.counter {
+    font-size: 24px;
+    margin: 40px 0;
+    color: #ffffff;
+    width: 100%;
+    display: grid; 
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
+    gap: 40px;
+    justify-items: center; 
+    align-items: center; 
+}
+
+.counter > * {
+    background-color: rgb(90,90,90);
+    padding: 10px 5px 10px 5px;
+    margin: 15px;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(16, 16, 16, 0.2);
+}
+
+p, h6, h1, h3 {
+    color: #f0f0f0;
+    transition: color 0.3s;
+}
+
+.reset, .button {
+    transition: background-color 0.3s;
+    color: #2a2a2a;
+    background-color: rgb(116, 116, 116);
+    border: 2px solid rgb(135,135,135);
+    border-radius: 5px;
+    padding: 5px;
+    cursor: pointer;
+    margin-top: 15px;
+    outline: none;
+    transition: border 0.3s;
+}
+
+.reset:hover, .button:hover {
+    border: 2px dashed #3c7855;
+}
+
+.navBar > *:hover:not(.seperator) {
+    cursor: pointer;
+    scale: 1.05;
+}
+
+.navBar > * {
+    transition: scale 0.3s;
+
+}
+
+.theme-button {
+    background-color: rgb(0,0,0,0);
+    border-color: rgb(0,0,0,0);
+    transition: 0.3s;
+    color: #f0f0f0;
+    cursor: pointer;
+    outline: none;
+    margin-top: -5px;
+    z-index: 1000;
+    right: 20px;
+    top: 20px;
+    margin-left: 5px !important;
+}
+
+.theme-button:hover {
+    scale: 1.1;
+}
+
+.theme-button svg {
+    pointer-events: none;
+}
+
+.navBar {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: left;
+    background-color: rgb(42,42,42,0.775);
+    backdrop-filter: blur(10px);
+    width: 100%;
+}
+
+.navBar > * {
+    margin: 5px 1px 5px 10px;
+}
+
+.github,
+.web {
+    text-align: center;
+    transition: 0.3s;
+    user-select: none;
+    pointer-events: none;
+    z-index: 10;
+    color: #747474;
+    text-decoration: none;
+}
+
+.github svg,
+.web svg {
+    pointer-events: all;
+    transition: 0.3s;
+    fill: #747474;
+}
+
+.seperator {
+    height: 25px;
+    width: 2px;
+    border-radius: 10px;
+    background-color: #747474;
+
+}