@import "https://raw.githubusercontent.com/jonathantneal/system-font-css/gh-pages/system-font.css";

body {
  background: dodgerblue linear-gradient(22deg, aqua, dodgerblue, deeppink)
    fixed;
  color: white;
  font: normal 32px/1.6 system-ui, sans-serif;
  text-shadow: 0 1px 1px hsl(0 0% 0% / 20%);
  margin: 3rem;
}

h1 {
  font-size: 70px;
  font-weight: 600;
  color: #fdfdfe;
  text-shadow: 0px 0px 5px #b393d3, 0px 0px 10px #b393d3, 0px 0px 10px #b393d3,
    0px 0px 20px #b393d3;
}

a {
  color: inherit;
}

a:focus,
a:hover {
  text-decoration-color: black;
}

input {
  font: inherit;
  padding: 0.2em 0.5em;
}

.resultButton {
  background-color: #067f20;
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 20px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 10px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-1:hover,
.button-1:focus {
  background-color: #f082ac;
}

button {
  background-color: #a11313;
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 20px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 10px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-1:hover,
.button-1:focus {
  background-color: #f082ac;
}

/* Input Fields */

/* Speed Field */

#speedNumber {
  background-color: lightblue;
  color: darkblue;
  padding: 20px;
  border: 2px solid #6e74de;
  border-radius: 5px;
  font-size: 19px;
  width: 80px;
}

#speedNumber::placeholder {
  color: gray;
  font-style: arial;
  font-size: 19px;
}

#speedNumber:focus {
  border-color: #4c614c;
  box-shadow: 0 0 5px rgba(16, 28, 16, 0.5);
}

/* Percent Field */
#percentNumber {
  background-color: lightblue;
  color: darkblue;
  padding: 20px;
  border: 2px solid #6e74de;
  border-radius: 5px;
  font-size: 19px;
  width: 80px;
}

#percentNumber::placeholder {
  color: gray;
  font-style: arial;
  font-size: 19px;
}

#percentNumber:focus {
  border-color: #4c614c;
  box-shadow: 0 0 5px rgba(16, 28, 16, 0.5);
}

/* Result Numbers style */

#resultNum {
  color: #910b0b;
  font-style: arial;
  font-size: 29px;
}

p {
  color: #910b0b;
  font-style: arial;
  font-size: 29px;
}