style.css

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}

#root,
#__next {
  isolation: isolate;
}

body {
  background: linear-gradient(to right, rgb(77, 243, 12), rgb(9, 175, 226));
  color: rgba(0, 0, 0, 0.5);
  font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  letter-spacing: 0.3em;
  padding: 30px;
  text-align: center;
  overflox: hidden;
}

.linear-gradient button {
  background: none;
  border: none;
  cursor: pointer;
}

label[for="property"] {
  margin-top: 40px;
}

.random {
  margin-top: 80px;
}

.random button {
  outline: 0;
  border: 0;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  will-change: box-shadow, transform;
  background: #fcfcfd;
  box-shadow: 0px 2px 4px rgb(45 35 66 / 40%),
    0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
  height: 48px;
  padding: 0 32px;
  font-size: 18px;
  border-radius: 6px;
  color: #36395a;
  text-transform: uppercase;
}

.random button:hover {
  box-shadow: 0px 4px 8px rgb(45 35 66 / 40%),
    0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #d6d6e7;
  transform: translateY(-2px);
}

.random button:active {
  box-shadow: inset 0px 3px 7px #d6d6e7;
  transform: translateY(2px);
}

i {
  color: rgba(0, 0, 0, 0.7);
  margin-left: 5px;
  padding: 0 5px;
}

i:hover {
  color: inherit;
}

label {
  display: block;
  font-size: 1.5rem;
  padding: 30px 10px;
  margin-top: 18px;
  text-transform: uppercase;
  font-weight: 600;
}

.color-input {
  display: flex;
}

input[type="color"] {
  margin: 5px;
}

.linear-gradient {
  display: flex;
  justify-content: center;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
  align-items: center;
  background: #fcfcfd;
  /*color: #000;*/
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 0;
  font-family: monospace;
  /*  font-family: 'Iosevka';*/
  font-weight: bold;
  font-size: 1.3rem;
  padding: 30px 20px;
  border-radius: 10px;
  margin: auto;
  max-width: 900px;
}

h1 {
  color: #fff;
  font-family: "Courier";
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: 3px;
  text-shadow: rgba(13, 0, 77, 0.08) 0 2px 4px, rgba(13, 0, 77, 0.08) 0 3px 6px,
    rgba(13, 0, 77, 0.08) 0 8px 16px;
  text-transform: uppercase;
}

.container {
  display: flex;
  flex-direction: column;
  font-size: 2.3rem;
  justify-content: center;
  align-items: center;
  margin: 5vw 0 auto;
  padding-top: 10px;
}

.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  border-color: #555 transparent transparent transparent;
  border-style: solid;
  border-width: 5px;
  content: "";
  left: 50%;
  margin-left: -5px;
  position: absolute;
  top: 100%;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 768px) and (min-width: 481px) {
  .container {
    font-size: 1.4rem;
    margin: 16vw 0 auto;
    padding-top: 45px;
  }
}

@media screen and (max-width: 480px) {
  .container {
    margin: 0;
    font-size: 1.1rem;
    margin: 12vw 0 auto;
    padding-top: 20px;
  }
  body {
    letter-spacing: 0;
  }
  label {
    font-size: 1.1rem;
  }
  .random {
    margin-top: 40px;
  }
  label[for="property"] {
    margin-top: 18px;
  }
}