*,
html {
  box-sizing: border-box;
}
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
button {
  background: #fef9d9;
  height: 70px;
  width: 250px;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: -1px;
  padding: 0;
  margin: 0;
  color: #8eaccd;
  border-radius: 15px;
}
.savings {
  position: relative;
  width: 250px;
  height: 350px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)),
    url("./futuristic_mouse.png") center / contain no-repeat;
  background-size: 100% 100%;
  /* color: white; */
  color: #dee5d4;
  text-align: center;
  line-height: 300px;
  border-radius: 15px;
  margin-bottom: 10px;
  /* https://www.geeksforgeeks.org/how-to-place-text-on-image-using-html-and-css/# */
}
.savings-text {
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
}
.savings-offer {
  font-size: 25px;
  font-weight: 900;
  padding: 10px;
  color: #8eaccd;
  margin-bottom: 10px;
}
/* phone */
.container {
  background-color: rgb(248, 244, 244);
  height: 42rem;
  width: 20rem;
  border-radius: 35px;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  /* groove and box shadow for roundish outer edge */
  box-shadow: 1px 1px 5px #555;
  /* this tilts phone  */
  /* transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(8deg) rotateY(355deg)
    rotateZ(-13deg) translateX(-5px) translateY(-4px) translateZ(-17px)
    skewX(0deg) skewY(0deg); */
  /* shadow around phone */
  filter: drop-shadow(40px 31px 15px #000000);
}
/* this will kick out the bottom of the phone a bit */
.wrapper {
  /* perspective: 1474px;
  perspective-origin: 54% 192%; */
}
/* phone screen */
.card {
  /* making the card flex box for stuff withing it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* groove and box shadow for  sunken effect around edge of phone screen */
  border-style: groove;
  box-shadow: 1px 1px 5px #555 inset;
  /* can add an image here  */
  background: #d2e0fb;
  height: 45rem;
  width: 18rem;
  border-radius: 25px;
  margin-bottom: 1em;
  position: relative;
}
.line {
  /* push to bottom of the card  */
  position: absolute;
  bottom: 0;
}
.circle-small {
  margin-bottom: 5px;
}