@import "tbe-universal.css";

body {
    background-image: url(../WebsiteImages/BgTiles/BgTile_Mine/Website_BgTile_TbeTrees.png);
    background-attachment: local;
}

                /* PHONE */

@media only screen and (max-width: 480px) {
    .container {
        max-width: 400px;
        display: grid;
        grid-template:
            'tree'
            'introCont'
            'nav'
            'charaDirect'
            'aside'
            'footer';
        gap: 10px;
        place-items: center;
    }
    
    .tree {
        grid-area: tree;
        max-width: 350px;
        margin: auto;
    }
    
    .introCont {
        grid-area: introCont;
        max-width: 350px;
    }
    
    .introText {
        max-width: 100%;
    }
    
    nav {
        grid-area: nav;
        max-width: 350px;
        margin: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    
    .navButton {
        width: 150px;
    }
    
    .charaDirect {
        grid-area: charaDirect;
        max-width: 350px;
    }
    
    main {
        grid-area: main;
        max-width: 100%;
        height: 600px;
        overflow: auto;
    }
    
    aside {
        grid-area: aside;
        max-width: 350px;
        background-color: black;
        border: 4px solid white;
        padding: 10px;
    }
    
    .titlecard {
        width: 100%;
    }
    
    footer {
        grid-area: footer;
        max-width: 350px;
    }
}

/* DELETE LATER


*/