:root {
 --StrongCyan: hsl(172, 67%, 45%);
 --VeryDarkCyan: hsl(183, 100%, 15%);
 --DarkGrayishCyan: hsl(186, 14%, 43%);
 --GrayishCyan: hsl(184, 14%, 56%);
 --LightGrayishCyan: hsl(185, 41%, 84%);
 --VeryLightGrayishCyan: hsl(189, 41%, 97%);
 --White: hsl(0, 0%, 100%);

 --veryDarkGrayishCyan: hsl(187, 12%, 15%);
}

@import url("https://fonts.googleapis.com/css?family=Space+Mono:400,700&display=swap");

body {
 font-family: "Space Mono", monospace;
 background-color: var(--LightGrayishCyan);
}

.header {
 text-align: center;
 width: 75px;
 word-wrap: break-word;
 margin: 0 auto;
 margin-top: 45px;
 margin-bottom: 25px;
}

.main-container {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 background-color: var(--White);
 border-radius: 20px 20px 0px 0px;
 margin: 10px;
 padding: 20px;
 gap: 20px;

 @media screen and (min-width: 700px) {
   width: 680px;
   margin: 0 auto;
   display: flex;
   flex-direction: row;
   border-radius: 20px;
 }
}

.bill-tip-people-container {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 gap: 20px;

 @media screen and (min-width: 700px) {
   width: 350px;
 }
}

.title-icon-input-container {
 background-color: var(--White);
 display: flex;
 flex-direction: column;
 gap: 5px;
}

.title-icon-input-container2 {
 background-color: var(--White);
 display: flex;
 flex-direction: column;
 gap: 5px;
}

.icon-input {
 background-color: var(--VeryLightGrayishCyan);
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 /* The below is specifically locating the $ and text where i want it */
 padding-top: 1%;
 padding-bottom: 1%;
 padding-left: 3%;
 padding-right: 3%;
}

.dollar-input img {
 width: auto;
 height: 15px;
}

.amount,
.number-of-people {
 background-color: transparent;
 border: none;
 font-weight: bold;
 width: auto;
 min-width: 10px;
 align-self: flex-end;
 text-align: right;
 font-size: 24px;
}

.tip-container {
 background-color: var(--White);
 display: flex;
 flex-direction: column;
 row-gap: 10px;
}

.tip-percentages {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 row-gap: 10px;

 @media screen and (min-width: 700px) {
   display: flex;
   flex-direction: column;
   height: 100px;
   width: auto;
   gap: 10px;
 }
}

button {
 background-color: var(--VeryDarkCyan);
 color: var(--White);
}

button:hover {
 background-color: var(--StrongCyan);
 color: var(--veryDarkGrayishCyan);
}

input {
 background-color: var(--LightGrayishCyan);
 color: var(--veryDarkGrayishCyan);
}

.input,
.button {
 border-radius: 5px;
 width: 140px;
 height: 42px;
 font-size: 24px;
 font-weight: bold;
 text-align: center;
 padding: 0px;
 border-style: none;

 @media screen and (min-width: 700px) {
   width: 110px;
 }
}

.summary-container {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
 padding: 25px;
 background-color: var(--VeryDarkCyan);
 border-radius: 20px;
 gap: 20px;

 @media screen and (min-width: 700px) {
   width: 240px;
 }
}

.summary-text {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 width: 100%;
 color: var(--White);
}

p {
 margin: 0px;
}

.summary-heading {
 width: 100px;
}

.summary-subtext {
 flex-direction: row;
 align-items: center;
 color: var(--GrayishCyan);
}

.calculated-figure {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 color: var(--StrongCyan);
 font-weight: bold;
 font-size: 35px;
}

.reset-button {
 background-color: var(--StrongCyan);
 justify-content: center;
 align-items: center;
 color: var(--DarkGrayishCyan);
 border-radius: 5px;
 width: 100%;
 height: 42px;
 font-size: 20px;
 font-weight: bold;
 text-align: center;
 border-style: none;
 margin-top: 20px;
}

.attribution {
 font-size: 11px;
 text-align: center;
}
.attribution a {
 color: hsl(228, 45%, 44%);
}

.active {
 background-color: var(--StrongCyan);
 color: var(--veryDarkGrayishCyan);
}

.error-message {
 color: red;
 font-weight: bold;
 margin-top: 10px;
}