/* 
         Wickedly Wild Gourmet Sauces styles.css File
         Filename: styles.css

         Original Author:  Jonathan LeBlanc
         Date:     12/15/22
         LAST EDITED: 12/15/22
 */

/* reset styles */

	
	
	
html {
   font-size: 25px;
}
a, article, aside, body, div, figcaption, figure, footer, header, h1, 
h2, h3, img, li, nav, p, section, table, tbody, td, tfoot, th, thead, tr, ul {
   border: 0;
   padding: 0;
   margin: 0;
}
img {
   max-width: 60%;
   height: auto;
   width: auto;
}

	
/* body and page container */
body {
   background: #white;
   font-family: "Goudy Old Style";
}
.container {
   width: 640px;
   background-color: black;
}
.header-nav-container {
   background-color: white;
   background: repeating-linear-gradient(to right, red, white, red, white, red, white, red)
}
.article-aside-outer-container {
   background-color: #white;
   background: linear-gradient(red, white)
   
}
.article-aside-inner-container {
   max-width: 1400px;
   margin: 0 auto;
   overflow: auto;
   background-color: white;
}


/* skip navigation link */
p.skipnavigation a {
   position: absolute;
   left: -10000px;
}
p.skipnavigation a:focus {
   border: 2px solid white;
   left: auto;
   right: 1em;
   top: 1em;
   background-color: black;
   color: black;
   z-index: 2;
}

/* header section or Logo */
header {
   max-width: 650px;
   margin: 1 auto;
   text-align: left;
   background-color: #white;
}
header p {
   font-size: 5.4em;
   line-height: 2em;
   font-weight: bold;
}
/* site navigation */
nav.sitenavigation {
   padding-left: 6%;
background: linear-gradient(black, maroon, red)
}

nav.sitenavigation li {
   display: inline-block;
   margin: 0.8em .4em;
   font-size: 1.4em;
   font-weight: bold;
   -webkit-transition-duration: 1s;
   transition-duration: 0.1s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}
nav.sitenavigation li:hover {
   -ms-transform: scale(1.3);
   -webkit-transform: scale(1.3);
   transform: scale(1.3);
}
nav.sitenavigation a:link {
   color: White ;
   text-decoration: none;
}
nav.sitenavigation a:visited {
   color: #ffc9004f;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus {
   color: red;
   text-shadow: 1px -1px 0 #000000;
}
nav.sitenavigation a:active {
   position: relative;
   top: 1px;
   left: 1px;
}

/* main content */

article {
   width: 62.5%;
   float: left;
   background-color: ghostwhite;
}
article h2 {
   margin: 0.4em 0.4em 0;
   font-size: 2em;
   font-weight: bold;
}
article h3 {
   margin: 0.4em 0.4em 0;
   color: black;
   font-size: 1.1em;
   font-weight: bold;
}
article p {
   margin: 0 1em 0 1.4em;
   font-size: 0.9em;
}
section {
   margin: 0 0 1em 1em;
}
figure {
   width: 100%;
   float: center;
}
figure img {
   width: 60%;
   margin: 1rem;
}
figcaption {
   text-align: -webkit-center;
   font-size: 1.4em;
}
article ul {
   margin: 1em 3em;
   list-style-type: disc;
}
article li {
   margin: 0.em 0;
   font-size: 1.3em;
}

/*Table Content*/

th, td {
   border: 1px solid black;
   padding: 0.5em;
}
th {
}
/* main content description list */
dd {
   margin-left: 1em;
   font-style: italic;
}

/* main content CSS table */
.table {
   margin: 1em 0;
   display: table;
   font-size: 1.3em;
}
.row {
   display: table-row;
}
.row div {
   display: table-cell;
   padding: 0.25em 0.5em;
}
.day {
   font-weight: bold;
}

/* sidebar */
aside {
   padding: 2%;
   width: 30%;
   float: right;
   background-color: ghostwhite
}
aside h2 {
   padding: 0.4em;
   font-size: 1.8em;
   line-height: 0.8em;
   font-weight: inherit;
   color: darkred
}
aside p {
   padding-left: 2em;
}

/* footer section */
footer {
   padding: 0.6em;
   background-color: #f04747;
   color: black;
   text-align: center;
   clear: both;
}
footer p {
   margin: 0.4em;
   font-weight:bolder;
   font-size: 1.3em;
}
/* form styles */
form {
   margin: 2%;
   padding: 1%;
   border: 8px solid indianred;
   background:linear-gradient(indianred,white,indianred)
}
.form-instructions {
   color: white;
   
}
/* Label Styles */
.contactinfo label:before {
   content: "* ";
   color: white;
}