#p-table-m {
  display: none;
  visibility: hidden;
}

/* ---------------- */

header, main, footer {
  width: 100%;
  padding: 0.5% 2%;
}

header, main {
  text-align: center;
}

main, footer {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}

header {
  font-size: 2.5rem;
}

#p-table-d {
  width: 77%;
}

#p-table-d table {
  width: 100%;
}

#p-table-d table tr td {
  width: 5.5%;
  aspect-ratio: 1;
  padding: 0.1%;
}

#p-table-d table tr td div,
#p-table-d table tr td span {
  aspect-ratio: 1;
  background: #ffffff19;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid #ffffff4d;
  border-radius: 40%;
  box-shadow: inset 0 8px 32px #00000019, inset 0 1px 0 #ffffff80, inset 0 -1px 0 #ffffff19, inset 0 0 20px 10px #ffffff19;
  cursor: pointer;
  font-size: 1.25rem;
  align-content: center;
  transition: all 0.5s;
}

#p-table-d table tr td div::before,
#p-table-d table tr td span::before {
  content: '';
  background: linear-gradient(90deg, transparent, #ffffffcc, transparent);
}

#p-table-d table tr td div::after,
#p-table-d table tr td span::after {
  content: '';
  background: linear-gradient(180deg, #ffffffcc, transparent, #ffffff4d);
}

#p-table-d table tr td span {
  display: block;
  aspect-ratio: 2/1;
  border-radius: 20%/40%;
}

#p-table-d table tr td div:hover {
  background: #ffffff33;
  font-size: 1.5rem;
}

.b-prop {
  width: 21%;
  background: #ffffff19;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid #ffffff4d;
  border-radius: 9.5%/5%;
  box-shadow: inset 0 8px 32px #00000019, inset 0 1px 0 #ffffff80, inset 0 -1px 0 #ffffff19, inset 0 0 20px 10px #ffffff19;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.b-prop h2 {
  width: 100%;
  font-size: 2.25rem;
}

.b-prop table {
  width: 100%;
  text-align: left;
}

.b-prop table tr td {
  padding: 5% 8% 5%;
  font-size: 1rem;
  &:nth-child(1) {
    width: 56%;
  }
  &:nth-child(2) {
    width: 44%;
  }
}

.b-prop button {
  width: 80%;
  background: #ffffff19;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid #ffffff4d;
  border-radius: 32px;
  box-shadow: inset 0 8px 32px #00000019, inset 0 1px 0 #ffffff80, inset 0 -1px 0 #ffffff19, inset 0 0 20px 10px #ffffff19;
  padding: 2%;
  font-size: 1.6rem;
}

.b-prop button a {
  display: block;
  width: 100%;
}

.fact {
  width: 78%;
}

.info {
  width: 20%;
  align-content: center;
  text-align: right;
  font-size: 1rem;
}