:root {
   --bg-color: #ffffff;
   --text-color: #000000;
   --btn-primary-bg: #a5d6cf;
   /* Techwyse Green */
   --btn-primary-text: #ffffff;
   --btn-success-bg: #7e65aa;
   /* TechWyse Lilac */
   --btn-success-text: #ffffff;
   --btn-warning-bg: #ffc107;
   --btn-warning-text: #000000;
   --font-family: 'Poppins', sans-serif;
   --copy-icon-light: "\f0c5";
   /* FontAwesome copy icon */
   --copy-icon-dark: "\f0c5";
   /* FontAwesome copy icon */
   --copy-icon-color: #006799;
}

@media (prefers-color-scheme: dark) {
   :root {
      --bg-color: #353535;
      --text-color: #ffffff;
      --btn-primary-bg: #4a519e;
      /* TechWyse Purple */
      --btn-primary-text: #ffffff;
      --btn-success-bg: #212b59;
      /* TechWyse Navy */
      --btn-success-text: #ffffff;
      --btn-warning-bg: #e0a800;
      --btn-warning-text: #000000;
      --copy-icon-light: "\f0c5";
      /* FontAwesome copy icon */
      --copy-icon-dark: "\f0c5";
      /* FontAwesome copy icon */
      --copy-icon-color: #006799;
   }
}

body {
   background-color: var(--bg-color);
   color: var(--text-color);
   font-family: var(--font-family);
}

.container {
   margin-top: 50px;
   font-size: 14px;
}

.row {
   display: flex;
}

.col-left,
.col-right {
   flex: 1;
   padding: 20px;
}

.password-box {
   margin-bottom: 20px;
   position: relative;
}

.copy-icon {
   float: right;
   margin-right: 6px;
   margin-top: -28px;
   position: relative;
   cursor: pointer;
   color: var(--copy-icon-color);
}

.copy-icon::before {
   content: var(--copy-icon-light);
}

@media (prefers-color-scheme: dark) {
   .copy-icon::before {
      content: var(--copy-icon-dark);
   }
}

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

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

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

h1 {
   font-size: 35px;
}

h2 {
   font-size: 17.5px;
}