@import url('https://fonts.googleapis.com/css?family=Playwrite%20AU%20TAS:700|Playwrite%20AU%20TAS:400');

body {
  font-family: 'Playwrite AU TAS';
  font-weight: 400;
}

h1, h2, h3, h4, h5 {
  font-family: 'Playwrite AU TAS';
  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/persona-4-banner_1600x.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(16, 174, 247);
}



.aside{
    grid-area: aside;
    background-color: rgb(245, 163, 95);

}
.section{
    grid-area: section;
    background-color: rgb(233, 243, 89);

}
.footer{
    grid-area: footer;
    background-color: gray;
}
.footer footer{
    display: flex;
    gap: 800px;
}
#Yu{
    max-height: 420px;
}
#Summon{
    max-height: 300px;
    margin-top: 200px;
    margin-left: 50px;
}
#Rise{
    max-height: 300px;
    margin-left: 40px;
}
#Group{
    max-height: 300px;
    margin-top: 220px;
}
#Game{
    max-height: 350px;
    margin-top: 250px;
}