:root {
    --magenta: #FF69B4;
    --black: #0A0D0F;
    --white: #ffffff;
    --off-blue: #DFE9F1;
    --grey: #B2B3B3;
    --lime: #BFFF80;
    --violet: #C0BBDF;
    --yellow: #FFF533;
    --light-grey: #f8f8f8;
}

input::placeholder {
    color: var(--grey) !important;
    opacity: 1 !important;
}

input::-webkit-input-placeholder { /* Webkit browsers */
    color: var(--grey) !important;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: var(--grey) !important;
    opacity: 1 !important;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: var(--grey) !important;
    opacity: 1 !important;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: var(--grey) !important;
} 

u {
    text-underline-offset: 3px;
    text-decoration-thickness: 3px;
}

/* Apply the styles to the selection */
::selection {
  background-color: var(--yellow) !important;; /* Background color of the highlighted text */
  color: var(--black) !important;            /* Color of the highlighted text */
}

/* For better browser compatibility, you can include the vendor prefixes */
::-moz-selection {           /* Firefox */
  background-color: var(--yellow) !important;; /* Background color of the highlighted text */
  color: var(--black) !important;            /* Color of the highlighted text */
}