@import url(/Style-Framework.css);

main {
    display: grid;
    grid-template-areas: 
        'Band Band'
        'PfP CenterWindow'
        'LeftWindow CenterWindow'
        '. CenterWindow';
    /*gap: 10px;*/
    column-gap: 10px;
    grid-template-columns: 15% 40%;
    /*padding: 8px;*/
    /*margin: 0% 15% 0% 15%;*/
    justify-content: center;
    justify-items: center;
}

#PageBand {
    grid-area: Band;
    width: 100%;
    max-width: none;
}

#PfP {
    grid-area: PfP;
    width: 15vw;
}

/*-----------------Left Window css-----------------*/

#LeftWindow {
    grid-area: LeftWindow;
    width: 100%;
}

/*#CoolLinksWindow {
    grid-area: CoolLinks;
    width: 10vw;
}*/

#SiteLinks {
    grid-area: SiteLinks;
    max-width: none;
    width: 100%;
}

#LeftWindow > .content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#LinksandButtons {
    text-align: center;
}

#Buttons {
    text-align: center;
    /*grid-area: Buttons*/
}

/*-----------------Center Window css-----------------*/

#CenterWindow {
    grid-area: CenterWindow;
    width: 100%;
}

/*#BioAboutWindow {
    grid-area: BioAbout;
    max-width: 30vw;
}*/

/*#BlogWindow {
    grid-area: Blog;
    width: 30vw;
}*/

/*#ToDo {
    grid-area: ToDo;
    width: 10vw;
}*/

#ToDo ul {
    padding-left: 30px;
}

/*#ProjectsWindow {
    grid-area: Projects;
}*/

#Blog {
    max-height: 40vh;
    overflow-y: scroll;
    scrollbar-width: none;
}


@media (max-width: 1024px) {
    main {
        grid-template-areas: 
        'Band'
        'PfP'
        'LeftWindow'
        'CenterWindow';
        grid-template-columns: 70%;
        justify-items: center;
    }
/*
    main > .window {
        width: 70%;
    }*/
}