body {
  background: linear-gradient(135deg, #fff333, #ff3377);
}
#outer {
  position: absolute;
  width: 340px;
  height: 240px;
  background-color: silver;
  top: 110px;
  left: 7px;
  border-style: double;
  border-top-left-radius: 10px;

  border-top-right-radius: 10px;
  align-content: center;
  border-color: black;
  border-width: 5px;
  border-style: outset;
  text-shadow: 0.5px 0.5px black;
}

#acname {
  text-transform: uppercase;
  font-weight: bold;
  color: black;
  position: absolute;

  align-content: center;
  top: 40px;
  left: 146px;
  font-size: 12.5px;
  text-shadow: 1px -1px 1px black;
}

#de {
  position: absolute;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15px;
  top: 30px;
  left: 5px;
  border-color: white;
  border-radius: 3px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}

#b1 {
  height: 14px;
  position: absolute;
  width: 4.5px;
  background-color: white;
  border-color: black;
  border-width: 2px;
  top: 60px;
  left: 5px;
  align-content: center;
  border-style: solid;
}
#b2 {
  height: 14px;
  position: absolute;
  width: 4.5px;
  background-color: white;
  border-color: black;
  border-width: 2px;
  top: 120px;
  left: 5px;
  border-style: solid;
  align-content: center;
}
#b3 {
  height: 14px;
  position: absolute;
  width: 4.5px;
  background-color: white;
  border-color: black;
  border-width: 2px;
  top: 180px;
  left: 5px;
  border-style: solid;
  align-content: center;
}
#user23 {
  font-weight: bold;
  color: white;
  position: absolute;
  left: 78px;
  top: 50px;
  font-size: 13px;
  text-shadow: 0.5px -1px 1px black;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#b4 {
  height: 14px;
  position: absolute;
  width: 4.5px;
  background-color: white;
  border-color: black;
  border-width: 2px;
  top: 180px;
  right: 5px;
  border-style: solid;
  align-content: center;
}
#b5 {
  height: 14px;
  position: absolute;
  width: 4.5px;
  background-color: white;
  border-color: black;
  border-width: 2px;
  top: 120px;
  right: 5px;
  border-style: solid;
  align-content: center;
}
#b6 {
  height: 14px;
  position: absolute;
  width: 4.5px;
  background-color: white;
  border-color: black;
  border-width: 2px;
  top: 60px;
  right: 5px;
  border-style: solid;
  align-content: center;
}
#camera {
  width: 15px;
  position: absolute;
  height: 15px;
  background-color: lightgrey;
  border-radius: 50%;
  left: 150px;
  top: 8px;
  border-style: double;
  align-content: center;
}

.screen {
  width: 260px;
  height: 160px;
  position: absolute;
  background-color: lightblue;
  left: 25px;
  top: 30px;
  bottom: 30px;
  right: 30px;
  border-width: 15px;
  border-top-style: inset;
  border-top-color: black;
  border-bottom-style: outset;
  border-bottom-color: black;
  border-left-style: inset;
  border-left-color: black;
  border-right-style: outset;
  border-right-color: black;
  align-content: center;
}
.well1 {
  font-weight: bold;
  color: Black;
  position: absolute;
  font-family: "Montserrat", serif;
  left: 15px;
  text-transform: uppercase;
  top: 8px;
  text-shadow: 0.5px -1px 1px black;
  align-content: center;
}

.well2 {
  font-weight: bold;
  color: white;
  position: absolute;
  font-family: "Montserrat", serif;
  left: 29px;
  top: 30px;
  align-content: center;
  text-shadow: 0.5px 0.5px white;
}
.pass,
.pass2 {
  height: 10px;
  position: absolute;
  align-content: center;
  width: 80px;
  top: 80px;
  left: 80px;
  border-radius: 5px;
  text-shadow: 0.5px 0.5px black;
  border-style: solid;
  border-color: black;
}
#btne1,
#btne2 {
  height: 20px;
  position: absolute;
  width: 40px;
  top: 110px;
  left: 100px;
  font-size: 8px;
  text-align: center;
  font-weight: bold;
  text-shadow: 0.5px 0.5px black;
  maxlength: 8;
  align-content: center;
}
#com1 {
  text-transform: uppercase;
  font-weight: bold;
  color: black;
  position: absolute;

  top: 216px;
  left: 149px;
  font-size: 10px;
  text-shadow: 1px -1px 1px black;
  align-content: center;
}
#botto {
  position: absolute;
  width: 340px;
  left: 7px;
  background-color: darkgrey;
  height: 170px;
  top: 410px;
  border-style: inset;
  border-width: 5px;

  align-content: center;
  border-color: black;
}
#cash {
  position: absolute;
  width: 130px;
  height: 15px;
  background-color: grey;
  top: 25px;
  left: 101px;
  border-color: black;
  border-width: 5px;
  border-style: outset;
  align-content: center;
}
#wdr {
  position: absolute;
  width: 60px;
  height: 17px;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  left: 10px;
  top: 15px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#dep {
  position: absolute;
  width: 60px;
  height: 17px;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  left: 10px;
  top: 75px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#mst {
  position: absolute;
  width: 60px;
  height: 24px;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  left: 10px;
  top: 130px;
  align-content: center;
  text-shadow: 0.5px 0.5px black;
}
#det {
  position: absolute;
  width: 60px;
  height: 17px;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  right: 10px;
  top: 15px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#otr {
  position: absolute;
  width: 60px;
  height: 17px;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  right: 10px;
  top: 75px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#cpin {
  position: absolute;
  width: 60px;
  height: 24px;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  right: 10px;
  top: 130px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#back,
#back2,
#back3 {
  bottom: 5px;
  position: absolute;
  left: 100px;
  height: 20px;
  width: 40px;
  text-align: center;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#back4,
#back9 {
  bottom: 5px;
  position: absolute;
  left: 100px;
  height: 20px;
  width: 40px;
  text-align: center;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#back6,
#back7,
#back5 {
  bottom: 5px;
  position: absolute;
  left: 100px;
  height: 20px;
  width: 40px;
  text-align: center;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}

#witdrw,
#depst {
  position: absolute;
  top: 42px;
  font-size: 14px;
  left: 30px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#witdrwno,
#depstno {
  position: absolute;
  top: 3px;
  width: 65px;
  height: 8px;
  left: 119px;
  align-content: center;
  text-shadow: 0.5px 0.5px black;
}
#dep10 {
  position: absolute;
  top: 40px;
  font-weight: bold;
  font-size: 15px;
  text-shadow: 0.5px 0.5px black;
  left: 5px;
  align-content: center;
}

#wdt7 {
  position: absolute;
  top: 10px;
  font-weight: bold;
  font-size: 15px;
  left: 150px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#wdt5 {
  position: absolute;
  top: 70px;
  font-weight: bold;
  font-size: 15px;
  left: 150px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#wdt3 {
  position: absolute;
  top: 40px;
  font-weight: bold;
  font-size: 15px;
  left: 150px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#wdt4,
#dep12 {
  align-content: center;
  position: absolute;
  top: 70px;
  font-weight: bold;
  font-size: 15px;
  text-shadow: 0.5px 0.5px black;
  left: 13px;
}

#dep8 {
  position: absolute;
  top: 10px;
  font-weight: bold;
  font-size: 15px;
  text-shadow: 0.5px 0.5px black;
  left: 42px;
  align-content: center;
}

#btns2,
#bt3 {
  position: absolute;
  top: 30px;
  width: 50px;
  height: 22px;
  font-size: 10px;
  text-align: center;
  font-weight: bold;
  background-color: lightgrey;
  left: 65px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#back5,
#back8 {
  align-content: center;
  position: absolute;
  left: 70px;
  height: 20px;
  width: 40px;
  top: 85px;
  text-align: center;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  text-shadow: 0.5px 0.5px black;
}

#backs {
  align-content: center;
  bottom: 40px;
  position: absolute;
  left: 105px;
  height: 20px;
  width: 40px;
  text-align: center;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  text-shadow: 0.5px 0.5px black;
}
#pinwrg1 {
  position: absolute;
  font-weight: bold;
  left: 80px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#pinwrg6 {
  position: absolute;
  font-weight: bold;
  left: 40px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#pinwrg2 {
  position: absolute;
  font-weight: bold;
  left: 65px;
  top: 30px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#bac3,
#bac4 {
  align-content: center;
  bottom: 5px;
  position: absolute;
  left: 100px;
  height: 20px;
  width: 40px;
  text-align: center;
  background-color: lightgrey;
  font-weight: bold;
  font-size: 8px;
  text-shadow: 0.5px 0.5px black;
}

#card {
  align-content: center;
  position: absolute;
  width: 340px;
  height: 40px;
  background-color: darkgrey;
  top: 360px;
  left: 7px;
  border-color: black;
  border-width: 5px;
  border-style: outset;
}
#card2 {
  align-content: center;
  position: absolute;
  width: 70px;
  height: 7px;
  background-color: grey;
  top: 4px;
  left: 5px;
  border-color: black;
  border-width: 5px;
  border-style: outset;
  overflow: hidden;
}

.one {
  align-content: center;
  height: 10px;
  position: absolute;
  width: 280px;
  background-color: white;
  top: 78px;
  left: 6px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-style: solid;
  border-bottom-color: black;
  border-bottom-width: 3px;
}

.one {
  align-content: center;
  transform: rotateX(40deg);
  animation: one 2s infinite;
  animation-direction: alternate;
}
@keyframes one {
  0% {
    transform: rotateX(30deg);
  }
  50% {
    transform: rotateX(50deg);
  }

  100% {
    transform: rotateX(70deg);
  }
}

#lens {
  width: 8px;
  position: absolute;
  height: 8px;
  background-color: black;
  border-radius: 50%;
  left: 3.5px;
  top: 3.5px;
  animation: two 6s infinite;
  transform: rotateY (40deg);
  align-content: center;
  animation-direction: alternate;
}
@keyframes two {
  0% {
    transform: rotateY (30deg);
  }
  20% {
    transform: rotateX(30deg);
  }

  40% {
    transform: rotateY(50deg);
  }
  50% {
    transform: rotateX(50deg);
  }

  75% {
    transform: rotateX(70deg);
  }
  100% {
    transform: rotateY (30deg);
  }
}

#indictr {
  height: 25px;
  width: 90px;
  background-color: green;
  left: 120px;
  position: absolute;
  top: 6px;
  border-style: solid;
  border-width: 2.5px;
  animation: clr 0.5s infinite;
  align-content: center;
}
@keyframes clr {
  0% {
    background-color: #7cfc00;
  }

  100% {
    background-color: grey;
  }
}

#inf {
  position: absolute;
  left: 49px;
  text-shadow: 0.5px 0.5px black;
  font-weight: bold;
  color: white;
  align-content: center;
}
#l4 {
  position: absolute;
  left: 70px;
  bottom: 9px;
  text-shadow: 0.5px 0.5px black;
  font-weight: bold;
  color: white;
  align-content: center;
}

#round1 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: blue;
  animation: ball 0.7s infinite;

  position: absolute;

  left: 3.1cm;
  margin-top: 75px;
  align-content: center;
}
#round3 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: red;
  animation: ball 0.6s infinite;

  position: absolute;

  left: 2.7cm;
  margin-top: 75px;
  align-content: center;
}

#round2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: green;
  animation: ball 0.9s infinite;

  position: absolute;

  left: 3.9cm;
  margin-top: 75px;
  align-content: center;
}
#round4 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: yellow;
  animation: ball 0.8s infinite;

  position: absolute;

  left: 3.5cm;
  margin-top: 75px;
  align-content: center;
}
@keyframes ball {
  0% {
    top: 0;
  }
  10% {
    top: 0.1cm;
  }
  20% {
    top: 0.16cm;
  }
  30% {
    top: 0.22cm;
  }
  40% {
    top: 0.28cm;
  }
  50% {
    top: 0.34cm;
  }
  60% {
    top: 0.28cm;
  }
  70% {
    top: 0.22cm;
  }
  80% {
    top: 0.16cm;
  }
  90% {
    top: 0.1cm;
  }
  100% {
    top: 0;
  }
}
#loading {
  width: 260px;
  height: 160px;
  position: absolute;
  background-color: black;
  left: 0.01px;
  top: 0.01px;
  bottom: 0.01px;
  right: 0.01px;
  overflow: hidden;
  align-content: center;
}
#help1 {
  top: 60px;
  position: absolute;
  left: 159px;
  border-radius: 50%;
  font-size: 8px;
  font-weight: bold;
  background-color: grey;
  text-shadow: 0.5px 0.5px black;
  border-style: solid;
  border-width: 3px;
  border-color: black;
  align-content: center;
}

#err1 {
  position: absolute;
  font-weight: bold;
  font-size: 15px;
  top: 20px;
  left: 79px;
  border-color: white;
  border-radius: 3px;
  text-shadow: 0.5px 0.5px black;
  overflow: hidden;
  align-content: center;
}
#erp2,
#err4 {
  position: absolute;
  font-weight: bold;
  font-size: 15px;
  top: 50px;
  left: 5px;
  border-color: white;
  border-radius: 3px;
  text-shadow: 0.5px 0.5px black;
  overflow: hidden;
  align-content: center;
}
#err5 {
  position: absolute;
  font-weight: bold;
  font-size: 15px;
  top: 20px;
  left: 20px;
  border-color: white;
  border-radius: 3px;
  text-shadow: 0.5px 0.5px black;
  overflow: hidden;
  align-content: center;
}
#err6 {
  position: absolute;
  font-weight: bold;
  font-size: 15px;
  top: 70px;
  left: 20px;
  border-color: white;
  border-radius: 3px;
  text-shadow: 0.5px 0.5px black;
  overflow: hidden;
  align-content: center;
}
#final1 {
  font-family: "Montserrat";
  position: absolute;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
  top: 5px;
  left: 60px;
  text-shadow: 1px -1px 1px black;
  color: gold;
  align-content: center;
}
#final3 {
  font-family: "Montserrat";
  position: absolute;
  font-weight: bold;
  font-size: 25px;
  top: 45px;
  left: 20px;
  color: gold;
  align-content: center;
}
#final2 {
  position: absolute;
  font-weight: bold;
  font-size: 25px;
  font-family: "Montserrat", serif;
  top: 80px;
  left: 60px;
  text-shadow: 0.5px 0.5px black;
  color: pink;
  align-content: center;
}
#final {
  width: 260px;
  height: 160px;
  position: absolute;
  background-color: black;
  left: 0.01px;
  top: 0.01px;
  bottom: 0.01px;
  right: 0.01px;
  overflow: hidden;
  align-content: center;
}

#wdt6 {
  position: absolute;
  top: 10px;
  font-weight: bold;
  font-size: 15px;
  text-shadow: 0.5px 0.5px black;
  left: 53px;
  align-content: center;
}
#wdt2 {
  position: absolute;
  top: 40px;
  font-weight: bold;
  font-size: 15px;
  text-shadow: 0.5px 0.5px black;
  left: 12px;
  align-content: center;
}
#dep9 {
  position: absolute;
  top: 10px;
  font-weight: bold;
  font-size: 15px;
  left: 135px;
  text-shadow: 0.5px 0.5px black;
  align-content: center;
}
#dep13 {
  align-content: center;
  position: absolute;
  top: 70px;
  font-weight: bold;
  font-size: 15px;
  left: 135px;
  text-shadow: 0.5px 0.5px black;
}
#dep11 {
  align-content: center;
  position: absolute;
  top: 40px;
  font-weight: bold;
  font-size: 15px;
  left: 135px;
  text-shadow: 0.5px 0.5px black;
}
#err8 {
  align-content: center;
  position: absolute;
  font-weight: bold;
  font-size: 15px;
  top: 20px;
  left: 40px;
  border-color: white;
  border-radius: 3px;
  text-shadow: 0.5px 0.5px black;
  overflow: hidden;
  text-transform: uppercase;
}
#atmmac {
  align-content: center;
  margin: auto;
  height: auto;
  width: fit-content;
  background-color: #fff;
  padding: 10px;
}
.well8 {
  align-content: center;
  font-weight: bold;
  color: Black;
  position: absolute;
  font-family: "Montserrat", serif;
  left: 25px;
  text-transform: uppercase;
  top: 4px;
  text-shadow: 0.5px -1px 1px black;
}
.box1,
.pass {
  align-content: center;
  border-style: solid;
  border-color: black;
}
#cash1 {
  position: absolute;
  height: 20px;
  width: 120px;
  background-color: #fafad2;
  border-color: black;
  border-style: solid;
  border-width: 3px;
  left: 2.23px;
  align-content: center;
}
#bill {
  width: 260px;
  height: 160px;
  position: absolute;
  background-color: black;
  position: absolute;
  font-weight: bold;
  font-size: 15px;

  align-content: center;

  text-shadow: 0.5px 0.5px black;
  overflow: hidden;
}
#succ {
  position: absolute;
  font-weight: bold;
  font-size: 25px;
  left: 65px;
  color: white;
  align-content: center;
  text-shadow: 0.5px 0.5px white;
  overflow: hidden;
  text-transform: uppercase;
}
#succ2 {
  position: absolute;
  font-weight: bold;
  font-size: 15px;
  align-content: center;
  top: 70px;
  left: 10px;
  color: white;
  text-shadow: 0.5px 0.5px white;
  overflow: hidden;
  right: 10px;
}
#indicator2 {
  height: 38px;
  width: 153px;
  background-color: grey;
  left: 92px;
  position: absolute;
  top: 16px;
  border-style: solid;
  border-width: 2.5px;
  animation: dlr 0.5s infinite;
  align-content: center;
}
@keyframes dlr {
  0% {
    background-color: red;
  }

  100% {
    background-color: grey;
  }
}
#light {
  align-content: center;
  height: 3px;
  width: 3px;
  border-radius: 50%;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  position: absolute;
  top: 3.5px;
  left: 22px;
  animation: blr 0.5s infinite;
}
@keyframes blr {
  0% {
    background-color: #ff0000;
  }

  100% {
    background-color: green;
  }
}