body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  background: url("green-background-image.jpg") no-repeat fixed center;
}

#calculator-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
}

#calculator-screen {
  overflow: hidden;
  background-color: #ffffffa6;
  border-radius: 0.5vw;
  height: 6.5vw;
  font-size: 2.6vw;
  font-weight: bold;
  max-width: 24.1vw !important;
}

#input-field {
  white-space: nowrap;
  color: black;
  text-shadow: -0.07vw 0 #3c4628, 0 0.07vw #3c4628, 0.05vw 0 #3c4628, 0 -0.05vw #3c4628;
  float: right;
  margin-right: 1vw;
  margin-top: 1.4vw;
}

#keyboard-wrapper div {
  background: linear-gradient(90deg, black, #b2c6ec, #b2c6ec, #b2c6ec, #b2c6ec, #b2c6ec, black);
  border: black;
  border-style: solid;
  border-radius: 0.5vw;
  border-width: 0.12vw;
  background-color: #ccd7cb;
  font-size: 1.5vw;
  padding-left: 1.4vw;
  padding-right: 1.5vw;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
}

.row-wrapper {
  border: none !important;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: -0.8vw;
}

.row-wrapper div {
  width: 0.5vw;
  margin-right: 0.2vw;
  color: white;
  font-weight: bold;
  text-shadow: -0.07vw 0 black, 0 0.07vw black, 0.07vw 0 black, 0 -0.07vw black;
  background: linear-gradient(60deg, #201c19, #41505e, #2a4e6d, #2a4e6d, #030101) !important;
}

#enter {
  width: 7.2vw;
  font-size: 2.35vw !important;  
  padding: 0 !important;
}

#delete {
  background: linear-gradient(60deg, #201c19, #3b0101, #550b0b, #550b0b, #3b0101, #030101) !important;
  
}

#delete:active {
  background: linear-gradient(60deg, #201c19, #2b0101, #400909, #400909, #2b0101, #030101) !important;
  
}

.center-button-content {
  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items: center;
}

.row-wrapper div:hover {
  cursor: pointer;
}

.row-wrapper div:active {
  color: #ccc;
  transform: scale(0.95);
  background: linear-gradient(47deg, #201c19, #35414c, #203c54, #203c54, #030101) !important;
}

@media screen and (max-width: 1200px) {
  #calculator-screen {
    border-radius: 2vw;
    height: 13vw;
    font-size: 5.2vw;
    max-width: 48.2vw !important;
  }
  #input-field {
    text-shadow: -0.14vw 0 #3c4628, 0 0.14vw #3c4628, 0.1vw 0 #3c4628, 0 -0.1vw #3c4628;
    margin-right: 2vw;
    margin-top: 2.8vw;
  }
  
  #keyboard-wrapper div {
    border-radius: 1vw;
    border-width: 0.24vw;
    font-size: 3vw;
    padding-left: 2.8vw;
    padding-right: 3vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
  }

  .row-wrapper {
    margin: -1.6vw;
  }

  .row-wrapper div {
    width: 1vw;
    margin-right: 0.4vw;
    text-shadow: -0.14vw 0 black, 0 0.14vw black, 0.14vw 0 black, 0 -0.14vw black;
  }

  #enter {
    width: 14.4vw;
    font-size: 4.7vw !important;  
  }

@media screen and (max-width: 500px) {
  #calculator-screen {
    border-radius: 3vw;
    height: 19.5vw;
    font-size: 7.8vw;
    max-width: 72vw !important;
  }
  #input-field {
    text-shadow: -0.21vw 0 #3c4628, 0 0.21vw #3c4628, 0.15vw 0 #3c4628, 0 -0.15vw #3c4628;
    margin-right: 3vw;
    margin-top: 4.2vw;
  }
  
  #keyboard-wrapper div {
    border-radius: 1.5vw;
    border-width: 0.36vw;
    font-size: 4.5vw;
    padding-left: 4.2vw;
    padding-right: 4.5vw;
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
  }

  .row-wrapper {
    margin: -2.4vw;
  }

  .row-wrapper div {
    width: 1.5vw;
    margin-right: 0.6vw;
    text-shadow: -0.21vw 0 black, 0 0.21vw black, 0.21vw 0 black, 0 -0.21vw black;
  }

  #enter {
    width: 21.6vw;
    font-size: 7.05vw !important;
  }