html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

ul,ol {
    padding-left: 0;
    list-style: none;
}

sup {
    line-height: 0;
}

html {
    font-family: "Arial Rounded " , sans-serif;
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
	padding-top:20px;
	padding-bottom:20px;
    background:url(images/option2.png) repeat-x fixed,
        url(images/option3.png) repeat-x left bottom,
        #000 linear-gradient(to bottom, hsla(62, 46%, 77%, 0.8) 2%, hsla(63, 60%, 67%, 0.8) 64%) fixed;
}

.container {
    margin: 0 .625rem;
    overflow: hidden;   /* hides extra content */
	width: 85%;
    max-width: 800px;  /* sets the container to size to a maximum width of 800 px */
    margin: 20px auto;
}

.wrapper {
    border: 2px solid white;
    border-radius: 10px;
    background:#147C85;
    margin-top: 10px;
    margin-bottom: 10px;
}

header {
    display: flex;
    border-radius: 10px;
    border: 2px solid gray;
    margin: 5px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

header h1 {  /* microsoft zune header */
    text-align: center;
    flex: 1 0 auto;
    margin: 0;
    color:#0F2E4B;
    font-family: "Modern No. 20", sans-serif;
    font-weight: 300;
    letter-spacing: 4px;
    text-shadow: 0 -2px 2px rgb(208, 193, 134);
    background: transparent linear-gradient(to bottom,
            hsla(63, 47%, 53%, 0.8) 10px,
            hsla(45, 40%, 57%, 0.8) 15px,
            hsla(57, 38%, 80%, 0.8));
    border-radius: 10px;
   
}

header h1 sup { /* microsoft zune header */
    font-size: .6em;
}

section {  /* Lorem Ipsum Dolar */
    overflow: hidden;
    margin: 25px;
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.8);
    background: #FFF linear-gradient(to bottom, hsl(187, 100%, 96%) 25%, hsl(187, 100%, 92%) 20%, hsl(187, 100%, 96%) 5%);
}

h2 {   /* Lorem Ipsum Dolar */
    margin: 14px 0 16px;  /* sets margin top right bottom */
}

p {    /* Lorem Ipsum Dolar */
    margin: 26px 0 12px;   /* sets margin top right bottom  */
    line-height:25px;
  }

 img {
        width: auto;  /* sets the image size to automatically resize itself  */
        float: right;
        margin: 0 0 2px 4px;
    }

@media (max-width: 48rem) {  /* screen size is < 768px = 16px * 48rem SMALL SCREEN */
    header {
        background:url(images/arrow2.png) no-repeat 60px -5px /100px 100px,
			url(images/sale2.png) no-repeat top 0px left 295px /70px 70px,
			url(images/zune.jpg) no-repeat center center / cover,
            #000 linear-gradient(to bottom, rgba(0, 159, 245, 1), rgba(0, 100, 225, 1));
    }

    header h1 {   /* microsoft zune header */
		margin-top:50px;
		line-height: 2;
        font-size: 1.75em;  /* 1.75em * 16px = 28px */
        align-self: flex-end;
    }
 }

@media (min-width: 48rem) {  /* if screen size is > 768 px = 16px * 48rem LARGE SCREEN*/
    header {
        height: 400px;  /* height set ONLY for the large screen */
        background:url(images/sale2.png) no-repeat top 150px left -90px / 200px 200px,
			url(images/arrow.png) no-repeat 75px -20px / 280px 280px,
			url(images/zune.jpg) no-repeat center center / cover,
            #000 linear-gradient(to bottom, rgba(0, 159, 245, 1), rgba(0, 100, 225, 1));
    }


    header h1 {    /* microsoft zune header */ 
		font-size: 2.75em; /* 2.75em * 16px = 44px */
        align-self: flex-end;
    }
    
}