style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;0,800;1,400;1,800&display=swap");

:root {
   /* primary */
   --purple: hsl(259, 100%, 65%);
   --light-red: hsl(0, 100%, 67%);
   /* neutral */
   --white: hsl(0, 0%, 100%);
   --off-white: hsl(0, 0%, 94%);
   /* --off-white: rgb(200, 200, 255); */
   --light-grey: hsl(0, 0%, 86%);
   --smokey-grey: hsl(0, 1%, 44%);
   --off-black: hsl(0, 0%, 8%);
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

img {
   width: 100%;
   display: block;
}

hr {
   width: 100%;
}

body {
   display: grid;
   place-items: center;
   min-height: 100dvh;
   background: var(--off-white);
   font-family: "Poppins", sans-serif;
   position: relative;
}

.container {
   background: var(--white);
   padding: 40px 20px;
   border-radius: 25px 25px 25% 25px;
   min-width: 300px;
}

@media (min-width: 768px) {
   .container {
      min-width: 550px;
      padding-inline: 30px;
   }
}

form {
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
   color: var(--off-black);
}

.form-item {
   display: flex;
   flex-direction: column;
   gap: 4px;
   color: var(--off-black);
   font-weight: bold;
}

input {
   max-width: 70px;
   height: 45px;
   font-weight: bold;
   font-size: 20px;
   padding-inline: 4px;
   border-radius: 6px;
   border: 2px solid var(--off-white);
   outline: transparent;
   cursor: pointer;
}

input:hover,
input:focus-visible {
   border: 2.5px solid var(--light-grey);
}

@media (min-width: 768px) {
   form {
      margin-bottom: 0px;
   }
   input {
      max-width: 90px;
   }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

input[type="number"] {
   appearance: textfield;
   -moz-appearance: textfield;
}

.error {
   color: red;
   font-size: 9px;
   font-weight: normal;
}

.vertical-divider {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 30px;
}

.down-arrow {
   display: grid;
   place-items: center;
   background: var(--purple);
   width: 150px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   transition: all 0.3s linear;
   cursor: pointer;
}

.down-arrow:hover {
   background: var(--off-black);
}

.arrow {
   width: 30px;
}

@media (min-width: 768px) {
   .down-arrow {
      order: 3;
   }
}

.result {
   font-size: 55px;
   font-weight: 800;
   line-height: 1;
}

.result .number {
   color: var(--purple);
}

@media (min-width: 768px) {
   .result {
      font-size: 70px;
   }
}

.history {
   position: absolute;
   background: whitesmoke;
   color: var(--off-black);
   min-height: 100dvh;
   width: 100dvw;
   padding: 20px 15px;
   right: 100%;
   transition: right 0.3s ease-in-out;
   overflow-y: scroll;
   z-index: 10;
}

@media (min-width: 768px) {
   .history {
      width: 375px;
   }
}

i {
   cursor: pointer;
}

.toggle-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 1rem;
   right: 1rem;
   width: 50px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   background: azure;
}

.history header {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.history-content {
   padding-top: 1.5rem;
}

.history .histories {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: white;
   margin-bottom: 0.5rem;
   padding: 12px;
   border-radius: 6px;
}

.show {
   right: 0;
   transition: right 0.3s linear;
}

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