body{
background-color: grey;
}

/*all divs must float*/

#container {
margin-right: auto;
margin-left: auto;
width: 70%;
height: 800px;
background-color: yellow;
color: white;
border-radius: 100px;
border: solid;
background: url(https://static.tumblr.com/15afac643afd0d85cb6e3ebf1433fe45/ltccaho/OlYnz0acl/tumblr_static_tumblr_static__640.jpg);
/*this image appears in every link*/
}

div{
border-radius: 10px;
}

#header {
height: 100px;
float: left;
clear: left;
margin-left: 10%;
width: 85%;         
background-color: silver;
border-style: solid;
border-color: white;
text-align: center;

/*header is at  top of the page*/
}

.textarea {
height: 500px;
float: left;
clear: left;
margin-left: 15%;
width: 85%;
background-color: silver;
color: black;
margin-left: 10%;
background: url(https://www.dualshockers.com/wp-content/uploads/2017/08/SWBFUE.jpg);
/*backround url shows image on the whole page*/
}

.pagetransfer {
/*these are the menus*/
height: 50px;
float: left;
margin: 5px;
padding: 10px;
width: calc (25% - 36%);
border-radius:5px;
color: black;
text-align: center;
border: solid;
border-color: black;
border-width: 5px;
border-style: solid;
font-size: 20px;
}

h2 {
font-size: 40pt;
text-align: center;
float: left;
}
/*will appear bigger then p with font size*/

p {
font-size: 16pt;
float: left;
}

.textarea2{
height: 500px;
float: left;
clear: left;
margin-left: 15%;
width: 70%;
background-color: silver;
color: black;
background: url("https://c2.staticflickr.com/4/3945/18228090173_09a177d747_b.jpg");
background-repeat: no-repeat;
/*about menu*/
}

.textarea3{
float: left;
margin-left:15px
width: 15%;
/*media menu*/
}

.textarea4{
float: left;
clear: left;
margin-left: 15%;
width: 70%;
background-color: silver;
color: black;
/*guides menu*/
}

.textarea5{
float: left;
clear: left;
margin-left: 15%;
width: 70%;
height: 500px;
background-color: silver;
color: black;
/*more menu*/
}

.iframe{
width: 70%;
height: 500px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
float:left;
/*youtube videos*/
}

p4{
text-align: center;
font-size: 16pt;
float: left;
}

p5{
text-align: center;
font-size: 16pt;
float: left;
}

p6{
text-align: center;
font-size: 16pt;
}

.finalproject/index.html{
height: 50px;
float: left;
margin: 5px;
padding: 10px;
width: calc (25% - 36%);
border-radius:5px;
color: black;
text-align: center;
border: solid;
border-color: black;
border-width: 5px;
border-style: solid;
font-size: 20px;
}