/* Custom Properties and Utility Classes  */
:root {
  /* By Default Theme 2 will be applied  */
  --bg: hsl(0, 0%, 90%);
  --toggle-bg: hsl(0, 5%, 81%);
  --secondary-bg: hsl(0, 0%, 93%);
  --hover-bg: hsl(0, 0%, 93%);

  /* Keys */
  --key-bg: hsl(185, 42%, 37%);
  --key-shadow: hsl(185, 58%, 25%);
  --toggle-btn-bg: hsl(25, 98%, 40%);
  --key-shadow-500: hsl(25, 99%, 27%);
  --key-bg-400: hsl(45, 7%, 89%);
  --key-shadow-400: hsl(35, 11%, 61%);

  /* Text  */
  --text-100: hsl(0, 0%, 100%);
  --text-200: hsl(0, 0%, 100%);
  --text-400: hsl(60, 10%, 39%);
  --text-500: hsl(60, 10%, 19%);
  --text-600: hsl(60, 10%, 19%);

  --ff-primary: 'League Spartan', sans-serif;

  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  --fs-200: 0.7rem;
  --fs-300: 1rem;
  --fs-400: 1.25rem;
  --fs-500: 1.5rem;
  --fs-600: 1.75rem;
  --fs-700: 2rem;
  --fs-800: 2.5rem;
  --fs-900: 3rem;

  --ff-transition: all 1s ease;
}

.theme-2 {
  /* This is Theme the | */
  --bg: hsl(222, 26%, 31%);
  --toggle-bg: hsl(223, 31%, 20%);
  --secondary-bg: hsl(224, 36%, 15%);

  /* Keys */
  --key-bg: hsl(225, 21%, 49%);
  --key-shadow: hsl(224, 28%, 35%);
  --toggle-btn-bg: hsl(6, 63%, 50%);
  --key-shadow-500: hsl(6, 70%, 34%);
  --key-bg-400: hsl(30, 25%, 89%);
  --key-shadow-400: hsl(28, 16%, 65%);

  /* Text  */
  --text-100: hsl(221, 14%, 31%);
  --text-200: hsl(30, 25%, 89%);
  --text-400: rgb(255, 255, 255, 0.85);
  --text-500: white;
  --text-600: hsl(221, 14%, 31%);
}

.theme-3 {
  /* This is Theme the ||| */
  --bg: hsl(268, 75%, 9%);
  --toggle-bg: hsl(268, 71%, 12%);
  --secondary-bg: hsl(268, 71%, 12%);

  /* Keys */
  --key-bg: hsl(281, 89%, 26%);
  --key-shadow: hsl(285, 91%, 52%);
  --toggle-btn-bg: hsl(176, 100%, 44%);
  --key-shadow-500: hsl(177, 92%, 70%);
  --key-bg-400: hsl(268, 47%, 21%);
  --key-shadow-400: hsl(290, 70%, 36%);

  /* Text  */
  --text-100: hsl(0, 0, 100%);
  --text-200: hsl(52, 100%, 62%);
  --text-400: hsl(52, 100%, 82%);
  --text-500: hsl(52, 100%, 62%);
  --text-600: hsl(52, 100%, 62%);
  --text-700: hsl(198, 20%, 13%);
}

/* CSS Reset  */
/* Box sizing rules */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* General Styling  */
body {
  display: grid;
  max-width: 1440px;
  margin-inline: auto;
  min-height: 100vh;
  place-content: center;
  background: var(--bg);
  font-family: var(--ff-primary);
  transition: var(--ff-transition);
}

.main-container {
  max-width: 1440px;
  margin: 1rem;
  padding: 1rem;
  font-weight: var(--fw-700);
  /* width: 300px; */
  /* width: 300px; */
  /* max-width: 80rem; */
  /* outline: 2px solid red; */
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-500);
  transition: var(--ff-transition);

}

.theming {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
}

.theming>h3 {
  font-weight: var(--fw-700);
  text-transform: uppercase;
  font-size: var(--fs-200);
}

/* Toggle Button & Background  */
.toggle-bg {
  position: relative;
  border: 2px solid transparent;
  border-radius: 1rem;
  width: 3.5rem;
  height: 1.2rem;
  background: var(--toggle-bg);
}

.toggle-bg>span {
  position: absolute;
  top: -18px;
  left: 15%;
  font-size: .6rem;
  font-weight: var(--fw-700);
  letter-spacing: 11px;
}

.toggle-btn {
  position: absolute;
  left: 3px;
  top: 1px;
  border-radius: 50%;
  width: 0.8rem;
  height: 0.8rem;
  cursor: pointer;
  transition: var(--ff-transition);
  background: var(--toggle-btn-bg);
  animation: SlideIn 2s ease both 0.3s;
}

.toggle-center {
  left: 38%;
}

.toggle-right {
  left: 69%;
}

/* Main-Calculator  */
.calculator-grid {
  display: grid;
  grid-template-rows: minmax(120px, auto);
}

.output {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  grid-column: 1/-1;
  width: 256px;
  margin-block: 1rem;
  padding: .3rem;
  word-wrap: break-word;
  word-break: break-all;
  border-radius: 0.4rem;
  transition: var(--ff-transition);
  background: var(--secondary-bg);
}

@media (min-width: 40em) {
  .output {
    width: 336px;
  }
}

.previous-operand {
  color: var(--text-400);
  font-size: var(--fs-500);
}

.current-operand {
  color: var(--text-500);
  font-size: var(--fs-600);
}

.btn-grid {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.7rem;
  place-content: center;
  background: var(--toggle-bg);
  transition: var(--ff-transition);
  animation: TopBtn 2s ease both 0.2s;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(5, 50px);
}

@media (min-width: 40em) {
  :root {
    --fs-300: 1.5rem;
  }

  .btn-grid {
    grid-template-columns: repeat(4, 70px);
    grid-template-rows: repeat(5, 70px);
  }
}

.btn-grid>button {
  position: relative;
  overflow: hidden;
  font-size: var(--fs-300);
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 0.5rem;
  color: var(--text-600);
  background: var(--key-bg-400);
  transition: var(--ff-transition);
  animation: TopIn 2s ease both 0.25s;
  border-bottom: 4px solid var(--key-shadow-400);
}

.btn-grid>button>span {
  position: absolute;
  background: var(--key-shadow);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  animation: ripples 1s linear infinite;
}

@keyframes ripples {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.5;
  }

  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}

@media (min-width: 30em) {
  .btn-grid>button:hover {
    transform: translateY(-2px);
  }
}

.span-2 {
  grid-column: span 2;
}

/* Background Utility Classes  */
.key-bg-two {
  background: var(--toggle-btn-bg) !important;
  border-color: var(--key-shadow-500) !important;
  color: var(--key-bg-400) !important;
  transition: var(--ff-transition);
}

.key-bg {
  background: var(--key-bg) !important;
  border-color: var(--key-shadow) !important;
  color: var(--text-200) !important;
  transition: var(--ff-transition);
}

/* Animations and Animation Utility Classes  */

.OpacityIn {
  animation: Opacity 2s ease both .5s;
}

.TopIn {
  animation: TopIn 2s ease both .5s;
}

.TopIn-1 {
  animation: TopIn 2s ease both 0.25s;
}

.SlideInOut {
  animation: SlideInOut 3s ease both 0.2s;
}

.TopDown {
  animation: TopDown 2s ease both .45s;
}

.Index {
  animation: Index 2s ease both;
}

@keyframes TopBtn {
  0% {
    translate: (0px, 30px);
    opacity: 0;
  }

  50% {
    translate: (0px, -30px);
  }

  100% {
    translate: (0px, 0px);
    opacity: 1;
  }
}

@keyframes TopIn {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes SlideIn {
  0% {
    transform: translateX(80px);
    opacity: 0;
  }

  50% {
    transform: translateX(-8px);
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes SlideInOut {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes TopDown {
  0% {
    transform: translateY(-150px);
    z-index: -1;
    opacity: 0;
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes Opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes Index {
  from {
    z-index: -1;
  }

  to {
    z-index: 1;
  }
}


/* Attributions  */
.attribution {
  font-size: 12px;
  margin-bottom: 0.3rem;
  text-align: center;
  color: var(--text-500);
  transition: var(--ff-transition);
}

.attribution a {
  text-decoration: none;
  color: var(--text-500);
  transition: var(--ff-transition);
}

.attribution a:hover {
  color: var(--key-shadow);
}