* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    /* background-color: orange; */
    font-family:verdana;
    background-image: url(../images/Mesa\ de\ trabajo\ 1.png);
    background-size: cover;
    min-height: 100vh;;
}

div#container{
    background-color: hsl(200 80% 98% / .8);
    width:calc(100vw - 1.5in);
    height: calc(100vh - 1.5in);
    margin: .75in auto; /* center a block */
    border-top:8px solid hsl(271, 100%, 16%);
    position: relative;
}

#cta_buttons {
    /* border: 2px solid red; */
    position: absolute; top: 80px; left:80px;
}

div#cta_buttons a {
    border: 4px solid #000;
    padding: 12px 20px;
    margin-right:20px;
    text-decoration: none;
}

div#cta_buttons a:first-child {
    background-color: #000;
    color:#FFF;
    transition-property: background-color, color, border-radius,border;
    transition-duration: 0.2s, 0.1s, 1.3s, 1.3s;
    transition-delay: 0s,0s,0.5s,0.5s;
}

div#cta_buttons a:first-child:hover {
    background-color: rgb(143, 89, 214);
    color:#000;
    border-radius: 20px 20px  75px 75px;
    border: 2px solid purple;
}

div#promo_section {
    /* border: 4px solid red; */
    width:90%;
    margin: 150px auto 20px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 40px;
}

/* div#promo_section figure {
    
} */
div#promo_section figure:hover {
    border: 4px solid purple;
}

figure.product_card {
    flex: 0 0 300px;
    aspect-ratio: 1/1.3;
    border: 0px solid transparent;
    background-image: url(../images/3238285_44045.svg);
    background-size:110%;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    transition: all 400ms ease-in-out;
}
figure.product_card:hover {
    background-size: 120%;
    background-position: center -10%;
    text-transform: uppercase;
    transform: perspective(40rem) rotateY(-10deg);
}
.product_card a {
    display: block; width: 100%; height: 100%;
    text-decoration: none;
}
.product_card figcaption {
    background-color: hsl(256, 66%, 61%);
    color: #FFF;
    width: 100%;
    height:25%;
    position: absolute; bottom: 0px; left: 0px;
    text-align: center;
    padding: 6px;text-decoration: none;
}
.product_card span {
    text-decoration: none;
}
.navigation {
    height:30px;
    background-color: hsl(271, 100%, 16%);
}
p.price {
    background-color: rgb(119, 0, 255);
    color:#FFF;
    font-weight: bold;
    position: absolute; top: 20px; right: -19px;
    border-radius: 20px 20px 0px 20px;
    padding: 8px 10px;
    box-shadow: 8px 6px 20px #555;
}

p.price::after { /* little triangle - pseudo element */
    content: ""; display: block;
    border-width: 13px;
    border-style: solid;
    border-color:transparent rgb(119, 0, 255) transparent transparent;
    position: absolute; right: 5px; bottom: -12px;
    transform: rotate(45deg);
}
/* p.price2 {
        width: 0;
        height: 0;
        border-top: 12px solid rgb(119,0,255);
        border-bottom: 12px solid transparent;
        border-left:10px solid rgb(119,0,255);
        border-right: 10px solid transparent;
        position:absolute; top: 50px; right: -20px;
        transform: translateX();
} */