@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --primary-bg-color: #17171c;
  --secondary-bg-color: #2e2f38;
  --black-bg-color: #000000;
  --gray-bg-color: #4e505f;
  --blue-bg-color: #4b5efc;

  --primary-font-color: #ffffff;
  --secondary-font-color: #747474;
}

body.light-mode {
  --primary-bg-color: #f1f2f3;
  --secondary-bg-color: #ffffff;
  --black-bg-color: #000000;
  --gray-bg-color: #d2d3da;
  --blue-bg-color: #4b5efc;

  --primary-font-color: #000000;
  --secondary-font-color: #919192;
}

html {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
  background-color: var(--black-bg-color);
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calculator {
  width: 100vw;
  height: 100dvh;
  background-color: var(--primary-bg-color);
}

.feature-panel {
  width: 100%;
  height: 10%;
  background-color: var(--primary-bg-color);
}

.display-panel {
  width: 100%;
  height: 30%;
  background-color: var(--primary-bg-color);
}

.button-panel {
  width: 100%;
  height: 60%;
  background-color: var(--primary-bg-color);
}


/* feature panel */
.feature-panel {
  display: flex;
  justify-content: center;
  justify-content: space-around;
  align-items: center;
}

.uwu-button {
  width: 2rem;
  height: 2rem;
  background-image: url('./public/images/uwu.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.theme-switch-button {
  width: 4rem;
  height: 2rem;
  background-color: var(--secondary-bg-color);
  border-radius: 20px;
  cursor: pointer;  
  display: flex;
  justify-content: left;
}

.theme-switch-button>.circle-button {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  background-color: var(--gray-bg-color);
  background-image: url('./public/images/darkmode.png');
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
}

.theme-switch-button-light-mode{
  justify-content: right;
}

.full-screen-button {
  width: 2rem;
  height: 2rem;
  background-image: url('./public/images/fullscreen.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* display panel */
.display-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
}


.result-panel {
  width: 100%;
  height: 50%;
  font-size: 1.8rem;
  color: var(--secondary-font-color);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: end;
  padding: 0.5rem;
}

.input-panel {
  width: 100%;
  height: 50%;
  color: var(--primary-font-color);
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: end;
  padding: 0.5rem;
}

input {
  all: unset;
  width: inherit;
  height: 100%;
  font-size: 2.5rem;
  text-align: end;
}


/* button panel */

.button-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.button-panel>.row-1,
.row-2,
.row-3,
.row-4,
.row-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  height: 15%;
  width: 90%;
  gap: 1.5rem;
}

button {
  all: unset;
  background-color: var(--secondary-bg-color);
  color: var(--primary-font-color);
  font-size: 2rem;
  width: 5rem;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.1s ease;
}

button:active {
  border-radius: 35%;
}

.back-space-button {
  background-image: url('public/images/backspace.png');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 1/1;
}

.back-space-button:active {
  background-color: #dac9c9;
}

.equal-button:active {
  transition: 0.5 ease;
  font-size: 2.5rem;
  rotate: 180deg;
}

.full-screen-button:active {
  transition: 0.5 ease;
  rotate: 90deg;
}

.uwu-button:active {
  transition: 0.5 ease;
  rotate: 180deg;
}

.theme-switch-button > .circle-button:active {
  transition: 0.5 ease;
  rotate: 90deg;
}

.clear-button,
.parenthesis-button,
.percent-button {
  background-color: var(--gray-bg-color);
}

.divide-button,
.multiply-button,
.minus-button,
.addition-button,
.equal-button {
  background-color: var(--blue-bg-color);
}

@media screen and (min-width: 425px) {
  .calculator {
    width: 30vw;
    min-width: 400px;
    height: 100dvh;
  }

  button {
    width: 4rem;
  }
}

@media screen and (min-width: 1024px) {
  .calculator {
    width: 30vw;
    min-width: 400px;
  }

  button {
    width: 5rem;
  }
}

@media screen and (min-width: 2000px) {
  .calculator {
    width: 20vw;
    min-width: 700px;
  }

  button {
    width: 9rem;
  }
}

@media (hover: hover) {
  button:hover {
    border-radius: 35%;
  }

  .back-space-button:hover {
    background-color: #dac9c9;
  }

  .equal-button:hover {
    font-size: 2.5rem;
  }
}