body {
  background-color: black;
  margin: 4rem;
  text-align: center;
}

main { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));

}

body, html{
  height: 100%;
}

/*Style button RollDice*/
button {
  background-color: red;
  border-radius: 1rem;
  border: none;
  color: rgb(248, 248, 248);
  padding: 2rem;
  text-transform: uppercase;
  width: 20rem;
  height: 8rem;
  cursor: grab;
  font-family: "Monoton", cursive;
  font-size: 2rem;
  border-style: double;
}

#myImage {
  border-radius: 1rem;
  block-size: 12rem;
}

/*Style Div above the button RollDice*/
div.a {
  padding-top: 6rem;
  text-align: center;
  background-position: top;
  background-image: url("https://thumbs.gfycat.com/CompleteCornyGalago-size_restricted.gif");
  background-repeat: no-repeat;
  background-color: black;
  background-size: 15rem;
}

/*Style button RollDice*/
#placeholder,
#placeholder2 {
  height: 15vh;
  width: 15vh;
  margin: 2rem auto;
  border-radius: 1rem;
  font-size: 1rem;
  background-color: white;
}

/*Style id points holder*/
#points,
#points2 {
  color: rgb(196, 42, 42);
  font-size: 5vh;
  text-align: center;
}
/*Style text points holder*/
h1 {
  color: rgb(196, 42, 42);
}

h3 {
  color: red;
}
.rightbar {
  grid-area: rightbar;
}

.leftbar {
  grid-area: leftbar;
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.wrapper {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "leftbar header rightbar"
    "leftbar header rightbar"
    "leftbar  footer  rightbar";
}

.box {
  background-color: black;
  color: #fff;
  border-radius: 5px;
  padding: 1px;
  font-size: 1rem;
}

.header,
.footer {
  background-color: black;
}