:root {
  /* Color Scheme */
  --primary-bg-color: #752aed; /* Primary background color */
  --secondary-bg-color: #10044a; /* Secondary background color */
  --text-color: white; /* Primary text color */
  --btn-hover-bg-color: #8752f1; /* Button hover background color */

  /* Define primary colors and styles for buttons */
  --button-background: #ffffff; /* Assuming a white background */
  --button-text: #752aed; /* Purple text, as in your navbar theme */
  --button-border: #752aed; /* Purple border to match the text */
  --button-hover-bg: #eeeeee; /* Lighter background on hover */
  --button-hover-text: #752aed; /* Keeping text color the same on hover */
  --button-hover-border: #752aed; /* Keeping border color the same on hover */
  --border-radius: 8px; /* Rounded corners for buttons */

  --theme--heading-color: var(--swatch--dark);
  --logo-primary: #7a33ff;
  --logo-secondary: #000054;
  --sub-brand-dark: #000054;
  --sub-brand-light: #332187;
  /* Spacing */
  --nav-padding: 0.5rem 2rem;
  --nav-item-gap: 1rem;

  /* Typography */
  --font-family: 'Inter', sans-serif;
  --link-font-weight: bold;
  --btn-padding: 0.5rem 1rem;
}

.g_clickable_link {
  background-color: var(--primary-bg-color);
  color: var(--button-text);
  border: 2px solid var(--button-border);
  border-radius: var(--border-radius);
  padding: 0.5rem 1rem;
  display: inline-block; /* Adjust display to inline-block for better control */
  text-align: center;
  cursor: pointer;
  text-decoration: none; /* Remove underline from links */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
  text-decoration: none; /* Remove underline from links */
  color: inherit; /* Inherit color from parent */
  display: block; /* Ensure the link covers the area of the button */
}

.g_clickable_link:hover {
  background-color: #0e0449;
  color: var(button-hover-bg);
  border-color: var(--button-hover-border);
}

.g_clickable_text {
  visibility: visible; /* Make the text visible as opposed to 'sr-only' which hides it */
}

/* Navbar Styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary-bg-color);
  color: var(--text-color);
  padding: var(--nav-padding);
}

.navbar-logo img {
  height: 50px; /* Adjust as per your logo's design */
}

.navbar-items {
  display: flex;
  gap: var(--nav-item-gap);
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  padding: 0.5rem;
  font-weight: var(--link-font-weight);
}

.navbar-buttons {
  display: flex;
  gap: var(--nav-item-gap);
}

.btn {
  background-color: var(--secondary-bg-color);
  color: var(--text-color);
  border: none;
  padding: var(--btn-padding);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn:hover {
  background-color: var(--btn-hover-bg-color);
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--text-color);
}

@font-face {
  font-family: Helvetica;
  font-style: normal;
  font-weight: 900;
  src: url(../css/helvthin.otf);
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  background-image: url(../img/wp.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica',
    sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#NavContainer {
  text-align: center;
  background-color: #000000bb;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 30px;
  align-items: center;
}

.navBtn {
  background-color: #00000000;
  border: none;
  color: white;
  font-size: 28px;
  transform: perspective(750px) translate3d(0px, 0px, -250px) rotateX(27deg)
    scale(0.9, 0.9);
  box-shadow: 0 70px 40px -20px rgba(0, 0, 0, 0.2);
  transition: 0.4s ease-in-out transform;
}

.navBtn:hover {
  transform: translate3d(0px, 0px, -250px);
}

#logoImage {
  width: 200px;
  margin-right: 200px;
}

#kbContainer {
  margin: auto;
  display: flex;
  justify-content: center;
  padding: 10px;
}

#kbLayout {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 20px;
  padding: 10px;
  display: grid;
}

#kbLayoutInner {
  grid-template-rows: repeat(10, auto);
  display: grid;
  position: relative; /* for batery indicator */
}

.rowOne,
.rowTwo,
.rowThree,
.rowFour,
.rowFive,
.rowSix {
  display: flex;
  max-width: 100%;
}

.mouseTop {
  display: flex;
  flex-direction: row;
}

.mouseBtn {
  display: flex;
  flex-direction: row;
  gap: 28px;
}

#testingContainer {
  display: grid;
  grid-gap: 20px;
  justify-items: center;
  justify-content: center;
  min-width: 640px;
  padding-top: 10px;
  margin-left: 50px;
}

#testBtns {
  margin-right: 30px;
}

#testBtns > button {
  width: 130px;
  background-color: transparent;
  border: none;
  box-shadow: 0 0 4px 1px #7529ed;
  border-radius: 25px;
  padding: 5px;
}

#testBtns > button:active {
  transform: scale(0.9);
}

#testBtns > button > span {
  color: rgb(211, 207, 201);
  font-size: 15px;
  font-weight: bold;
}
#testBtns > button:hover > span {
  color: limegreen;
}

#testBtns #startRecording:hover > span {
  color: limegreen;
}

#testBtns #stopRecording:hover > span {
  color: red;
}

#recordingStatus {
  color: limegreen;
  font-size: 20px;
  font-weight: bold;
}

#video {
  width: 640px;
  height: 480px;
  box-shadow: 0 0 5px 2px #7529ed;
  border: 1px solid #7529ed;
  border-radius: 15px;
  object-fit: cover;
}

#testingContainer > button {
  width: 115px;
}

.key.Mouse0 {
  border-radius: 55px 0 0 0;
  height: 70px;
  width: 96px;
}

.key.Mouse1 {
  border-radius: 10px;
  height: 50px;
  width: 24px;
}

.key.Mouse2 {
  border-radius: 0 55px 0 0;
  height: 70px;
  width: 96px;
}

.key.scrollUp,
.key.scrollDown {
  border-radius: 0 0 0 0;
  height: 20px;
  width: 96px;
}

.key {
  font-size: 18px;
  height: 52px;
  width: 50px;
  margin: 5px 2px;
}

.keyFunc {
  font-size: 15px;
  height: 35px;
  width: 47px;
  margin: 5px 1px;
}

.MetaLeft img,
.MetaRight img,
.keyFunc img {
  margin-top: 5px;
}

.key,
.keyFunc {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7529ed;
  border-radius: 8px;
  border: 1px solid #7529ed;
  border-bottom: 2px solid #7529ed;
  text-align: center;
}

.key.active,
.keyFunc.active {
  background-color: #7529ed;
  border-color: #7529ed;
  color: #ffffff;
}

.key > span {
  margin: 0 auto 0;
}

.Backspace {
  width: 150px;
}

.Backslash {
  width: 130px;
}

.rowTwo .key192 span {
  font-size: 40px;
}

.CapsLock {
  width: 105px;
}

.Enter {
  width: 150px;
}

.ShiftLeft {
  width: 132px;
}

.ShiftRight {
  width: 180px;
  margin-right: 20px;
}

.ControlRight,
.ControlLeft {
  width: 95px;
}

.Tab,
.MetaLeft,
.MetaRight,
.AltLeft,
.AltRight {
  width: 70px;
}

.Space {
  width: 325px;
}

.Backspace {
  margin-right: 130px;
}

.Enter,
.Backslash {
  margin-right: auto;
}

.ArrowUp {
  margin-right: 55px;
}

.Numpad0 {
  width: 104px;
}

.rowOne .keyFunc {
  min-width: 51.6px;
}

.rowOne .Home {
  margin-right: 20px;
}

.NumLock {
  font-size: 15px;
}

/* test */
#alertContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#alert {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #222;
  color: #ddd;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid grey;
  text-align: center;
  transform: translate(-50%, -50%);
  min-width: 500px;
}

#alertTitle {
  margin-bottom: 20px;
  font-size: 34px;
  font-weight: bold;
  color: #ff6060;
}

#alertBtn {
  background-color: #7529ed;
  color: limegreen;
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  margin-top: 16px;
  border-radius: 5px;
  font-size: 18px;
}

#alertBtn:active {
  transform: scale(0.95);
}

#alertText {
  display: block;
  margin-bottom: 20px;
}

/* battery */

#battery-info {
  position: absolute;
  bottom: -40px;
  right: 5px;
  background-color: #000000;
  padding: 5px 30px;
  box-shadow: 0 0 4px 1px #7529ed;
  border: 1px solid #7529ed;
  color: #ffffff;
  border-radius: 15px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  width: 285px;
  height: 150px;
  white-space: normal;
}

.batterybx {
  font-family: Arial, sans-serif;
}

.batterybx .titlebtry {
  font-weight: bold;
}

.underKeys {
  display: flex;
  justify-content: center;
}

.index .videoWrapper {
  background-color: transparent;
  border: none;
  box-sizing: border-box;
}

.videoWrapper {
  grid-row: 8;
  display: block;
  position: absolute;
  left: 5px;
  border: none;
}

.iframe {
  border-radius: 20px;
  box-shadow: 0 0 4px 1px #7529ed;
  border: 1px solid #7529ed;
  border-radius: 15px;
}

.batteryIcon {
  padding-left: 70px;
}

.key.secondary-highlight {
  background-color: #0e0449;
  transform: scale(1.1);
  box-shadow: 0 0 10px #13055f73;
}

.index .videoWrapper {
  background-color: transparent;
  border: none;
  box-sizing: border-box;
}

/*arrows*/

.index .arrowContainer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  margin-top: 5px;
}

.index .ArrowUp,
.index .ArrowDown,
.index .ArrowLeft,
.index .ArrowRight {
  font-size: 18px;
  margin: 5px;
  height: 40%;
}

.index .ArrowLeft,
.index .ArrowRight {
  margin-top: 32.5px;
}

.index .ArrowUp,
.index .ArrowDown {
  margin: 0;
}

.index .ArrowLeft {
  margin-left: 20px;
}
/* end arrows */

/* keys */
/* Row One */
.index .key.Backquote {
  font-size: 30px;
  padding-top: 10px;
}

.index .rowOne .key {
  width: 94.5px;
}

.index .key.keyFunc.F10 {
  margin-right: 0px;
}

/* Row Two */
.index .rowTwo .key {
  width: 70px;
}

.index .rowTwo .key.Backspace {
  width: 96px;
  margin-right: 0px;
}

/* Row Three */
.index .rowThree .key {
  width: 70px;
}

.index .rowThree .key.Backslash {
  margin-right: 0px;
}

.index .rowThree .key.Tab {
  width: 96px;
}

/* Row Four */
.index .rowFour .key {
  width: 70px;
}

.index .rowFour .key.MetaLeft {
  width: 120px;
}

.index .rowFour .key.Enter {
  width: 120px;
}

/* Row Five */
.index .rowFive .key {
  width: 70px;
}

.index .rowFive .key.ShiftLeft,
.index .rowFive .key.ShiftRight {
  width: 157px;
}

/* Row Six */
.index .rowSix .key.ControlLeft,
.index .rowSix .key.AltLeft {
  width: 157.5px;
}

.index .rowSix .key.ControlRight,
.index .rowSix .key.AltRight {
  width: 110px;
}

.index .rowFive .key.ShiftRight,
.index .rowFour .key.Enter {
  margin-right: 0px;
}

select:focus {
  outline: none;
  border: none;
}

#webcamDropdown {
  background: url("data:image/svg+xml,<svg height='14px' width='14px' viewBox='0 0 16 16' fill='%23a66cd2' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>")
    no-repeat;
  background-position: calc(100% - 0.25rem) center;
  background-size: 15px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  font-size: 15px;
  font-weight: bold;
  background-color: rgb(0, 0, 0);
  border: none;
  box-shadow: 0 0 4px 1px #7529ed;
  border-radius: 25px;
  text-align: center;
  color: rgb(211, 207, 201);
  padding: 5px;
  min-width: 150px;
}

.mouseContainer {
  margin-left: 25px;
}

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

body,
html {
  font-family: Arial, sans-serif;
}

.navbar {
  background-color: #752aed;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.navbar-logo img {
  height: 50px;
}

.navbar-items {
  display: flex;
  gap: 1rem;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 0.5rem;
  font-weight: bold;
}

.navbar-buttons {
  display: flex;
  gap: 0.5rem;
}

.btn {
  background-color: #10044a;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid white;
}

@media (max-width: 768px) {
  .navbar-container {
    flex-direction: column;
  }
  .navbar-items {
    flex-direction: column;
    align-items: center;
  }
}

:root {
  /* Color Scheme */
  --primary-bg-color: #ffffff; /* Primary background color (white) */
  --secondary-bg-color: #752aed; /* Secondary background color (purple) */
  --text-color: #752aed; /* Primary text color (purple) */
  --btn-bg-color: #ffffff; /* Button background color (white) */
  --btn-text-color: #752aed; /* Button text color (purple) */
  --btn-border-color: #752aed; /* Button border color (purple) */

  /* Spacing */
  --nav-padding: 0.5rem 2rem;
  --nav-item-gap: 1rem;

  /* Typography */
  --font-family: 'Inter', sans-serif;
  --link-font-weight: bold;
  --btn-padding: 0.5rem 1rem;
}

/* Navbar Styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary-bg-color);
  color: var(--text-color);
  padding: var(--nav-padding);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* subtle shadow for depth */
}

.navbar-logo img {
  height: 50px; /* Adjust as per your logo's design */
}

.navbar-items {
  display: flex;
  gap: var(--nav-item-gap);
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  padding: 0.5rem;
  font-weight: var(--link-font-weight);
}

.navbar-buttons {
  display: flex;
  gap: var(--nav-item-gap);
}

.btn {
  background-color: var(--btn-bg-color);
  color: var(--btn-text-color);
  border: 1px solid var(--btn-border-color);
  padding: var(--btn-padding);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-weight: bold; /* Make text bold */
}

.btn:hover {
  background-color: #f0f0f0; /* Light grey background on hover */
}

.btn-contact {
  border-radius: 20px;
}

.btn-contact:hover {
  background-color: #0e0449;
  color: #ffffff;
  border: 1px solid #0e0449;
}