body {
  background-image: url("images/fleur.webp")
}
h1
{
  text-align: center;
}

img {
   vertical-align: top;
}
a:link {
  color: orange;
}

/* visited link */
a:visited {
  color: pink;
}
#main {
background-color:black;
border: 3px solid;
border-color:hotpink;
color:orange;
font-family:Courier, sans-serif ;
text-align: center;
padding: 0px 20px 20px 20px;
width: 60%;
height:auto;
margin-left: 20%;
margin-right: 20%;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 1);
}
#main2 {
background-color:black;
border: 3px solid;
border-color:hotpink;
color:orange;
font-family:Courier, sans-serif ;
text-align: center;
padding: 20px 20px 20px 20px;
width: 60%;
height:auto;
margin-left: 20%;
margin-right: 20%;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 1);
}
#main3 {
background-color:black;
border: 3px solid;
border-color:hotpink;
color:orange;
font-family:Courier, sans-serif ;
text-align: center;
padding: 0px 20px 20px 20px;
width: 90%;
height:auto;
margin-left: 20%;
margin-right: 20%;
box-shadow: 8px 8px 4px black
}
#center
{
  position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%);
}
#box
{
  background-color:black;
border: 3px solid;
border-color:hotpink;
color:orange;
font-family:Courier, sans-serif ;
padding: 10px 10px 10px 10px;
width: 1100px
}
#image{
  width: 228px;
      height: 302px;
      background-image: url(images/cards.png);
      background-size: cover;
      position: relative;
      top: 15em;
      left: 15em;
      border: 10px solid transparent; /* Required for border-image */
      padding: 0px;
      border-image: url(images/wood.jpg) 30 round;
}
.wood {
  border: 10px solid;
  border-image: url(images/wood.jpg) 30 round;
}
#container {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  column-gap: 30px;
}
#container div {
  background-color: #000000;
  border: 1px solid black;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}