/*H1 margin and padding edited to make the purple background cover it*/
    h1{
        text-align: center;
        padding-left:7rem;
        padding-right:7rem;
        margin:0rem;
        padding-bottom: 1.75rem;
        padding-top: 1.75rem;
    }
/**/

/*Makes the grid for the index page*/
    .para{
        display:grid;
        grid-template: 25% 55% / 50% 50%;
        width:auto;
        height:500px;
        box-sizing: border-box;
        justify-items: center;
        align-items: center;
    }
/**/

.text{
    padding:1rem;
}

/*Makes the left side of the grid have a purple bg*/
    .left-para-one{
        background-color: #b496ff;
        border-radius: 5px;
    }
/**/

/*Makes the right side of the grid have a orange bg*/
.right-para-one{
    background-color: #ffd996;
    border-radius: 5px;
    width:600px;
    height:422px;
    margin-top:16rem;
    justify-self: end;
}
/**/


/*Extra margin since the purple bg goes over the grid and original margin*/
    #page{
        margin-top: 4rem;
    }
/**/


/*So the first pic on the page fits in the first grid*/
    #first-pic{
        width:400px;
        padding-bottom: 10rem;
    }
/**/


h2{
    text-align: center;
    text-decoration: underline #b496ff;
}

#desc{
    text-align: center;
}


/*The grid with all the four accesories images*/
    .four-grid{
        display:grid;
        grid-template-columns:25% 25% 25% 25%;
        justify-items: center;
    }

    .four-grid-pics{
        width:200px;
        height:200px;
        background-color: #ffd996;
        border-radius: 5px;
    }

    .four-grid-text{
        width:200px;
        text-align: center;
        margin-bottom: 0.5rem;
        background-color: #b496ff;
        border-radius: 5px;
        font-weight: bold;
    }


    .four-grid-pics:hover{
        cursor: pointer;
    }

    #blue-bow-image:hover, #rose-image:hover, #crown-image:hover, #sunflower-image:hover{
        animation: index-hover 5s infinite linear;
    }

    @keyframes index-hover {
        0%{
            width:200px;
            height:200px;
        }

        20%{
            width:175px;
            height:175px;
        }

        40%{
            width:200px;
            height:200px;
        }

        60%{
            width:175px;
            height:175px;
        }

        80%{
            width:200px;
            height:200px;
        }

        100%{
            width:200px;
            height:200px;
        }
    }
/**/

/*All of the animation stuff for making the images in the four grid bigger
Doesn't show until triggered with the js from index.js*/
    .blue-bow-ani{
        display:grid;
        grid-template-columns: 50% 50%;
        align-items:center;
        justify-items: center;
    }

    #blue-bow-ani-image{
        width:600px;
        height:600px;
    }

    .rose-ani{
        display:grid;
        grid-template-columns: 50% 50%;
        align-items:center;
        justify-items: center;
    }

    #rose-ani-image{
        width:600px;
        height:600px;
    }

    .crown-ani{
        display:grid;
        grid-template-columns: 50% 50%;
        align-items:center;
        justify-items: center;
    }

    #crown-ani-image{
        width:600px;
        height:600px;
    }

    .sunflower-ani{
        display:grid;
        grid-template-columns: 50% 50%;
        align-items:center;
        justify-items: center;
    }

    .sunflower-ani-image{
        width:600px;
        height:600px;
    }

    @keyframes blue-bow-animation{
        from{opacity: 0;}
        to{opacity: 1;}
    }

    @keyframes sunflower-animation{
        from{opacity: 0;}
        to{opacity: 1;}
    }

    @keyframes crown-animation{
        from{opacity: 0;}
        to{opacity: 1;}
    }

    @keyframes rose-animation{
        from{opacity: 0;}
        to{opacity: 1;}
    }
/**/

.one-para{
    display:grid;
    grid-template-rows: 20% 80%;
    width:auto;
    height:500px;
    padding-top:5rem;
}

ul li::marker{
    content: "🐾";
}

.list-text{
    padding: 1rem;
}