:root{
   --principal: rgb(19, 19, 26);
   --accent: rgb(221, 158, 158);
   --xmasprincipal: rgb(97, 0, 15);
   --xmasaccent: rgb(249, 217, 121);
}

.container{
   font-family: 'Nunito', sans-serif;
   margin-top: 20px;
   color: var(--accent);
}


body{
   text-align: center;
   background-position-y: middle;
   background-image: url("../img/fondito.png");
   /* background-repeat: no-repeat; */
   background-size: 30%;
}

p{
   text-align: justify;
   font-size: 20px;
}

img{
   width: 80%;
   margin-bottom: 20px;
}

.pub{
   box-shadow: -1px 1px 31px -9px rgba(0,0,0,0.52);
   -webkit-box-shadow: -1px 1px 31px -9px rgba(0,0,0,0.52);
   -moz-box-shadow: -1px 1px 31px -9px rgba(0,0,0,0.52);
   background-color: var(--principal);
   border-radius: .7rem;
   padding: 3%;
   margin: 10px;
}

.pubA{
   background-image: url(https://assets.primaverasound.com/psweb/5w7fk1drxl3375ewz48m_1638534295545.png);
   border-radius: .7rem;
   padding: 5%;
   margin: 10px;
   background-size: 100%;
   background-repeat: no-repeat;
   background-position-y: 40%;
   max-height: 1000px;
}

.pubB{
   background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f1411f51-b876-4331-9363-f895deabea7f/ddydmvc-0eee5315-c9f6-4c4b-ab93-0f0b3234ce54.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2YxNDExZjUxLWI4NzYtNDMzMS05MzYzLWY4OTVkZWFiZWE3ZlwvZGR5ZG12Yy0wZWVlNTMxNS1jOWY2LTRjNGItYWI5My0wZjBiMzIzNGNlNTQuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.oQ6WGrfB2Tz41LTooaGrbLxE8DtgLuQhrSfqvP9dp7c);
   border-radius: .7rem;
   padding: 5%;
   margin: 10px;
   background-size: 100%;
   background-repeat: no-repeat;
   background-position-y: 40%;
   max-height: 1000px;
}

.ps-logo{
   width: 40%;
}

.ps-logoB{
   width: 70%;
}

.modal-header{
   background-color: var(--principal);
   color: var(--accent);
}

.modal-body{
   background-color: var(--principal);
   color: var(--accent);
}

.modal-body img{
   width: 100%;
}

.modal.fade .modal-dialog {
   transition: transform .3s ease-out;
   transform: translateY(-50px);
}
 
 .modal.fade.show .modal-dialog {
   transform: translateY(0);
}
 

li {
   display: inline-block;
   font-size: 1.5em;
   list-style-type: none;
   padding: 1.5em;
   text-transform: uppercase;
   font-weight: bold;
   text-shadow: 0cm 0cm 15px var(--principal);
 }
 
 li span {
   display: block;
   font-size: 4.5rem;
 }
 
 .emoji {
   display: none;
   padding: 1rem;
 }
 
 .emoji span {
   font-size: 4rem;
   padding: 0 .5rem;
 }
 
 @media (max-width: 768px) {
   .pubA{
      background-size: 250% !important;
      background-position-x: 70%;
   }

   .pubB{
      background-size: 350% !important;
      background-position-x: 50%;
   }

   li span{
      font-size: 3rem;
   }

   .ps-logo{
      width: 80%;
   }

   .ps-logoB{
      width: 100%;
   }
 }