/** Use the css box model to create the thumbnail
The CSS box model is essentially a box that wraps around every HTML element. 
It consists of: content, padding, borders and margins.
We use width and height to make the box static or strict**/


.divPT{
    position: relative;
    background-color: transparent;
    width: 250px;
    height: 330px;
    border: 5px solid green;
    border-radius: 25px;
    padding: 15px 55px;
    text-align: left;
    margin-right: 20px;
    margin-left: 35px;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/** curson on product**/
.buttonDIV {
    display: inline-block;
    border: 2px; /* Ensure border is well-defined */
    border-radius: 10px; /* Keep the border radius consistent */
    background: transparent;
    transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.buttonDIV:hover {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.15); /* Softer, less wide shadow */
    transform: translateY(-3px); /* Slight lift effect */
}


/** img for product**/

.divPT img{
    position: relative;
    width: 125px;
    height:150px;
      
}

/** line for product **/

.divPT hr{
    position: absolute;
    border: 5px solid gold;
    width: 100%;
    padding: 0;
    margin-top: 8px;
    left: 0; /** padding left property didn't work here, imporvised**/
    opacity: 1; /** Allows the border to be visible and not blurry due to box shawdo property from box shadow property above**/
}

/** The name and cost of product**/

.ProductName{
    position: absolute;
    padding-top: 18px;
    left: calc(5px);
    
}

/** PFP icon, specifically the circle icon with the gold border **/

.ProductUserPFP{ /** this will be applied via the span element (similar to div but for single elements**/
    position: relative;
    height: 45px;
    width: 45px;
    background-color: rgb(5, 145, 5);
    display: inline-block;
    border-radius: 50%; /** this property is what allows us to create the circle icon**/
    border: 3.5px solid gold;
    top: 75px;
    left: -50px;



}

/** photo for PFP icon **/

.ProductUserPhoto{
    position: relative;
    width: 100px;
    height: 100px;
    
}

/** Users access ID and IRL name **/

.ProductAcessID{
    position: relative;
    padding-top: 43px;
    
}

.ProductUserName{
    position: relative;
    left: 2.9px;
    top: -58px;
}

/** rating **/
.rating{
    position: relative;
    width: 40px;
    height: 40px;
    top: -45px;
    left: 20px;
    color: gold; 
}