body {
    background-color: #FFFFFF;
}

h1, p{
    color: #FB7701;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

figcaption {
    color: #FB7701;
    border: solid 3px black;
    border-radius: 10px;
    width: 395px;
    padding: 20px;
    background-color: rgb(255, 192, 124);
    padding: 20px;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* For the image hover effect, I created an animation with keyframes with percentages of 0% to 50% to 100%, and added the animation when it is hovered where it would make the image grow in size for about 1.3 seconds. */
.image {
    width: 100px;
    height: auto;
}

.image:hover{
    animation: icon_size 1.3s linear;
}

@keyframes icon_size {
    0%{    width: 100px;
    height: auto;}
    50%{    width: 150px;
    height: auto;}
    100%{    width: 200px;
    height: auto;}
}

/* So what I did here for the button hover effect is that I added a transition effect to where when it is hovered it would smoothly transition from the button size being usual to be a bit larger while also changing the background color to a more brighter color similarly to the link when hovered for about 0.7 seconds. */
.button {
    width: 100px;
    height: 40px;
    background-color: #FB7701;
    color: #FFFFFF;
    border: solid 3px black;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.7s ease-out;
}

.button:hover {
    background-color: #FFA500;
    width: 120px;
    height: 60px;
    font-size: 20px;
}

/* For the link hover effect, it is pretty self explanatory as it is also mentioned in the instructions of the assignments where I made it text decoration to be none so that way it would be able to show the color of the text changed when hovered, not to mention the color when hovered is the same one that is mentioned in the instructions of the assignment as well. */
.link{
    text-decoration: none;
}
.link:hover {
    color: #FFA500;
}

footer {
    font-size: 20px;
    margin: 0;
    padding: 5px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.credit {
    font-size: 13px;
    margin: 0;
}