/*
    Author: Dawn Duerre
    Date: Fall 2022
    Class: CSC135
    Project: Assignment 3
    Description: Create product cards using Flex Box
*/

/* Styling for whole document */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-family: Georgia, serif;
    line-height: 1.5em;
}

/* Headers styled */

h1 {
    font-size: 4em;
    font-weight: normal;
}
h2 {
    font-size: 1.2em;
    margin-top: 0;
    text-align: center;
}

/* Body Styles */
/* This applies to all of the cards as a whole */
#cards {
    border: 3px solid #783F27;
    display: flex;
    align-items: stretch;
    flex-flow: row wrap;
    justify-content: center;
}

/*This applies to each individual card */
section {
    background: #F6F3ED;
    margin: 10px;
    padding: 20px;
    border: 1px dotted maroon;
    width: 240px;
    display: flex;
    flex-direction: column;
    flex: auto;
}
.price {
    font-weight: bold;
    background-color: violet;
    padding: 5px;
    width: 100%;
    text-align: center;
    margin-top: auto;
}
.photo {
    order: -1;
    margin: auto;
}


/* Heading and footer styling */
#top, #bottom{
    background-color: violet;
    color: midnightblue;
    margin: auto;
    padding: 2px;
    width: 100%;
    text-align: center;
}

/* Header only Styles */
#top {
    line-height: 4em;
}
h1 {
    font-size: 4em;
    padding: 2px;
}
#headinfo {
    font-size: 1.5em;
}

/* Footer only styles */
#footinfo {
    font-size: 1.5em;
}