@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&display=swap');

*,
*::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}
html {
  font-size: 16px;
}
:root {
  --clr-Very-dark-violet-main-background: #160628;
  --clr-Very-dark-violet-toggle-screen-background: #1d0934;
  --clr-Dark-violet-keybackground: hsl(281, 89%, 26%);
  --clr-Vivid-magenta-keyshadow: #bc15f4;
  --clr-Pure-cyan-keybackground: #00e0d1;
  --clr-Soft-cyan-keyshadow: #6cf9f2;
  --clr-Very-dark-violet-key-background: #341c4f;
  --clr-Dark-magenta-key-shadow: #871c9c;
  --clr-Light-yellow: #ffe53d;
  --clr-Very-dark-blue: #1b2428;

  --box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25),
    -2px -2px 2px rgba(0, 0, 0, 0.25);
}

body {
  font-family: 'League Spartan', sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}

/* colour changing classes */
.violet-bg {
  background-color: #160628;
}
.blue-bg {
  background-color: hsl(222, 26%, 31%);
}

.violet-error {
  color: #fdf407;
}
.blue-error {
  color: white;
}
.blue-h {
  color: #fff;
}

.violet-p {
  color: var(--clr-Light-yellow);
}
.violet-h {
  color: var(--clr-Light-yellow);
}
.violet-c {
  background-color: var(--clr-Very-dark-violet-key-background);
  color: var(--clr-Light-yellow);
}
.violet-d {
  background-color: var(--clr-Very-dark-violet-toggle-screen-background);
  color: var(--clr-Light-yellow);
}
.violet-re-btn {
  background-color: var(--clr-Very-dark-violet-toggle-screen-background);
  color: var(--clr-Light-yellow);
  border-bottom: 5px solid var(--clr-Dark-magenta-key-shadow);
}
.violet-del {
  color: white;
  background-color: #871c9c;
  border-bottom: 5px solid #bc15f4;
}
.violet-reset {
  color: white;
  background-color: hsl(281, 89%, 26%);
  border-bottom: 5px solid #bc15f4;
}
.violet-eq-btn {
  background-color: #10d5c2;
  color: #1d0934;
}

/* next theme colors */
.blue-p {
  color: white;
}

.blue-h {
  color: white;
}

.blue-d {
  color: white;
  background-color: hsl(224, 36%, 15%);
}

.blue-btn {
  color: hsl(221, 14%, 31%);
  border-bottom: 5px solid hsl(28, 16%, 65%);
  background-color: whitesmoke;
}

.blue-c {
  background-color: hsl(223, 31%, 20%);
}

.blue-delbtn {
  color: white;
  background-color: hsl(224, 28%, 35%);
  border-bottom: 5px solid hsl(225, 21%, 49%);
}

.blue-re-btn {
  color: aliceblue;
  background-color: hsl(224, 28%, 35%);
  border-bottom: 5px solid hsl(225, 21%, 49%);
}

.blue-eq-btn {
  background-color: hsl(6, 63%, 50%);
  color: white;
}

/* to remove up&down arrow in number input */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

/* global css */
img {
  width: 100%;
  height: auto;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
main {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  gap: 20px;
  /* background-color: #160628; */
  padding: 1rem 1rem;
  /* background-color: #6cf9f2; */
  /* color: aliceblue; */
  /* align-items: center; */
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* toggle section */
.switch input {
  opacity: 0;
}

.switch {
  display: inline-block;
  width: 45px;
  height: 20px;
  position: relative;
}

.toggle-slider {
  position: absolute;
  background-color: hsl(223, 50%, 87%);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 25px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  background-color: #fff;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  transition: all 0.4s ease-in-out;
}

input:checked + .toggle-slider {
  background-color: #10d5c2;
}

input:focus + .toggle-slider {
  box-shadow: 0 0 1px #10d5c2;
}

.switch input:checked + .toggle-slider:before {
  transform: translateX(25px);
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
}

/* display section */
.display-container {
  width: 100%;
  position: relative;
}
.display-container input {
  width: 100%;
  padding: 20px;
  font-size: 2rem;
  text-align: right;
}
.error-msg {
  position: absolute;
  top: 20px;
  left: 20px;
}
.error {
  font-size: 2rem;
  display: none;
}

.button-container {
  display: flex;
  padding: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-transform: uppercase;
}
.btns {
  width: 20%;
  height: 50px;
  font-size: 1.5rem;
}
input:nth-child(4) {
  font-size: 2rem;
  text-transform: uppercase;
}
input:nth-child(8) {
  font-size: 2rem;
  padding-top: 10px;
}
input:nth-child(12) {
  font-size: 2rem;
  padding-top: 10px;
}
input:nth-child(16) {
  font-size: 3rem;
  padding-top: 10px;
}

.eq-btn,
.re-btn {
  width: 45%;
}
@media screen and (min-width: 450px) {
  main {
    width: 400px;
  }
}