@font-face {
  font-family: "NotoSansMath";
  src: url("../fonts/NotoSansMath-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "SevenSegment";
  src: url("../fonts/SevenSegment.ttf") format("truetype");
}

@font-face {
  font-family: "Tourney";
  src: url("../fonts/Tourney-Regular.ttf") format("truetype");
}

:root {
  --device-width: 300px;
  --device-padding-x: 20px;
}

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

body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 300px;
  width: 100%;
  min-height: 100dvh;
  max-height: max-content;
  background-color: var(--body-bg);
  font-family: "Poppins";
  font-size: 1rem;
}

.galaxy-item {
  display: none;
}

.classic-item {
  display: block;
}

.background,
.planet {
  position: absolute;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5;
}

.content {
  transform: scale(1);
  transition: transform 0.5s;
  margin: 0 auto;
  z-index: 5;
}

.device {
  width: var(--device-width);
  border-radius: 20px;
  padding: 40px var(--device-padding-x);
  background-color: var(--device-bg);
  border: 1px solid var(--device-border);
  margin: 0 auto;
  margin-top: 20px;
}

.display {
  width: 100%;
  height: 55px;
  padding: 0 7px;

  font-family: var(--display-font);
  font-size: 1.6rem;
  letter-spacing: 2px;
  text-align: end;

  background-color: var(--display-off);
  color: var(--display-text);

  border-radius: 3px;

  border: 1px solid var(--display-border-off);

  outline: 1px solid var(--display-outline);
  outline-offset: 1px;
}

.display.on {
  background-color: var(--display-on);
  box-shadow: var(--BOX-SHADOW);
  border: 1px solid var(--display-border-on);

  transition: background-color 0.3s ease-out;
}

.keys-field {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 25px;
}

.keys {
  color: var(--keys-color);
  background-color: var(--keys-bg);
  text-align: center;
  padding: 10px 5px;
  border: 1px solid var(--keys-border);
  border-radius: 3px;
  box-shadow: 0px 1px 1px 0px var(--keys-shadow-off);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.2s ease-out;
}

.display.on ~ .keys-field .keys {
  box-shadow: 1px 1px 2px 0px var(--keys-shadow-on);
}

.keys.operator,
.keys#point {
  padding: 0;
  font-size: 1.1rem;
}

.keys,
h1.heading,
footer {
  user-select: none;
}

.keys:hover {
  background-color: var(--keys-hover);
}

.keys:active {
  background-color: var(--keys-active);
}

.keys#result {
  grid-column: span 2;
}

footer {
  height: clamp(60px, 7dvh, 90px);
  display: flex;
  flex-direction: column;
  font-size: clamp(1rem, 2dvh, 1.2rem);
  letter-spacing: 1px;
  z-index: 4;
}

@media (max-height: 600px) {
  .content {
    margin: 30px auto;
  }
}

@media (min-width: 450px) and (min-height: 620px) {
  .content {
    transform: scale(1.2);
  }
}

@media (min-width: 700px) and (min-height: 900px) {
  .content {
    transform: scale(1.6);
  }
}