body {
  background: url(./backgroundimg.jpg) repeat;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 12rem;
  margin-left: 15rem;
}
h1 {
  font-family: sans-serif;
  color: darkgoldenrod;
  position: absolute;
  top: 5rem;
  left: 30rem;
}
.text-field {
  height: 4rem;
  width: 30rem;
  border: solid 0.1rem;
  margin-top: 10rem;
  margin-left: 25rem;
  font-size: x-large;
  font-weight: bold;
  padding: 1rem;
}
.text-area {
  position: absolute;
  left: 30rem;
  top: 20rem;
  font-size: large;
  font-weight: bold;
}
#esc,
#a,
#f1,
#f2,
#f3,
#f4,
#f5,
#f6,
#f7,
#f8,
#f9,
#f10,
#f11,
#f12,
#prtsc,
#insert,
#delete,
#q,
#w,
#e,
#r,
#t,
#y,
#u,
#i,
#o,
#p,
#sq {
  width: 3rem;
  height: 2rem;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.keyboard2 {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
  width: 70rem;
  margin: 2rem;
  margin-top: -20px;
}
#backquote,
#one,
#two,
#three,
#four,
#five,
#six,
#seven,
#eight,
#nine,
#zero,
#minus,
#equal,
#home,
#ctrl,
#alt,
#win,
#space,
#alt,
#menu,
#ctrl,
#fn {
  width: 3rem;
  height: 2rem;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
#backspace,
#enter {
  width: 6rem;
  height: 2rem;
}

#a,
#s,
#d,
#f,
#g,
#h,
#j,
#k,
#l,
#semicolon,
#cot,
#hash,
#pgup,
#pgdn,
#shift,
#line,
#z,
#x,
#c,
#v,
#b,
#n,
#m,
#rightarrow,
#leftarrow,
#que,
#end {
  width: 3rem;
  height: 2rem;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
#capslock {
  width: 8rem;
  height: 2rem;
}
#pause {
  width: 9rem;
  height: 2rem;
}
#space {
  width: 22rem;
  height: 2rem;
}
#pgdn {
  width: 4rem;
  height: 2rem;
}
#pgdn,
#space,
#pause,
#capslock,
#backspace,
#enter {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}