/*
filename: style.css
author: Evan Lanza
student id last four: 8804
cs username: elanza05
*/

/* =========================================
   PLANT GENERATOR CONTAINER
   Main container for the plant generator
   ========================================= */
.generator{
    text-align:center;
    width: 400px;
    height: 500px;
    margin:auto;
    padding:20px;
    border-style: solid;
    border-radius: 25px;
    border-width: 10px;
    border-color: #c2deba;
    background-color: #f4f9f2;
    color: #3b6d11;
}

/* INDIVIDUAL PLANT IMAGE STYLING */
.plant-display img{
    width: 200px;
    height: 250px;
    object-fit: cover;
    transition: transform 0.8s ease;
    /* Smooth animation when rotation occurs */
    border-style: solid;
    display: block;
    margin: 0 auto;
    border-radius: 25px;
    border-color: #3b6d11;
}

/* =========================================
   ANIMATION CLASSES
   Class applied via JavaScript to trigger
   a rotation animation
   ========================================= */
.spin{
    transform: rotate(360deg);
}

/* =========================================
   INTERACTIVE BUTTON
   Styling for the 'Generate' button
   ========================================= */
button{
    border-radius: 25px;
    padding:10px 15px;
    margin:10px;
    cursor:pointer;
    background-color: #c2deba;
    color: #3b6d11;
    border-style: solid;
    border-width: 2px;
    border-color: #3B6D11;
}

/* =========================================
   PLANT DESCRIPTION TEXT
   Reserved space for the plant description
   ========================================= */
#plantDescription {
    margin: 15px 30px;
    font-size: 14px;
    line-height: 1.5;
}

/* LATIN NAME FORMATTING */
.latin {
    font-style: italic;
}