/* style the header element */
header {
    
    /* sets the space between the margin and padding */
    border:0;
    
    /* space between the content and border in px */
    padding: 1px;
    
    /* sets the background color */
    background-color: #be1e2d;
    
    /* curves the corner of the border at the bottom left by ten px */
    border-bottom-left-radius: 10px;
    
    /* curves the corner of the border at the bottom right by ten px */
    border-bottom-right-radius: 10px;
    
    border-top-right-radius: 10px;
    
    border-top-left-radius: 10px;
    
    /* sets the width of the header element in percentage */
    width: 100%;
    
    /* sets the height of the header element in percentage */
    height: 10%;
}

/* style the header2 elemeny */
header2 {
    
    /* positioned relative to nearest postioned ancestor */
    position: absolute;
    
    /* space between the content and border in px */
    padding: 40px;
    
    /* sets the background color */
    background-color: #be1e2d;
    
    /* curves the corner of the border at the bottom left by ten px */
    border-bottom-left-radius: 10px;
    
    /* curves the corner of the border at the bottom right by ten px */
    border-bottom-right-radius: 10px;
    
    /* curves the corner of the border at the top left by ten px */
    border-top-left-radius: 10px;
    
    /* curves the corner of the border at the top right by ten px */
    border-top-right-radius: 10px;
    
     /* sets the width of the element in percentage */
    width: 15%;
    
    /* sets the height of the element in percentage */
    height: 10%;
    
    /* sets the margin of the element */
    margin: 0;
    
    /* sets the position of the top by px */
    top: 174px;
    
    /* sets position to the right by px */
    left: 90px;
    
    /* sets the order of the header higher values are displayed on top */
    z-index: 99;
}

/* styles the header3 element */
header3 {
    
    /* positioned relative to nearest postioned ancestor */
    position: absolute;
    
    /* space between the content and the border in px */
    padding: 40px;
    
    /* sets the background color */
    background-color: #8a8c8f;
    
    /* curves the corner of the border at the bottom left by ten px */
    border-bottom-left-radius: 10px;
    
    /* curves the corner of the border at the bottom right by ten px */
    border-bottom-right-radius: 10px;
    
    /* curves the corner of the border at the top left by ten px */
    border-top-left-radius: 10px;
    
    /* curves the corner of the border at the top right by ten px */
    border-top-right-radius: 10px;
    
    /* sets the width of the element in percentage */
    width: 15%;
    
    /* sets the height of the element in percentage */
    height: 10%;
    
    /* sets the margin of the element */
    margin: 0;
    
    /* sets the position from the top in px */
    top: 174px;
    
    /* sets the position from the right in px */
    right: 90px;
    
    /* sets the order of the header higher values are displayed on top */
    z-index: 99;
}

/* this is the styling for the body */
body {
    
    /* sets the background color for the body */
    background-color: #ef4e22;
    
    /* sets the margin for the body */
    margin: 0;
    
    /* space between content and border */
    padding: 10px;
    
    /* font to use followed by alternative text */
    font-family: athelas, serif;
    
    /* sets the height of the body in px */
    
}

navbar {
    
/* Will create a sticky/fixed navigation bar */
    position: fixed;
    
    /* sets the background color of the navbar */
    background-color: #41393d;
    
    /* sets the position of the nav bar */
    top: 0;
    
    /* set the position of the navbar */
    left: 0;

    /* length of the navbar running horizontally */
    width: 100%;
    
    /* spacing between content and border */
    padding: 5px 5px; 
    
    /* computes the padding and border in the equation for width and height  */
    box-sizing: border-box;
    
     /* length of time to transition from one styling to the next */
    transition: .5s;
    
    /* sets the order of the header higher values are displayed on top */
    z-index: 101;
    
    /* curves the corner of the border at the bottom left by ten px */
    border-bottom-left-radius: 10px
}

/* styles the margin and padding of the navigation bar */
navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    
}

/* styles the links in the ordered list in the navbar */
navbar ul li a {
    
    /* links will use the lucky color from the Town style guide */
    color: #d4a18d;
    
    /* font size for the links */
    font-size: 20px;
    
    /* spacing between content and border */
    padding: 11px;
    
    /* underlines the links */
    text-decoration: underline;
    
    /* transforms the text to uppercase */
    text-transform: uppercase;
    
    /* length of time to transition from one styling to the next */
    transition: .5s;
    
    /* sets the height of the line */
    line-height: 30px;
    
/* curves the border around the list elements */
    border-radius: 10px;
    text-align: left;
}

/* styles the current link hovered over as a new background color for ordered list */
navbar ul li a:hover {
    background-color: #ef4e22;
}

/* styles the designated active link as a different color than the rest of the links */
navbar a.active {
    background-color: #ef4e22;
}

* {
    /* computes the padding and border in the equation for width and height  */
    box-sizing:border-box;
}

/* styles the box element */
box {
     
    position: absolute;
    
    top: 130px;
    
    right: 480px;
    
    /* sets the width of the element in percentage */
    width: 50%;
    
    /* space between content and border */
    padding: 20px;
    
    /* sets the background color of the element */
    background-color: #d7e4c2; 
    
    /* sets the height of the element in px */
    height: auto;
    
    /* curves the corner of the border at the top left by ten px */
    border-top-left-radius: 10px;
    
    /* curves the corner of the border at the top right by ten px */
    border-top-right-radius: 10px;
    
    /* curves the corner of the border at the bottom left by ten px */
    border-bottom-left-radius: 10px;
    
    /* curves the corner of the border at the bottom right by ten px */
    border-bottom-right-radius: 10px;
    
    box-shadow: 4px 4px 20px;
}

/* styles the links in navbar right to the right */
navbar-right {
    float: right;
}

/* adds responsiveness - when screens are less than 580 wide, code will display
   display navbar smaller to conform to new page size but keep layout the same
*/ 

/* styles the h1 element, this is the largest of the h1-h6 elements by default
*/
h1 {
    
    /* sets the color of the text */
    color: #41393d;
    
    /* sets the font to be used and the alternate */
    font-family: athelas, serif;
    
    /* sets the size of the font */
    font-size: 22px;
    
    /* sets the height of the line */
    line-height: 40px;
    
    /* space between content and border from the top of the content */
    padding-top: 50px;
    
    /* space between content and border from the left of the content */
    padding-left: 20px;
    
    /* space between content and border from the right of the content */
    padding-right: 20px;
    
    /* space between content and border from the bottom of the content */
    padding-bottom: 10px;
    
   /* aligns the text to the center of the content */ 
    text-align: center;
    
    /* sets the order of the header higher values are displayed on top */
    z-index: 105;
}

/* styles h2 element */
h2 {
    
    /* sets the color of the text */
    color: #41393d;
    
    /* font to use followed by alternative text */
    font-family: athelas, serif;
    
    /* sets the size of the font */
    font-size: 18px;

    /* aligns the text to the center of the content */
    text-align: center;
}

/* styles h3 element */
h3 {
    position: relative;
    /* sets the color of the text */
    color: #41393d;
    
    /* font to use followed by alternative text */
    font-family: athelas, serif;
    
    /* sets the size of the font */
    font-size: 18px;
    
    /* aligns the text to the center of the content */
    text-align: center;
    
    /* sets space in px between content outside the margin and the border */
    margin: 0px;
    
    /* content will be hidden when overflowing content box */
    overflow: hidden;
    
    /* sets the width of element in px */
    width: 80%;
    
    /* positions element at the bottom of the page */
    top: -40px;
    
    left: 20px
}

/* styles the paragraph element */
p {
    
    /* styles the text color */
    color: #41393d;
    
    /* font to use followed by alternative text */
    font-family: athelas, serif;
    
    /* sets the size of the font */
    font-size: 18px;

    /* aligns the text in the p element to center */
    text-align: center;
}

/* styles the footer element */
footer {
    
    /* font to use followed by alternative text */
    font-family: athelas, serif;
    
    /* sets the size of the font */
    font-size: 16px;
    
    /* aligns the text in the footer */
    text-align: center;
    
    /* sets the background color */
    background-color: #41393d;
    
    /* amount of space in px between content and border */
    padding: 30px 30px;
    
    /* corners the top left of border */
    border-top-left-radius: 10px;
    
    /* corners the top right of border */
    border-top-right-radius: 10px;
    
    /* sets the width of the footer */
    width: 100%;
    
    /* sets the height of the footer */
    height: 5%;
    
    /* stays at the very bottom of page */
    position: absolute;
    
    bottom: -130px;
	
    z-index: 103;
    
    
}

/* styles the aside element */
aside {
    
    /* content will be hidden when overflowing content box */
    overflow: hidden;
    
    /* floats the content to the rightt */
    float: right;
    
    /* sets the margin to 30px */
    margin: 30px;
    
    /* sets the height to 600 px */
    height: 600px;
    
    /* amount of space in px between content and border */
    padding: 200px;
    
    /* sets the width to 20% of the page */
    width: 20%;
    
    /* sets the background color */
    background-color: #41393d;
    
    /* sets position of aside element to the edge of page. */
    right: -1.6%;
    
    /* adds a shadow under the element and sets color blurs by 20px */
    box-shadow: 0px 1px 20px ;
    
    /* corners the bottom left of border */
    border-bottom-left-radius: 10px;
    
    /* corners the bottom right of border */
    border-bottom-right-radius: 10px;
    
    /* corners the top left of border */
    border-top-left-radius: 10px;
    
    /* corners the top right of border */
    border-top-right-radius: 10px;
}

/* styles the aside1 element */
aside1 {
    
    /* content will be hidden when overflowing content box */
    overflow: hidden;
    
    /* floats the content to the left */
    float: left;
    
    /* sets the margin to 30px */
    margin: 30px;
    
    /* sets the height to 600 px */
    height: 600px;
    
    /* amount of space in px between content and border */
    padding: 200px;
    
    /* sets the width to 20% of the page */
    width: 20%;
    
    /* sets the background color */
    background-color: #41393d;
    
    /* positions element at the top */
    top: 0px;
    
    /* adds a shadow of */
    box-shadow: 0px 1px 20px;
    
    /* corners the bottom left of border */
    border-bottom-left-radius: 10px;
    
   /* corners the bottom left of the border */ 
    border-bottom-right-radius: 10px;
    
    /* corners the top left of the border */
    border-top-left-radius: 10px;
    
    /* /* corners the top right of the border */
    border-top-right-radius: 10px;
    
    /* sets position to static in order to set top position */
    position: static;
    
}

section {
    box-sizing: border-box;
    margin: 0;
    padding: 30px;
    background-color: #d4a18d;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 30%;
    width: 100%;
}

section ul li a {
    color: red;
    display: block;
    padding: 5px;
}

small a {
    float: center;
    color: #d4a18d;
}

small ul li a {
    color: #41393d;
    position: absolute;
    right: 11px;
    top: 13px;
    border: 10px;
    background-color: #ef4e22;
    padding: 1.5%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

coupon-container {
    position: relative;
    float: left;
    width: 33.33%;
    padding: 5px;
    border: 5px;
    background-color:#41393d;
    height: 85%;
    top: 10px;
    box-sizing: border-box;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 0px 3px 10px; 
}

clearfix::after {
    content: "";
    clear:both;
    display: table;
}

* {
    box-sizing: border-box;
}

asideright {
    box-sizing: border-box;
    border: 10px;
    width: 300px;
    height: 420px;
    padding: 10px;
    position: absolute;
    background-color:#d4a18d;
    overflow-y:scroll;
}