:root {
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
}

body {
  font-family: sans-serif;
}

.main-container {
  overflow: hidden;
}

.main-container,
.main-container * {
  box-sizing: border-box;
}

input,
select,
textarea,
button {
  outline: 0;
}

.main-container {
  position: relative;
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(to right, blue, #9141B8); /* Degradado de azul a morado */
}

a[href="https://manosnegras.com/anahuac2025/mauricio_avalos/"] {
  border: 2px solid black;
  padding: 10px 20px;
  font-size: 1.2em;
  display: inline-block;
  text-decoration: none;
  color: black;
  background-color: #f0f0f0;
  border-radius: 5px;
}

a[href="https://manosnegras.com/anahuac2025/mauricio_avalos/"]:hover {
  background-color: #e0e0e0;
}

.question-mark {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 536.23px;
  height: 758.813px;
  top: -58px;
  left: 1338px;
  color: rgba(255, 255, 255, 0.33);
  font-family: Jacques Francois Shadow, var(--default-font-family);
  font-size: 600px;
  font-weight: 400;
  line-height: 758.813px;
  text-align: center;
  white-space: nowrap;
  transform: rotate(163.1deg);
  z-index: 12;
}
.eight-ball {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  height: 275px;
  top: -14px;
  left: 92px;
  color: #ffffff;
  font-family: Jaro, var(--default-font-family);
  font-size: 280px;
  font-weight: 400;
  line-height: 275px;
  text-align: left;
  white-space: nowrap;
}
.group {
  position: absolute;
  width: 641px;
  height: 641px;
  top: 219px;
  left: 639px;
  background: url(./assets/images/d6fc575a-1388-408b-9bde-73eae3fd6356.png)
    no-repeat center;
  background-size: cover;
  z-index: 1;
}
.polygon {
  position: relative;
  width: 589px;
  height: 589px;
  margin: 26px 0 0 14px;
  background: url(./assets/images/04281aa3-d79e-44d0-b295-7d3bc8b149fe.png)
    no-repeat center;
  background-size: cover;
  z-index: 5;
  overflow: visible auto;
}
.rectangle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
  text-align: center;
  height: 100%;
}
.question-mark-1 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 520.58px;
  height: 732.578px;
  top: 295px;
  left: -41px;
  color: rgba(255, 255, 255, 0.33);
  font-family: Jacques Francois Shadow, var(--default-font-family);
  font-size: 600px;
  font-weight: 400;
  line-height: 732.578px;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-16deg);
  z-index: 11;
}
.rectangle-2 {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  max-width: 90%;
  width: 400px;
  padding: 10px;
  font-size: 18px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #d9d9d9;
  border: none;
  border-radius: 39px;
  z-index: 2;
}
.ask-the-ball {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 856px;
  height: 102px;
  top: 69px;
  left: 0;
  color: #7c7c7c;
  font-family: Jaro, var(--default-font-family);
  font-size: 96px;
  font-weight: 400;
  line-height: 102px;
  text-align: center;
  white-space: nowrap;
  z-index: 3;
}
.rectangle-3 {
  position: absolute;
  width: 362px;
  height: 102px;
  top: 758px;
  left: 1482px;
  cursor: pointer;
  background: #6f56ff;
  border: none;
  z-index: 7;
  border-radius: 40px;
}
.ask-question {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 301px;
  height: 60px;
  top: 18px;
  left: 30px;
  color: #000000;
  font-family: Jaro, var(--default-font-family);
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  text-align: center;
  white-space: nowrap;
  z-index: 9;
}
.rectangle-4 {
  position: absolute;
  width: 362px;
  height: 102px;
  top: 914px;
  left: 1482px;
  cursor: pointer;
  background: #262626;
  border: none;
  z-index: 8;
  border-radius: 40px;
}
.delete {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  width: 301px;
  height: 60px;
  top: 21px;
  left: 30px;
  color: #ffffff;
  font-family: Jaro, var(--default-font-family);
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  text-align: center;
  white-space: nowrap;
  z-index: 10;
}