* {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 50px;
}

img {
  width: 70px; /* Adjust the width as needed */
  height: auto; /* Maintain aspect ratio */
}
body {
  background-color: black;
  overflow: hidden;
}

.top-left-corner {
  position: absolute;
  top: 0;
  left: 0;
  /* z-index: 1; */
}

.top-right-corner {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(90deg);
}

.bottom-left-corner {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(270deg);
}

.bottom-right-corner {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.middle-left {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 4;
}
.middle-right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(180deg);
  z-index: 4;
}
.top {
  padding: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%);
  width: calc(100% - 135px); /* Subtract 70px from both sides */
  height: 60px;
}
.bottom {
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(50%) rotate(180deg);
  width: calc(100% - 135px); /* Subtract 70px from both sides */
  height: 70px;
}
.top-left-side {
  position: absolute;
  top: 25%;
  left: 0;
  transform-origin: 100px 200px; /* Set origin to a specific pixel point */
  transform: translateX(-35%) rotate(270deg);
  width: calc(50% - 135px); /* Subtract 70px from both sides */
  height: 70px;
}
.rectangle-wood-top-left {
  position: absolute;
  top: 69px;
  left: 0px;
  width: 27.5px;
  height: calc(100% - 130px);
  background-color: #391717;
  z-index: 3;
  border-right: 0.5px solid black; /* 1px black border */
  z-index: 3;
}
.rectangle-felt-top-left {
  position: absolute;
  top: 69px;
  left: 27px;
  width: 12.1px;
  height: calc(50% - 103px);
  background-color: #0f5712;
  border-right: 0.5px solid black;
}
.rectangle-felt-bottom-left {
  position: absolute;
  top: calc(50% + 26px);
  left: 28px;
  width: 11px;
  height: calc(50% - 82px);
  background-color: #0f5712;
  border-right: 0.5px solid black;
  z-index: 6;
}
.rectangle-wood-top {
  position: absolute;
  top: 0px;
  left: 65px;
  width: calc(100% - 130px);
  height: 27.7px;
  background-color: #391717;
  z-index: 3;
  border-bottom: 0.2px solid black; /* 1px black border */

  z-index: 3;
}
.rectangle-wood-bottom {
  position: absolute;
  bottom: 0px;
  left: 65px;
  width: calc(100% - 125px);
  height: 27.7px;
  background-color: #391717;
  z-index: 3;
  border-top: 0.5px solid black; /* 1px black border */
  z-index: 3;
}

.rectangle-felt-top {
  position: absolute;
  top: 28px;
  left: 57px;
  width: calc(100% - 113px);
  height: 11.2px;
  background-color: #0f5712;
  border-bottom: 0.2px solid black;
  z-index: 5;
}

.rectangle-wood-top-right {
  position: absolute;
  top: 69px;
  right: 0px;
  width: 27.5px;
  height: calc(100% - 125px);
  background-color: #391717;
  z-index: 3;
  border-left: 0.5px solid black; /* 1px black border */
}
.rectangle-felt-top-right {
  position: absolute;
  top: 56px;
  right: 28px;
  width: 11px;
  height: calc(50% - 90px);
  background-color: #0f5712;
  border-left: 0.5px solid black;
  z-index: 2;
}
.rectangle-felt-bottom-right {
  position: absolute;
  top: calc(50% + 26px);
  right: 27px;
  width: 12.1px;
  height: calc(50% - 82px);
  background-color: #0f5712;
  border-left: 0.5px solid black;
}
.rectangle-felt-bottom {
  position: absolute;
  bottom: 28px;
  left: 57px;
  width: calc(100% - 113px);
  height: 11.2px;
  background-color: #0f5712;
  border-top: 0.2px solid black;
  z-index: 5;
}
.diamond {
  position: absolute; /* Ensures the z-index takes effect */
  width: 6px; /* Width of the diamond */
  height: 6px; /* Height of the diamond */
  background-color: #fffdd0;
  transform: rotate(135deg) skew(20deg, 20deg); /* Skew to elongate the diamond shape */
  border-radius: 3%;
  z-index: 1000; /* Ensure this is higher than any other z-index */
}

.position-left-top {
  top: 25%;
  left: 12px;
}
.position-left-middle {
  top: 50%;
  left: 12px;
}
.position-left-bottom {
  top: 75%;
  left: 12px;
}

.position-right-top {
  top: 25%;
  right: 12px; /* Horizontally center the diamond */
}
.position-right-middle {
  top: 50%;
  right: 12px; /* Horizontally center the diamond */
}
.position-right-bottom {
  top: 75%;
  right: 12px; /* Horizontally center the diamond */
}

.position-top-left {
  top: 24px;
  transform: translate(-25%, -250%) rotate(45deg) skew(20deg, 20deg);
  left: 50%; /* Horizontally center the diamond */
}
.position-top-middle {
  top: 24px;
  transform: translate(-25%, -250%) rotate(45deg) skew(20deg, 20deg);
  left: 25%; /* Horizontally center the diamond */
}
.position-top-right {
  top: 24px;
  transform: translate(-25%, -250%) rotate(45deg) skew(20deg, 20deg);
  left: 75%; /* Horizontally center the diamond */
}
.position-bottom-left {
  bottom: -1px;
  transform: translate(-25%, -250%) rotate(45deg) skew(20deg, 20deg);
  left: 50%; /* Horizontally center the diamond */
}
.position-bottom-middle {
  bottom: -1px;
  transform: translate(-25%, -250%) rotate(45deg) skew(20deg, 20deg);
  left: 25%; /* Horizontally center the diamond */
}
.position-bottom-right {
  bottom: -1px;
  transform: translate(-25%, -250%) rotate(45deg) skew(20deg, 20deg);
  left: 75%; /* Horizontally center the diamond */
}

.invisable-rect {
  position: absolute;
  width: 27.5px;
  height: calc(50% - 80px);
  background-color: transparent; /* Make the parent rectangle invisible */
}

.felt-table {
  position: absolute;
  top: 3%;
  left: 3%;
  height: 94%;
  width: 94%;
  background-color: green; /* Make the parent rectangle visible for testing */
  z-index: -2;

  /* Center text using flexbox */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* Optional: Make text visible on green background */
}
.top-left {
  top: 53px;
  left: 0px;
}
.top-right {
  top: 53px;
  right: 0px;
}
.bottom-left {
  bottom: 53px;
  left: 0px;
}
.bottom-right {
  bottom: 53px;
  right: 0px;
}

.line {
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: red;
  z-index: 5;
  opacity: 0;
}