@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;1,100;1,300;1,400&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.container {
  margin: auto;
  margin-top: 3rem;
  margin-bottom: 4rem;
  padding: 1.5rem;
  width: 350px;
  text-align: center;
  border-radius: 15px;
}

h1 {
  font-size: 1.65rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}

.io {
  display: flex;
  margin-bottom: 1.5rem;
  justify-content: space-between;
  gap: 1rem;
}

svg#Layer_1 {
  width: 1.5rem;
  margin-left: -2.73rem;
  fill: #979797;
  background-color: #f8f8f8;
  height: 1.3rem;
  margin-top: 0.51rem;
}

svg:hover {
  cursor: pointer;
}

input#output {
  width: 210px;
  padding-right: 30px;
  overflow: auto;
  font-size: 0.81rem;
  font-weight: 600;
  padding-left: 5px;
}
button#gp {
  font-size: 0.75rem;
  width: 80px;
}

h2 {
  font-size: 0.8rem;
  font-weight: bold;
}

div.func_area {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: center;
}

div.row_1 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
div.row_2 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

button.func_btn {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  width: 125px;
  height: 50px;
}

div.length {
  display: flex;
  justify-items: center;
}

label {
  font-size: small;
  margin-right: 1.9rem;
}

input#pl {
  width: 100px;
}

.end_sec {
  margin-top: 1.2rem;
}

div#display {
  width: 16rem;
  height: 2rem;
  border-radius: 50px;
  border: 1px solid rgb(109, 109, 109);
  margin-left: 1.3rem;
  font-size: 0.85rem;
  overflow: hidden;
  padding: 5px;
}

div#remember {
  width: 16rem;
  margin-top: 1rem;
  height: 6rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  border: 1px solid grey;
  margin-left: 1.3rem;
  color: rgb(102, 102, 102);
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 1rem;
  height: 6.5rem;
  overflow: auto;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip-left {
  position: relative;
  display: inline-block;
}

.tooltip-left .tooltiptext-left.hs1::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip-left:hover .tooltiptext-left {
  visibility: visible;
}

.footer {
  width: full;
  height: 10rem;
  background-color: rgb(29, 36, 49);
}

body {
  background-color: #ececec;
}

div.container {
  background-color: white;
}

.check-pushable {
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  outline-offset: 4px;
  touch-action: manipulation;
}

.check-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5%;
  background: rgba(0, 0, 0, 0.308);
  will-change: transform;
  transform: translateY(3px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.check-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5%;
  background: linear-gradient(
    to left,
    #fb0054de 0%,
    #f80053de 8%,
    #ff0156dc 92%,
    #f60253d5 100%
  );
}

.check-front {
  display: block;
  position: relative;
  padding: 5px;
  border-radius: 5%;
  color: white;
  background: rgba(255, 69, 69, 0.87);
  will-change: transform;
  transform: translateY(-2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.check-pushable:hover .check-front {
  transform: translateY(-4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.check-pushable:active .check-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

div.func_area {
  background-color: #193193;
  padding-bottom: 1rem;
  padding-top: 1rem;
  border-radius: 10px;
}

h1 {
  color: #193193;
}

input#output {
  background: #f2f3f785;
  border: 1px solid #193193;
  border-radius: 5px;
  color: #193193;
}

svg#Layer_1 {
  background: #f2f3f785;
  fill: #193193;
  height: 1.7rem;
}

.container {
  -webkit-box-shadow: 15px 12px 12px 0px rgba(0, 0, 0, 0.514);
  -moz-box-shadow: 15px 12px 12px 0px rgba(0, 0, 0, 0.514);
  box-shadow: 15px 12px 12px 0px rgba(0, 0, 0, 0.418);
}

h2 {
  color: white;
  font-weight: 500;
}

label {
  color: white;
}

div#display {
  color: #193193;
  border: 1px solid #dfe3f1;
  background: #f2f3f7;
  font-weight: 600;
}

div#remember {
  color: #193193;
  border: 1px solid #e5eafd;
  background: #f2f3f7;
}

svg#mbl,
#al,
#sl,
#hsl {
  background: none;
  height: 1.6rem;
  fill: #193193;
}

button.func_btn {
  border-radius: 5px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

button#bs.func_btn,
#s.func_btn,
#b.func_btn {
  gap: 0.5rem;
}

div.tooltip-left {
  width: 70px;
}

input#pl {
  border-radius: 20px;
  border: none;
  text-align: center;
  padding-left: 0.8rem;
}

span.tooltiptext {
  visibility: hidden;
  width: 85px;
  color: rgb(255, 255, 255);
  text-align: center;
  border-radius: 6px;
  padding: 4px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 145%;
  font-size: 12px;
}

.tooltiptext.mb1::after {
  border-color: transparent rgb(255, 72, 72) transparent transparent;
}

.tooltiptext.s1::after {
  border-color: transparent rgb(0, 194, 32) transparent transparent;
}

span.tooltiptext.mb1 {
  background-color: rgba(253, 69, 69, 0.774);
  border: 1px solid #ff1919c7;
}

span.tooltiptext.s1 {
  background-color: rgba(0, 194, 32, 0.795);
  border: 1px solid #00b646;
}

.tooltip-left .tooltiptext-left {
  visibility: hidden;
  width: 85px;
  color: rgb(0, 0, 0);
  text-align: center;
  border-radius: 6px;
  padding: 4px;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 170%;
  font-size: 12px;
  color: white;
}

span.tooltiptext-left.hs1 {
  background-color: rgba(0, 0, 0, 0.877);
}
span.tooltiptext-left.a1 {
  background-color: rgba(255, 115, 0, 0.89);
}

span.tooltiptext-left.a1::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(247, 111, 0, 0.877);
}

button#b:hover svg {
  fill: rgb(252, 0, 0);
  animation-name: r360;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
}
button#b:nth-child(2):hover {
  color: rgb(255, 0, 0);
  font-weight: bold;
}

button#s:hover svg {
  fill: rgb(22, 189, 0);
  animation-name: r360;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
}
button#s:nth-child(2):hover {
  color: rgb(20, 168, 0);
  font-weight: bold;
}

button#hs:hover svg {
  fill: rgb(0, 0, 0);
  animation-name: r360;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
}
button#hs:nth-child(1):hover {
  color: rgb(0, 0, 0);
  font-weight: bold;
}

button#bs:hover svg {
  fill: rgb(252, 92, 0);
  animation-name: r360;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
}
button#bs:nth-child(1):hover {
  color: rgb(255, 102, 0);
  font-weight: bold;
}

@keyframes r360 {
  100% {
    transform: rotate(360deg);
  }
}

button#b:disabled {
  background-color: rgba(255, 65, 65, 0.822);
  color: white;
  fill: none;
}

button#b:disabled svg,
button#bs:disabled svg,
button#hs:disabled svg,
button#s:disabled svg {
  fill: white;
  animation-name: r360;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

button#b:disabled:hover,
button#bs:disabled:hover,
button#hs:disabled:hover,
button#s:disabled:hover {
  color: white;
  font-weight: 500;
}

button#bs:disabled {
  background-color: rgba(255, 116, 24, 0.863);
  color: white;
  fill: none;
}
button#s:disabled {
  background-color: rgba(0, 199, 27, 0.863);
  color: white;
  fill: none;
}
button#hs:disabled {
  background-color: rgba(0, 0, 0, 0.658);
  color: white;
  fill: none;
}

nav {
  padding: 1rem;
  background-color: #1d2431;
}

button#dm {
  padding: 10px;
  border-radius: 10px;
}

body.dark {
  background-color: #070d25;
}
.container.dark {
  background-color: #e7e7e7;
}

input.dark {
  background-color: white !important;
}
#display.dark {
  background-color: white;
}
#remember.dark {
  background-color: #193193;
  color: white;
}