:root {
  --table-wrapper-border: linear-gradient(-45deg, rgba(108, 40, 172, 0.6), rgba(139, 43, 168, 0.7));
}
main {
  flex:  1 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(34, 32, 34, 0.7);
}

.page-info {
  height: fit-content;
  min-height: 200px;
  width: 100%;
  background-color: rgb(44, 44, 44, 0.6);

  border-bottom: 2px var(--border-basic-color) solid;
  align-content: center;
}
.text-container {
  width: 86%;
  justify-self: center;
  padding-bottom: 8px;
}
.text-container h1 {
  margin-bottom: 8px;
  line-height: 1.05;
}

.border-wrapper-pages {
  width: 72%;
  min-height: 600px;
  max-width: 1500px;
  margin-top: 20px;
  margin-bottom: 30px;

  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: var(--table-wrapper-border);
}
.pages-tab-content {
  box-sizing: border-box;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-color: rgba(34, 32, 34, 0.7);
  border-radius: 10px;
  overflow: hidden;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 14px;
  padding: 16px 12px;
  padding-bottom: 18px;
}

.faq-wrapper {
  width: 50%;
  min-width: 870px;
  min-height: 240px;
  max-width: 1500px;
  margin-top: 20px;
  margin-bottom: 30px;

  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: var(--table-wrapper-border);
}
.faq-tab {
  box-sizing: border-box;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-color: rgba(34, 32, 34, 0.7);
  border-radius: 10px;
  overflow: hidden;
}
.faq-header {
  height: 44px;
  width: 100%;
  background-color: rgb(107, 5, 107);
  border-bottom: 2px solid;
  border-image: linear-gradient(to left, rgba(137, 42, 214, 0.548), rgba(160, 36, 190, 0.589)) 1;
  font-size: 32px;
  font-weight: 600;
}
.faq-content {
  box-sizing: border-box;
  height: fit-content;
  width: 100%;
  overflow: hidden;
  flex-wrap: wrap;
  padding: 16px 12px;
  padding-bottom: 4px;
  row-gap: 16px;
  margin: auto auto;
}
.faq-specific-content {
  width: 100%;
  height: fit-content;
}
.faq-topic {
  width: 100%;
  height: fit-content;
}
.faq-topic details:last-child {
  margin-bottom: 18px;
}
details {
  width: 74%;
  border: 2px var(--border-basic-color) solid;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: -2px;
}
summary {
  box-sizing: border-box;
  width: 100%;
  background-color: rebeccapurple;
  padding: 4px 8px;
}
details p {
  margin-top: 8px;
  padding: 0px 8px;
}
details p:last-child {
  margin-bottom: 8px;
}
details ul {
  margin: 6px 0px;
}

.tiles-content {
  width: 100%;
  min-height: 150px;
  column-gap: 14px;
  row-gap: 14px;
  flex-wrap: wrap;
}
.tile {
  flex-shrink: 0;
  height: 100px;
  width: 180px;
  border: 2px var(--border-basic-color) solid;
  border-radius: 6px;
  background: linear-gradient(20deg, rgb(125, 26, 192, 0.85), rgba(75, 12, 117, 0.85));
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  transition: transform 0.08s, filter 0.08s, opacity 0.05s;
  padding: 0px 6px;
  box-shadow: 2px 2px 5px rgb(12, 12, 12);
}
.tile:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}
.tile:active {
  opacity: 0.65;
}

details {
  box-shadow: 2px 2px 5px rgb(12, 12, 12);
}



.rdr-page {
  position: relative;
  box-sizing: border-box;
  width: 49%;
  min-width: 350px;
  height: 250px;
  border: 2px var(--border-basic-color) solid;
  border-radius: 8px;

  box-shadow: 2px 2px 5px rgb(32, 32, 32);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.08s;
  padding: 20px;

  column-gap: 20px;
}





.pic-cont {
  height: 100%;
  width: 33%;
  color: rgb(0, 0, 0);
  opacity: 0.2;
  filter: drop-shadow(2px 2px 3px rgb(0, 0, 0));
}
.text-cont {
  height: fit-content;
  width: 67%;
  padding-bottom: 20px;
}
.pic-cont svg {
  width: 100%;
  height: 100%;
}

.page-name {
  font-size: 40px;
  font-weight: 600;
}
.rdr-page-info {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}

.spacing {
  min-width: 220px;
  width: 74%;
  max-width: 300px;
  height: 3px;
  margin-bottom: 5%;
  margin-top: 3px;
  background: linear-gradient(to left, rgba(252, 202, 40, 0.85), rgb(171, 25, 255, 0.85));
}

.card-shade-light-green {
  background: linear-gradient(to top, rgb(31, 226, 194, 0.85), rgb(44, 44, 44));
}
.card-shade-orange {
  background: linear-gradient(to top, rgb(194, 112, 18, 0.85), rgb(44, 44, 44));
}
.card-shade-blue {
  background: linear-gradient(to top, rgb(35, 109, 194, 0.85), rgb(44, 44, 44));
}
.card-shade-pink {
  background: linear-gradient(to top, rgb(171, 16, 185, 0.85), rgb(44, 44, 44));
}
.card-shade-purple {
  background: linear-gradient(to top, rgb(125, 26, 192, 0.85), rgb(44, 44, 44));
}
.card-shade-premium {
  background: linear-gradient(-20deg, rgba(252, 202, 40, 0.8), rgb(171, 25, 255, 0.85), rgb(44, 44, 44));
}

.card-shade-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0px 0px 8px rgb(201, 129, 47);
  filter: brightness(1.2);
}
.card-shade-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0px 0px 8px rgb(60, 125, 199);
  filter: brightness(1.2);
}
.card-shade-pink:hover {
  transform: translateY(-2px);
  box-shadow: 0px 0px 8px rgb(191, 45, 204);
  filter: brightness(1.2);
}
.card-shade-purple:hover {
  transform: translateY(-2px);
  box-shadow: 0px 0px 8px rgb(154, 71, 209);
  filter: brightness(1.2);
}
.card-shade-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0px 0px 8px rgb(243, 192, 24);
  filter: brightness(1.2);
}
.card-shade-light-green:hover {
  transform: translateY(-2px);
  box-shadow: 0px 0px 8px rgb(24, 243, 170);
  filter: brightness(1.2);
}

.pic-cont-calc {
  --screen-fill: rgba(255,255,255,0.2);
}


.big-page-icon svg {
  width: 92%;
}


@media (max-width: 1230px) {
  .border-wrapper-pages {
    width: 90%;
  }
}


@media (max-width: 980px) {
  .pic-cont {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    color: rgb(126, 126, 126);
  }
  .pic-cont-calc {
    top: 62%;
    width: 134px;
    --screen-fill: rgba(39, 39, 39, 0.829);
  }
  .text-cont {
    width: 90%;
  }
  .faq-wrapper {
    width: 90%;
    min-width: 0px;
  }
}

@media (max-width: 840px) {
  .rdr-page {
    width: 98%;
  }
  .pic-cont {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    color: rgb(0, 0, 0);
    height: 100%;
    width: 33%;
  }
  .pic-cont-calc {
    --screen-fill: rgba(255,255,255,0.2);
  }
  .text-cont {
    width: 67%;
  }
}

@media (max-width: 560px) {
  .pic-cont {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    color: rgb(126, 126, 126);
  }
  .pic-cont-calc {
    top: 62%;
    width: 134px;
    --screen-fill: rgba(39, 39, 39, 0.829);
  }
  .text-cont {
    width: 90%;
  }
  .faq-wrapper {
    width: 90%;
    min-width: 0px;
  }
}