@import url('https://fonts.googleapis.com/css?family=Belgrano:700|Belgrano:400');

body {
  font-family: 'Belgrano';
  font-weight: 400;
}

h1, h2, h3, h4, h5 {
  font-family: 'Belgrano';
  font-weight: 700;
}

html {font-size: 100%;} /* 16px */

h1 {font-size: 4.210rem; /* 67.36px */}

h2 {font-size: 3.158rem; /* 50.56px */}

h3 {font-size: 2.369rem; /* 37.92px */}

h4 {font-size: 1.777rem; /* 28.48px */}

h5 {font-size: 1.333rem; /* 21.28px */}

small {font-size: 0.750rem; /* 12px */}
*{
    box-sizing: border-box;
}

html,body{
    margin: 0;
    padding: 0;
    height: 100%;
}
.grid-container{
    grid-template-columns: 1fr 3fr;
    display: grid;
    grid-template-areas: 
        "header header"
        "nav nav"
        "aside section"
        "footer footer ";        
}
.grid-container div{
    padding: 10px;
}
@media screen and (max-width: 500px)
{   
 .grid-container{
        display: grid;
        grid-template-areas: 
            "header "
            "nav "
            "aside "
            "section"
            "footer  ";
            grid-template-rows: 2fr 1fr 1fr 6fr 1fr;
            grid-template-columns: auto;
            min-height: 100vh;
    }
}

.header{
    grid-area: header;
    background-image:url("../Image/Papillon.webp");
    background-size: cover;
    background-position: center;
    text-align: center;
    font-size: larger;  
    height: 35vh;
}


.nav{
    grid-area: nav;    
    background-color: rgb(243, 239, 17);
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.nav a{
    text-decoration: none;
    padding: 25px 50px;
    color: black;
    font-size: x-large;
    }
.nav a:hover{
    background-color: rgb(137, 236, 133);
}



.aside{
    grid-area: aside;
    background-color: rgb(212, 3, 31);

}
.section{
    grid-area: section;
    background-color: rgb(16, 166, 236);

}
.footer{
    grid-area: footer;
    background-color: gray;
}

.footer footer{
    display: flex;
    gap: 800px;
}

#protag{
    max-height: 550px;
}
#Hashino{
    max-height: 350px;
    margin-top: 80px;
}
#Soejima{
    max-height: 350px;
    margin-top: 40px;
}