/*this is my heading font*/
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

/*this is my paragraph font*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap');

body{
 background-image: url("images/background.jpg");
background-repeat: repeat;
background-color: #6caddf;
background-blend-mode: soft-light;
}




#wrapper {
    width: 960px;
    margin: 0px auto;
    position: relative;
}	

/* header is to hold by website banner*/
header {
    width: 960px;
    height: 150px;
    position: relative;
    background-color: #6caddf;
	font-family: 'Oswald', sans-serif;
}

/* nav is for my website navigation (menu)*/
nav {
    width: 960px;
    height: 50px;
    position: absolute;
    top: 150px;
    background-color: #1C2C5B;
}	

/* aside is used for key notices or advertising*/
aside {
    width: 200px;
    height: 600px;
	position: absolute;
	top: 200px;
	left: 0;
	background-color: #1C2C5B;
}
      
section {
    width: 760px;
	height: 600px;
	position: absolute;
	top: 200px;
	right: 0px;
	background-color: #1C2C5B;
}

footer {
	width: 960px;
	height: 40px;
	position: absolute;
	top: 800px;
	left: 0px;
	background-color: #1C2C5B;
}	

nav ul {
    padding: 0;
	margin: 0;
	list-style-type: none;
	overflow: hidden;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
}	

nav li {
    float: left;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-top: 15px;
}

nav a:link{color:#ffffff;}
nav a:visited{color:#6caddf;}
nav a:hover{color:#ffbf00;}
nav a:active{color:#ffffff;}

nav a {
text-decoration: none;
}

h1 { 
font-family: 'Oswald', sans-serif;
font-size: 40px;
letter-spacing: 0.2em;
font-weight: bold;
text-align: center;
color: #000000;
padding-left: 10px;
padding-top: 40px;
text-shadow: 2px 2px 2px grey;
}

h2 { 
font-family: 'Oswald', sans-serif;
font-size: 24px;
letter-spacing: 0.2em;
font-weight: bold;
text-align: center;
color: #000000;
padding-left: 10px;
}

h3 { 
font-family: 'Oswald', sans-serif;
font-size: 24px;
letter-spacing: 0.2em;
font-weight: bold;
text-align: Left;
color: #000000;
padding-left: 10px;
}

h4 { 
font-family: 'Oswald', sans-serif;
font-size: 15px;
letter-spacing: 0.2em;
font-weight: bold;
text-align: left;
color: #000000;
padding-left: 10px;
}

h5 { 
font-family: 'Oswald', sans-serif;
font-size: 40px;
letter-spacing: 0.2em;
font-weight: bold;
text-align: center;
color: #000000;
padding-left: 10px;
}

h6 { 
font-family: 'Oswald', sans-serif;
font-size: 40px;
letter-spacing: 0.2em;
font-weight: bold;
text-align: center;
color: #000000;
padding-left: 10px;
}

p {
font-family: 'Merriweather', serif;
font-size: 16px;
letter-spacing: 0.2em;
font-weight: bold;
text-align: left;
color: #000000;
padding-left: 10px;
}

ul {
font-family: 'Merriweather', serif;
font-size: 16px;
letter-spacing: 0.2em;
font-weight: bold;
text-align: left;
color: #000000;
padding-left: 20px;
}
.images {
width: 200px;
height: 560px;
position: absolute;
right: 20px;
top: 0px;
margin-top: 20px;
background-color: #6caddf;
border-radius: 25px;
padding-left: 10px;
}

.Paragraph {
width: 500px;
height: 560px;
position: absolute;
right: 240px;
top: 0px;
margin-top: 20px;
background-color: #6caddf;
border-radius: 25px;
padding-left: 10px;
}