:root {
  --maxWidth: 1150px;
  --descriptionWidth: 720px;

  --contentWidth: calc(var(--descriptionWidth) + var(--pad) * 2);
  --infoHeight: calc(var(--pad) - 4px);
  --dlcItemHeight: 130px;
}

.landing {
  max-width: var(--maxWidth);
  margin: 0 auto;

  border-top: 1px black solid;
  border-left: 1px black solid;
  border-right: 1px black solid;

  border-top-left-radius: var(--bradius);
  border-top-right-radius: var(--bradius);

  display: flex;
  justify-content: center;
}

.landing img {
  max-width: var(--maxWidth)
}

.product {
  border: 1px black solid;

  max-width: var(--maxWidth);
  margin: 0 auto;
  display: flex;

  border-bottom-right-radius: var(--bradius);
  border-bottom-left-radius: var(--bradius);
}

body {
  padding-bottom: 60px;
}

.product > .content {
  max-width: var(--contentWidth);
}

.product > .content .title {
  padding: 24px var(--pad);
  border-bottom: 1px black solid;
  font-size: 1.3em;
}

.product > .content .info {
  border-bottom: 1px black solid;
  
  display: flex;

  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 1000;
}

.product > .content .info .price {
  margin: var(--infoHeight) var(--pad);
}

.price {
 
  padding: var(--halfpad) calc(var(--pad) - 6px);
  color: var(--white);
  align-content: center;
  background: var(--primary);
  border: 1px black solid;
  border-radius: var(--bradius);

}

.product > .content .info .profile {
  padding: var(--infoHeight) var(--pad);
  justify-content: center;
  align-items: center;
  display: flex;
  
  gap: var(--halfpad);
  color: var(--black);

  border-left: 1px black solid;

  text-decoration: none;
}
.profile .name {
  text-decoration: underline;
}

.product > .content .info .profile img {
  border-radius: 64px;
  max-width: 32px;
  border: 1px solid black;
}

.product > .content .description {
  padding: var(--pad);
  
}

.product > .content .description .tiptap__raw {
  margin-bottom: var(--pad);
}

.product > .content .description .tiptap__button  {
  display: block;
}

.product > .content .description iframe {
  max-height: 405px;
  max-width: var(--descriptionWidth);
  border-radius: var(--bradius);
}

.product > .content .description figure {
  margin: unset;
}

.product > .content .description img {
  max-width: var(--descriptionWidth);
  border-radius: var(--bradius);
}

.sidebar {
  border-left: 1px black solid;
  width: 100%;
}

.purchase {
  padding: var(--pad);

  position: sticky;
  top: 0;
  background: var(--white);

  display: flex;
  flex-direction: column;
  gap: var(--halfpad);
}

.purchase.vertical {
  display: none;
}


.extra-info {
  margin: var(--pad);
  padding: var(--pad);
  border-radius: var(--bradius);
  border: 1px solid black;
  display: flex;
  flex-direction: column; 
}

.extra-info > a {
  color: var(--black);
}

.dlc-list {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
}

.dlc-list .dlc:nth-of-type(1) {
  border-top: 1px black solid;
  border-top-right-radius: var(--bradius);
  border-top-left-radius: var(--bradius);
}

.dlc-list .dlc:nth-last-of-type(1) {
  border-bottom-right-radius: var(--bradius);
  border-bottom-left-radius: var(--bradius);
}


.dlc-list .dlc {
  display: flex;
  flex-direction: row;
  width:100%;

  border-bottom: 1px black solid;
  border-left: 1px black solid;
  border-right: 1px black solid;

  text-decoration: none;
  color: var(--black);
  min-height: var(--dlcItemHeight);
  max-height: var(--dlcItemHeight);
}

.dlc-list .dlc .vertical {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  margin: var(--pad);
  gap: var(--halfpad);
}

.dlc-list .dlc img {
  max-height: var(--dlcItemHeight);
  border-right: 1px black solid;
}

.dlc-list .dlc .title {
  font-weight: bold;
}

.dlc-list h3 {
  margin: 0;
  margin-bottom: var(--pad);
}

.buy {
  padding: var(--halfpad) 0;
  font-size: 1em;
  cursor: pointer;
  border: 1px black solid;
  background-color: var(--primary);
  color: var(--white);
  font-family: "DM Sans", sans-serif;
  text-decoration: none;
  text-align: center;
  border-radius: var(--bradius);

  display: grid;
  grid-template-columns: 1fr .3fr;

  align-items: center;
}

.big-link {
  padding: var(--halfpad) 0;
  font-size: 1em;
  cursor: pointer;
  border: 1px black solid;
  background-color: var(--primary);
  color: var(--white);
  font-family: "DM Sans", sans-serif;
  text-decoration: none;
  text-align: center;
  border-radius: var(--bradius);
}

.buy.lemonsqueezy-button {
  background: var(--primary);
}

.buy.gumroad {
  background: var(--secondary);
}

@media screen and (width <= 1150px) {
  body {
    padding-top: 0px;
  }

  .product {
    width: 100%;
    border: unset;
    flex-direction: column;
  }

  .landing {
    border: unset;
  }
  
  .product .sidebar {
    border-left: unset;
  }

  .purchase.vertical {
    border-top: 1px black solid;

    display: unset;
    position: sticky;
    bottom: 0;
  }

  .purchase {
    display: none;
  }

  .product > .content {
    width: 100%;
  }
  .landing img {
    width: 100%;
  }

  .product > .content .description figure {
    width: 100%;
  }

  .product > .content .description iframe {
    width: 100%;
  }
  
  .product > .content .description img {
    width: 100%;
  }
}

@media screen and (width <= 760px) {



}

@media screen and (width <= 768px) {

}

@media screen and (width <= 480px) {
}