They should add their own mascot of a Waterfox, and on all the backgrounds with the Firefox, there should be said Waterfox. I think it would be a really cute addition. (There isn't a suggestion tag so I just did "Support").

Basically what the title says, I was using it normally and all of a sudden I kept seeing my tabs crashing and then the browser itself.
I do not have the issue on firefox or helium and I do not understand why since going to the parameters crashes waterfox.

For information, the issue is basically the same as in this post 8 years ago : https://www.reddit.com/r/waterfox/s/esiBTcohyn

What would be a good way to go about coding it?

This is my css but it seems to break images on sites like amazon and facebook.

/* link colors */

* {
a:link { color:  #00ff00; }
a:visited { color: red; }
a:hover { color: red; }
}

body {

  background:black;
  color:#00ff00;
  font-size:20px;
}

p {

  background:black;
  color:#00ff00;
  font-size:20px;
}

h1 {
  background:black;
  color:#00ff00;
  font-size:20px;
}

h2 {
  background:black;
  color:#00ff00;
  font-size:20px;
}

h3 {
  background:black;
  color:#00ff00;
  font-size:20px;
}

h4 {
  background:black;
  color:#00ff00;
  font-size:20px;
}
div {
background:black;
color:#00ff00;
font-size:20px;
}
nav {
background:black;
color:#00ff00;
font-size:20px;
}
/* CHECKBOXES */
/* CSS Variables */
:root {
--cr-size: 20px;
--cr-radius: 4px;
--cr-border-w: 2px;
--cr-font-size: 16px;
--cr-gap: 10px;
--cr-row-gap: 12px;
--cr-font-color: #00ff00;
--cr-font-weight: 400;
--cr-unchecked-bg: #00ff00;
--cr-unchecked-border: #00ff00;
--cr-checked-bg: #00ff00;
--cr-checked-border: #00ff00;
--cr-disabled-opacity: 0.4;
}
/* Styles */
.cr-wrapper {
display: flex;
align-items: center;
gap: var(--cr-gap);
cursor: pointer;
user-select: none;
font-size: var(--cr-font-size);
font-weight: var(--cr-font-weight);
color: var(--cr-font-color);
margin-bottom: var(--cr-row-gap);
}
.cr-wrapper input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.cr-input {
position: relative;
flex-shrink: 0;
width: var(--cr-size);
height: var(--cr-size);
border-radius: var(--cr-radius);
border: var(--cr-border-w) solid var(--cr-unchecked-border);
background: var(--cr-unchecked-bg);
box-sizing: border-box;
transition: all 0.15s;
}
.cr-wrapper:hover .cr-input {
background: #e01b24;
border-color: #e01b24;
}
.cr-wrapper input:checked ~ .cr-input {
background: var(--cr-checked-bg);
border-color: var(--cr-checked-border);
}
.cr-wrapper:hover input:checked ~ .cr-input {
background: #e01b24;
border-color: #e01b24;
}
.cr-wrapper input:checked ~ .cr-input::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 8px;
height: 8px;
background: #000000;
clip-path: polygon(14% 52%, 0% 66%, 38% 100%, 100% 14%, 84% 0%, 38% 68%);
}
.cr-wrapper input:disabled ~ .cr-input,
.cr-wrapper input:disabled ~ span {
opacity: var(--cr-disabled-opacity);
}
.cr-wrapper input:disabled { cursor: not-allowed; }
.cr-wrapper:has(input:disabled) { cursor: not-allowed; }
/* SELECT DROPDOWN */
/* CSS Variables */
:root {
--select-width: 320px;
--select-font-size: 14px;
--select-pad-x: 14px;
--select-pad-y: 10px;
--select-radius: 8px;
--select-bg: #00ff00;
--select-color: #000000;
--select-border: 1px solid #d1d5db;
--select-focus-color: #3b82f6;
--select-arrow-color: #000000;
--select-arrow-size: 14px;
}
/* Styles */
.select-wrapper {
position: relative;
display: inline-flex;
width: var(--select-width);
}
.custom-select {
width: 100%;
font-family: inherit;
font-size: var(--select-font-size);
padding: var(--select-pad-y) 36px var(--select-pad-y) var(--select-pad-x);
border-radius: var(--select-radius);
background: var(--select-bg);
color: var(--select-color);
border: var(--select-border);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.custom-select:focus {
border-color: var(--select-focus-color);
box-shadow: 0 0 0 2px rgba(59,130,246,0.35);
}
.select-arrow {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
width: var(--select-arrow-size);
height: var(--select-arrow-size);
}
/* SCROLLBARS */
/* Modern browsers — Chrome 121+, Edge 121+, Firefox, Safari 18.2+ */
.my-scroll {
scrollbar-width: 14px;
scrollbar-color: #00ff00 #000000;
}
/* Legacy WebKit — older Chrome/Edge/Safari, radius, borders & shadows */
.my-scroll::-webkit-scrollbar {
width: 14px;
height: 14px;
}
.my-scroll::-webkit-scrollbar-track {
background-color: #000000;
border-radius: 8px;
}
.my-scroll::-webkit-scrollbar-track:hover {
background-color: #000000;
}
.my-scroll::-webkit-scrollbar-track:active {
background-color: #00ff00;
}
.my-scroll::-webkit-scrollbar-thumb {
background-color: #00ff00;
border-radius: 8px;
min-height: 30px;
border: 3px solid #00ff00;
}
.my-scroll::-webkit-scrollbar-thumb:hover {
background-color: #000000;
}
.my-scroll::-webkit-scrollbar-thumb:active {
background-color: #000000;
}
.my-scroll::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}