/* src/main.scss */
* {
  box-sizing: border-box;
}
html {
  background-color: hsl(185, 41%, 84%);
  font-family: "Space Mono", monospace;
}
body {
  margin: 0;
  min-height: 100vh;
  font-size: 16px;
  overflow-x: hidden;
  font-weight: 700;
}
body,
body main {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body main {
  gap: 80px;
}
@media (max-width: 840px) {
  body main > img {
    margin-top: 64px;
  }
}
input,
label {
  font-weight: 700;
}
input:active,
input:focus {
  outline-width: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
a {
  text-decoration: none;
}
p {
  margin: 0;
  padding: 0;
}
#githubLink {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
#githubLink img {
  transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out;
  max-width: 50px;
  height: auto;
}
#githubLink img:hover {
  transform: rotate(360deg) scale(1.1);
  filter: drop-shadow(0 0 10px hsl(172, 67%, 45%));
}
.input {
  display: flex;
  flex-direction: column;
}
.input .inputContainer {
  position: relative;
}
.input .inputContainer input {
  width: 100%;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: hsl(189, 41%, 97%);
  padding: 8px 16px 8px 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  caret-color: hsl(172, 67%, 45%);
  color: hsl(183, 100%, 15%);
  transition: border-color 0.1s linear;
}
.input .inputContainer input::-moz-placeholder {
  font-size: 24px;
  text-align: right;
}
.input .inputContainer input,
.input .inputContainer input::placeholder {
  font-size: 24px;
  text-align: right;
}
.input .inputContainer input::-moz-placeholder {
  color: hsl(184, 14%, 56%);
}
.input .inputContainer input::placeholder {
  color: hsl(184, 14%, 56%);
}
.input .inputContainer input:focus,
.input .inputContainer input:hover,
.input .inputContainer input.active {
  border-color: hsl(172, 67%, 45%);
}
.input .inputContainer input.equal-padding {
  padding: 8px 12px;
  border-radius: 8px;
}
.input .inputContainer img {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}
.input .inputContainer img:hover + input {
  border-color: hsl(172, 67%, 45%);
}
.label {
  color: hsl(186, 14%, 43%);
  font-weight: 700;
  margin-bottom: 8px;
}
.resultLabel {
  display: flex;
  flex-direction: column;
}
.resultLabel .text {
  color: hsl(0, 0%, 100%);
}
.resultLabel .sub-text {
  color: hsl(184, 14%, 56%);
  font-size: 14px;
}
.resultValue {
  font-size: 36px;
  color: hsl(172, 67%, 45%);
}
.result {
  display: flex;
  gap: 40px;
  justify-content: space-between;
}
.btn {
  cursor: pointer;
  border: none;
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  padding: 8px 16px;
  background-color: hsl(183, 100%, 15%);
  color: hsl(0, 0%, 100%);
  font-weight: 700;
  font-size: 24px;
  transition: background-color 0.1s linear, filter 0.1s linear;
}
.btn.outlined {
  background-color: hsl(172, 67%, 45%);
  color: hsl(183, 100%, 15%);
  font-size: 14px;
}
.btn.outlined:hover {
  filter: brightness(1.25);
}
.btn.disabled {
  pointer-events: none;
  filter: opacity(0.25);
}
.btn:hover,
.btn.active {
  background-color: hsl(172, 67%, 45%);
  color: hsl(183, 100%, 15%);
}
#calculatorContainer {
  --box-width: 320px;
  --r1: 16px;
  --d: 24px;
  --border-radius: calc(var(--r1) + var(--d));
  width: 100%;
  background-color: hsl(0, 0%, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--d);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
@media (min-width: 428px) {
  #calculatorContainer {
    width: -moz-fit-content;
    width: fit-content;
    border-radius: var(--border-radius);
  }
}
@media (min-width: 840px) {
  #calculatorContainer {
    flex-direction: row;
    gap: 80px;
    padding: var(--d) var(--d) var(--d) calc(var(--d) * 1.5);
  }
}
#calculatorContainer #calculateOptions {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: var(--d);
}
#calculatorContainer #calculateOptions #tipValuesContainer {
  --option-width: 118px;
  --spacing: 12px;
}
@media (min-width: 840px) {
  #calculatorContainer #calculateOptions #tipValuesContainer {
    min-width: calc(3 * var(--option-width) + 2 * var(--spacing));
  }
}
#calculatorContainer #calculateOptions #tipValuesContainer .values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--option-width), 1fr));
  gap: 12px;
}
@media (min-width: 840px) {
  #calculatorContainer #calculateOptions #tipValuesContainer .values {
    grid-template-columns: repeat(auto-fill, var(--option-width));
  }
}
#calculatorContainer #results {
  justify-content: space-between;
  width: 100%;
  background-color: hsl(183, 100%, 15%);
  padding: calc(var(--d) * 1.5) var(--d);
  border-radius: var(--r1);
}
@media (min-width: 840px) {
  #calculatorContainer #results {
    width: var(--box-width);
  }
}
#calculatorContainer #results,
#calculatorContainer #results .wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#calculatorContainer #results #resetBtn {
  align-self: flex-end;
}
/*# sourceMappingURL=main.css.map */