.container{
    display: grid;
    height: 100vh;
    grid-template-columns: 5fr 1fr 1fr 1fr 1fr 1fr 5fr;
    grid-template-rows: .5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "leftfiller nav nav nav nav nav rightfiller"
      "leftfiller content1 exploringtext exploringtext exploring exploring rightfiller"
      "leftfiller photoshoptext photoshoptext project1 project1 project1 rightfiller"
      "leftfiller photoshoptext photoshoptext project1 project1 project1 rightfiller"
      "leftfiller coursesdec coursesdec project1 project1 project1 rightfiller"
      "leftfiller illustratorleft illustratortext illustratortext illustratorright illustratorright rightfiller"
      "leftfiller illustratorleft illustratortext illustratortext illustratorright illustratorright rightfiller"
      "leftfiller logodiagonal img3 img3 img3 medibang rightfiller"   
      "leftfiller logodiagonal img3 img3 img3 medibang rightfiller"
      "leftfiller content2 img3 img3 img3 medibang rightfiller"
}


#leftfiller{
    background-color: rgb(255, 255, 255);
    grid-area: leftfiller;
    opacity: 0;
}

#rightfiller{
    background-color: rgb(255, 255, 255);
    grid-area: rightfiller;
    opacity: 0;
}

nav{
    grid-area: nav;
    margin-bottom: -0.01%;
    grid-row: 1;
}

#content1{
    grid-area: content1;
    grid-row: 2;
    grid-column: 2;

}

#exploringtext{
    grid-area: exploringtext;
    grid-row: 2;
    grid-column: 3;
    margin-left: -33.47%;

}

#exploring{
    grid-area: exploring;
    grid-row: 2;
    grid-column: 4;
    margin-left: -100.2%;

}

#photoshoptext{
    grid-area: photoshoptext;
    grid-row: 3;
    grid-column: 2;

}

#project1{
    grid-area: project1;
    grid-row: 3;
    grid-column: 3;

}

#coursesdec{
    grid-area: coursesdec;
    grid-row: 4;
    grid-column: 2;
    margin-top: -49.85%;

}

#illustratorleft{
    grid-area: illustratorleft;
    grid-row: 5;
    grid-column: 2;
    margin-top: -0%;
    margin-left: -1.9%;

}

#illustratortext{
    grid-area: illustratortext;
    grid-row: 5;
    grid-column: 3;
    margin-top: -.1%;
    margin-left: -33.3%;

}

#illustratorright{
    grid-area: illustratorright;
    grid-row: 5;
    grid-column: 4;
    margin-left: -100%;

}

#logodiagonal{
    grid-area: logodiagonal;
    grid-row: 6;
    grid-column: 2;

}

#medibang{
    grid-area: medibang;
    grid-row: 6;
    grid-column: 4;
    margin-left: -49.8%;
    margin-top: -0.3%;

}

#img3{
    grid-area: img3;
    grid-row: 6;
    grid-column: 3;
    margin-left: -33.3%;

}

#content2{
    grid-area: content2;
    grid-row: 7;
    grid-column: 2;
    margin-top: -50%;

}