@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --backgroundcolor: #ffffff;
  --tipblue: #006afe;
}
@media (prefers-color-scheme:light) {
  :root {
    --backgroundcolor: #ffffff;
    --tipblue: #006afe;
    --textprimary: #000000;
    --textsecondary: #ffffff;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --backgroundcolor: #000000;
    --tipblue: #006afe;
    --textprimary: #ffffff;
    --textsecondary: #ffffff;
  }
}
@media (orientation:landscape) {
	:root {
    --percentageSize: 3em;
    --buttonWidth: 80vw;
	}
}
@media (orientation:portrait) {
	:root {
    --percentageSize: 2em;
    --buttonWidth: 90vw;
	}
}
body {
  position: relative;
  height: 100vh;
}
.copyright {
  position: absolute;
  bottom: 0;
  right: 0;
}
.copyright, .copyright a {
  color: var(--textprimary);
}
#back {
  position: absolute;
  margin: 1em;
  top: 0;
  left: 0;
  fill: var(--textprimary);
}
#main {
  flex-direction: column;
  gap: 1em;
  height: 80vh;
}
.tipOption, .lowerOption {
  background-color: var(--tipblue);
  width: var(--buttonWidth);
  flex-basis: 1;
  text-align: center;
  padding: 2em 0;
}
#customButton, #noTip {
  cursor: pointer;
}
.tipOption p, .lowerOption p {
  color: var(--textsecondary);
}
.threeOptions {
  display: flex;
  flex-direction: row;
  gap: 1em;
  width: var(--buttonWidth);
}
.topInput {
  font-weight: bold;
  font-size: 3em;
  margin-top: 2em;
}
.addTipText {
  font-size: 2em;
}
.percentage {
  font-size: var(--percentageSize);
}
p {
  color: var(--textprimary);
  font-family: "Roboto", sans-serif;
}
#customInputs {
  display: none;
}
#cancelCustom {
  width: 100%;
  cursor: pointer;
}
.percentageInput {
  font-weight: bold;
  font-size: 2em;
}