@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');

body{
    margin:0;
    padding: 0;
    overflow:hidden;
    background-color: #eeaae5;
  }
  .wrapper{
    transform: rotate(-90deg);
    transform-origin:bottom right;
    
    position:absolute;
    top: -100vw;
    right: 0;
    
    height:100vw;
    width:100vh;
    
    overflow:hidden;
    background-color: #eeaae5
  }
  .head{
    font-family: 'Times New Roman', Times, serif;
    font-size: 90px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 4px #000000;
    padding: 15px;
    background-color: #910513;
  }
  .head_small{
    font-family: 'Times New Roman', Times, serif;
    font-size: 80px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 4px #000000;
    padding: 15px;
    background-color: #910513;
  }
  .headcolor{
    color: #ffffff;
    text-shadow: 2px 2px #000000;
  }
  .product-name{
    font-weight: bold;
    color: #000000
  }
  .product-price{
    font-size: 50px;
    font-weight: bold;
    color: #000000;
  }
  .list-group {
    --bs-list-group-border-width: 0;
    --bs-list-group-bg: none;
  }
  ol {
    list-style-type: none;
    
    /* update using the css variable from html */
    counter-reset: lis;	  
  }

  ol[start] {
    /* select using "start" attribute so we only mod this increment */
    counter-reset: lis calc(var(--s) - 1);
    /* calc() is used to keep html attributes values coherent */
  }
  li {
    counter-increment: lis;
  }
  li:before {
    content: counter(lis)". ";
    color: #000000;
    font-weight: bold;
  }
  .img-fluid{
    margin-bottom: 10px;
  }
  .list-group {
    padding-left: 20px;
  }
  .wrapper > div{
    padding-left:20px;
  }
  p{
    margin-bottom: -.25rem;
    color: #000000;
  }
  li:before{
  width: 92px;
  text-align: right;
  margin-right: 10px;
  }
  .list-group{
      padding-left: 5px;
  }
  .list-group-item{
      padding-left: 5px;
  }