/* css reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font-family: "League Spartan", sans-serif;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: #3a4663;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
}

/* style */
.container {
  width: 327px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.calcHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calcHeader h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 29.44px;
  letter-spacing: -0.5333333611488342px;
  text-align: center;
  color: #ffffff;
}

.screen {
  background-color: #181f33;
  min-width: 327px;
  min-height: 95px;
  border-radius: 12px;
  padding: 29px 24px;
}

.screen h1 {
  text-align: right;
  font-size: 40px;
  font-weight: 700;
  line-height: 36.8px;
  letter-spacing: -0.6666666865348816px;
  text-align: right;
  color: #ffffff;
}

.process-mathematically {
  background-color: #242d44;
  padding: 24px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.process {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.btn {
  background-color: #eae3dc;
  width: 60px;
  padding: 13px;
  font-size: 32px;
  font-weight: 700;
  line-height: 29.44px;
  letter-spacing: -0.5333333611488342px;
  text-align: center;
  color: #434a59;
  border: none;
  border-radius: 8px;
  box-shadow: 0px -4px 0px 0px #b3a497 inset;
  transition: 0.3s ease;
}

.btn:hover {
  background-color: #fffffe;
  box-shadow: 0px -4px 0px 0px #b3a497 inset;
}

.btn-del {
  background-color: #647198;
  color: #ffffff;
  box-shadow: 0px -4px 0px 0px #414e73 inset;
  font-size: 20px;
  font-weight: 700;
  line-height: 18.4px;
  letter-spacing: -0.3333333432674408px;
  text-align: center;
  transition: 0.3s ease;
}

.btn-del:hover {
  background-color: #a2b2e1;
  box-shadow: 0px -4px 0px 0px #414e73 inset;
}

.process-end {
  display: flex;
  gap: 13px;
}

.sifirlama {
  font-size: 20px;
  font-weight: 700;
  line-height: 18.4px;
  letter-spacing: -0.3333333432674408px;
  text-align: center;
  background-color: #647198;
  box-shadow: 0px -4px 0px 0px #414e73 inset;
  padding: 12px 22px;
  width: 133px;
  height: 64px;
  border: none;
  border-radius: 6px;
  transition: 0.3s ease;
}

.sifirlama:hover {
  background: #a2b2e1;
  box-shadow: 0px -4px 0px 0px #414e73 inset;
}

.sifirlama a {
  color: #ffffff;
}

.esittirbutton {
  font-size: 20px;
  font-weight: 700;
  line-height: 18.4px;
  letter-spacing: -0.3333333432674408px;
  text-align: center;
  background-color: #d03f2f;
  box-shadow: 0px -4px 0px 0px #93261a inset;
  padding: 12px 22px;
  width: 133px;
  height: 64px;
  border: none;
  border-radius: 6px;
  transition: 0.3s ease;
}

.esittirbutton:hover {
  background: #f96b5b;
  box-shadow: 0px -4px 0px 0px #93261a inset;
}

.esittirbutton a {
  color: #ffffff;
}

@media (width >= 1110px) {
  .container {
    width: 540px;
  }

  .screen {
    min-width: 540px;
    min-height: 132px;
    padding: 40px 32px;
  }

  .screen h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 51.52px;
    letter-spacing: -0.9333333373069763px;
    text-align: right;
  }

  .process-mathematically {
    padding: 32px;
    gap: 24px;
  }

  .process {
    gap: 24px;
  }

  .btn {
    width: 101px;
    height: 64px;
    padding: 13px;
    font-size: 40px;
    font-weight: 700;
    line-height: 36.8px;
    letter-spacing: -0.6666666865348816px;
    text-align: center;
  }

  .btn-del {
    font-size: 28px;
    font-weight: 700;
    line-height: 25.76px;
    letter-spacing: -0.46666666865348816px;
    text-align: center;
  }

  .process-end {
    gap: 24px;
  }

  .sifirlama {
    font-size: 28px;
    font-weight: 700;
    line-height: 25.76px;
    letter-spacing: -0.46666666865348816px;
    text-align: center;
    width: 227px;
    height: 64px;
  }

  .sifirlama a {
    color: #ffffff;
  }

  .esittirbutton {
    font-size: 28px;
    font-weight: 700;
    line-height: 25.76px;
    letter-spacing: -0.46666666865348816px;
    text-align: center;
    width: 227px;
    height: 64px;
  }

  .esittirbutton a {
    color: #ffffff;
  }
}