/*cssリセット*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /*paddingやボーダー線の拡張を防ぐ*/
    flex-wrap: wrap; /*フレキシブルboxの伸び縮み×*/
}

header,main,footer,nav{
    max-width: 960px;       /*横幅*/
    margin: 0 auto; /*真ん中寄せ*/
}

header{
    background-color: rgb(255, 224, 221);
    min-height: 100px;      /*縦幅*/

}

nav{
    background-color: rgb(254, 218, 133);
    min-height: 40px;
    color:white; 
}

main{
    background-color: rgb(192, 255, 109);
    min-height: 530px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-box{
    max-width: 960px;
    height: 100%;
}

.main-box1{
    height: 530px;
    width: 660px;
background-color: #ff3;
}

.main-box3{
    height: 530px;
    width: 300px;
background-color: #aed;
}

footer{
    background-color: rgb(59, 255, 124);
    min-height: 200px;
    color:white;
}