body,main,nav,section,footer,#banner{
    padding:0px; margin:0px;
    height:auto; width:100%;
    background-color:#343434;
}

body{
    font-family:Arial, Helvetica, sans-serif, serif;
    font-size:18px;
    /* background-color:#1E1E1E; */
    color:#D4D4D4;
    overflow-y:hidden;
}

a {
    color:inherit;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

main{
    display:grid;
    /* min-width:900px; */
    grid-gap:0px;
    height:100vh;
    -webkit-overflow-scrolling:touch;
    overflow-y:scroll;
    scroll-snap-type:y mandatory;
}

#top{
    height:0px; width:0px;
}

#banner{
    background:linear-gradient(to right,rgb(255, 255, 255, 0.9) 0%,rgba(255, 255, 0, 0) 40%);
    height:30px;
    font-size:18px; color:black;
    position:fixed;left:0px;top:0px;z-index:1;
    padding-left:40px;padding-top:5px;padding-bottom:5px;
    display:grid;
    grid-template-columns:30px 30px 1fr;
    transition-duration:0.5s;
    transition-property:height,grid-template-columns;
    transition-timing-function:ease-in-out;
}

#banner:hover{
    height:60px; grid-template-columns:60px 60px 1fr;
}

#banner-menu, #banner-logo, #backtop{
    cursor:pointer;
    background-repeat:no-repeat;
    background-size:contain;
    height:100%; border-radius:8px;
    /* border:1px solid black; */
}

#banner-menu{
    background-image:url(/img/icon/menu-mini.png);    
}

#banner-menu:hover{
    background-image:url(/img/icon/menu1-mini.png);
}

#banner-logo{
    background-image:url(/img/icon/banner1.png);
    position:relative;left:20px;
}

nav, #nav{
    background-color:rgba(255, 255, 255, 0.9);
    height:100vh; width:200px;
    display:none;
    grid-template-columns:1fr;
    grid-template-rows:60px 1fr 1fr 1fr;
    grid-template-areas:
        'placeholder-1'
        'navA'
        'navB'
        'navC'
        ;
    flex-wrap:wrap;
    align-content:flex-end;
    justify-content:space-between;  
    font-size:18px; color:black;
    position:fixed;
    left:0px;
    top:0px;
    z-index:10;
    overflow-y:auto; overflow-x:hidden;
}

#navA{grid-area:navA;}
#navB{grid-area:navB;}
#navC{grid-area:navC;border-left:1px solid rgb(255, 0, 0);}

#navA, #navB, #navC{padding-left:20px; padding-right:20px;vertical-align:middle;}

#backtop{
    position:fixed; right:20px; bottom:20vh;
    z-index:9;
    width:50px; height:50px;
    background-image:url(/img/icon/backtop2.png);
}

#backtop:hover{
    background-image:url(/img/icon/backtop3.png);
}
  
section{
    display:flex;
    flex-wrap:wrap;
    align-content:flex-end;
    background-repeat:no-repeat;
    background-position:top left;
    background-size:cover;
    height:100vh;
    scroll-snap-align:start;
}

.hidden{
    display:none;
}

.invisible{
    visibility:hidden;
}

.sectionbox{
    width:800px;
    height:240px;
    margin-bottom:40px; margin-left:200px;
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
    justify-content:left;
}        

.sectionbox-title{            
    font-size:90px; font-weight:700;            
    text-shadow:4px 4px 8px black;
}

.sectionbox-title, .sectionbox-text, .sectionbox-button{
    color:white; font-family:inherit;
}

.sectionbox-title, .sectionbox-text{width:100%;}

.sectionbox-text{
    font-size:30px; font-weight:normal; 
    text-shadow:3px 3px 4px black;
}

.sectionbox-button{
    background-color:rgba(0, 217, 217, 0.8);
    font-size:20px; font-weight:bold;
    margin-top:20px;
    width:180px; height:50px;
    display:flex; align-items:center; justify-content:center;
    border-radius:100px;    
    cursor:pointer;
    transition-property:width,height,border-radius,font-size;
    transition-duration:0.5s;
    transition-timing-function:ease-in-out;
}

.sectionbox-button:hover{
    width:240px; height:80px; border-radius:0px; border-top-left-radius:15px; border-bottom-right-radius:15px; font-size:30px;
}

.sectionbox-button:active{
    background-color:rgb(255, 208, 0, 0.8);
    color:black;
}

footer{
    height:10px;
    display:grid;
    text-align:center;
    justify-content:space-between;  
    scroll-snap-align:start;
    grid-template-columns:1fr 0.5fr 1fr;
    grid-template-rows:1fr 0.2fr;
    grid-template-areas:
                'aboutme logo links'
                'a1 b1 copyright'
                ;
}

footer .title{
    width:100%; font-size:22px; text-align:left; font-weight:bold;
}

#aboutme, #logo, #links{
    display:grid;
    place-items:center;
    padding:20px;
    line-height:1.5em;    
    /* border:1px solid white; */
}

#aboutme{grid-area:aboutme; text-align:justify; padding-left:20%;font-size:15px;}
#logo{grid-area:logo; background-image:url(/img/logo/Bl@ke.png); background-repeat:no-repeat; background-position:center center; background-size:40% auto;}
#links{grid-area:links; padding-right:20%;}
#copyright{grid-area:copyright; text-align:right; line-height:2em; padding-right:40px; padding-bottom:20px;}

#links img{
    max-width:50px;
    height:auto;
}

@media (max-width:1300px){
    .sectionbox{margin-left:40px;}
}

@media (max-width:1050px){
    footer{
        height:50px;
        grid-template-columns:0.2fr 1fr;
        grid-template-rows:1fr 0.5fr 0.1fr;
        grid-template-areas:
                'logo aboutme'
                'a1 links'
                'b1 copyright'
                ;
    }
    #aboutme, #links{
        padding:10px;
    }
    #copyright{
        text-align:center; padding:20px;
    }
    #logo{
        background-size:50% auto;
    }
}

@media (max-height:550px){
    .sectionbox{width:400px;height:120px;}
    .sectionbox-title{font-size:45px;font-weight:bold;}
    .sectionbox-text{font-size:15px;}
    .sectionbox-button{font-size:15px; width:150px; height:40px;margin-top:10px;border-radius:50px;}
    .sectionbox-button:hover{font-size:20px; width:200px; height:55px; margin-top:10px; border-radius:0px; border-top-left-radius:15px; border-bottom-right-radius:15px;}
    #backtop{bottom:5px;}
}