/* --- UNIVERSAL STYLE --- */
#intro{
    display:grid;
    grid-area:intro;}
#startText{
    display:grid;
    grid-area:startText;}
#section1{
    display:grid;
    grid-area:section1;}
#section2{
    display:grid;
    grid-area:section2;}
#section3{
    display:grid;
    grid-area:section3;}
#section4{
    display:grid;
    grid-area:section4;}
#section5{
    display:grid;
    grid-area:section5;}
#footer{
    display:grid;
    grid-area:footer;}
a {color: #9e711c;
    }
/* --- MOBILE --- */
@media screen and (max-width:550px){
    #body{
        width:100%;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, auto);
        grid-auto-rows: minmax(auto);
        grid-gap:.1vh;
        margin:0;
        grid-template-areas:
'intro intro intro intro intro'
'startText startText startText startText startText'
'section1 section1 section1 section1 section1'
'section2 section2 section2 section2 section2'
'section3 section3 section3 section3 section3'
'section4 section4 section4 section4 section4'
'section5 section5 section5 section5 section5'
'footer footer footer footer footer'}
#intro{display:grid;
    height:20vh;
    grid-gap:1%;
    width:100%;
    background-image: url(img/bannerBoi.png);
    background-size: 100%;
    opacity:100%;
    align-items: end;}
#blackBox{display:grid;
    height:20vh;
    grid-gap:1%;
    width:100%;
    height:0%;
    background-color: black;
    color:white;
    font-family: 'Assistant';
    font-size:7vw;
    opacity: 70%;
    text-align: center;}
#blackBoxText{
    padding-top:15%;
    margin:1%;
    opacity: 0%;}
#startText{
    display: block;
    margin-top: 3vh;
    font-family: 'Assistant';
    color:#04233C;
    text-align: center;
    font-size: 4.5vw;
    margin-left: 3%;
    margin-right:3%;}
#section1{
    padding-top:10vh;
    height:90vh;}  
#section2{
    padding-top:60vh;
    height:50vh;}   
#section3{
    padding-top:50vh;
    height:70vh;}   
#section4{
    padding-top:40vh;
    height:65vh;} 
#section5{
    padding-top:40vh;
    height:70vh;} 
}

/* --- PC --- */
@media screen and (min-width:550px){
    #body{width:100%;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(7, auto);
        grid-auto-rows: minmax(auto);
        grid-gap:0vh;
        margin:0;
        grid-template-areas:    
    'intro intro intro intro intro intro intro'
    'startText startText startText startText startText startText startText'
    'section1 section1 section1 section1 section1 section1 section1'
    'section2 section2 section2 section2 section2 section2 section2'
    'section3 section3 section3 section3 section3 section3 section3'
    'section4 section4 section4 section4 section4 section4 section4'
    'section5 section5 section5 section5 section5 section5 section5'
    'footer footer footer footer footer footer footer'
    }

#intro{
    display:grid;
    height:25vh;
    grid-gap:1%;
    width:100%;
    background-image: url(img/bannerBoi.png);
    background-size: 100%;
    opacity:100%;
    align-items: last baseline;}
#blackBox{
    display:grid;
    height:25vh;
    grid-gap:1%;
    width:60%;
    height:0%;
    background-color: black;
    color:white;
    font-family: 'Assistant';
    font-size:3.5vh;
    opacity: 70%;
    text-align: center}
#blackBoxText{
    padding-top: 5vh;
    opacity: 0%;}
#startText{
    display:block;
    font-family: 'Assistant';
    font-size:1.75vw;
    margin-left:10%;
    margin-right:10%;
    text-align: center;
    margin-top:3vh;}

#section1{
    padding-top:10vh;
    height:70vh;}
#section2{

    padding-top:50vh;
    height:50vh;}
#section3{

    padding-top:20vh;
    height:50vh;}
#section4{

    padding-top:20vh;
    height:50vh;}  
#section5{
    padding-top:20vh;
    height:50vh;}  
#footer{
    padding-top: 10vh;
    height:20vh;
}
}