body{background: url(../images/ny.jpg);
background-size: cover;
margin: auto;
display: flex;
justify-content: center;
}

main{ width: 1280px;
height: 900px;
flex-direction: column;margin-top: 50px;
}

header{display: flex;}

#logo{width: 150px;
height: 150px;
background-image: url('../images/firefox.png');
background-size: cover;}


#logo:hover {background-image:url('../images/oldfox.png');}

#ban{background: url('../images/ban1.png');
    height: 150px;
    width: 80%;
flex-grow: 1}

#ban:hover{background:url('../images/ban2.png');}



nav{width: 300px;
background-color: rgb(0, 0, 0);
display: flex;
padding-top: 20px;
align-items: center;
justify-content: center;}

ul{list-style: none;
padding: 0;}

a{display: block;
height: 50px;
width: 200px;
color: rgb(3, 3, 3);
background-color: rgb(13, 204, 147);
margin: 10px  0;
text-decoration: none;
text-align: center;
line-height: 50px;}

a:hover{color: azure;
background-color: rgb(104, 58, 146);}

#content{background-color: rgb(122, 54, 185);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
flex-grow: 1;}

#container{display: flex; width: 100%;}

article{width: 700px;
height: 500px;
background-image: url('../images/eizouken.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;}



p{color: white;
padding: 20px;
display: flex;
align-items: center;
background-color: rgba(51,170,51,0.8);}


#edge{width:150px;
    height: 150px;}

footer{height: 150px;
width: 100%;
background-color: rgb(70, 148, 179);
display: flex;
justify-content: center;
align-items: center;}

h1{font-size: 2em;
color: white;
font-weight: bold;}