#myname{
    font-family: 'Comfortaa', 'Courier New', 'Courier', 'monospace';
    padding-top:1rem;
    color:white;
    font-size: 2rem;

}

article{
    display: block;
    margin: 1em;
    border: 0.25em solid black;
    transition: margin 1s;
    border-radius:0.3em;
   
}

a{
    text-decoration:none; /*Gets rid of underline of links*/
}


/*Styles the title of the page*/
#title{
    text-align: center;
    text-decoration: underline;
    padding: 1rem;
    font-size: 2rem;
    grid-area: title;
}


/* styles skills grid, defining columns and grid areas*/
#pageGrid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 'header header header header header'
                        '. . title . .'
                        '. python . java .'
                          '. html . css .'
                          '. js . php .'
                          '. git . github .'
                          'footer footer footer footer footer';
}

header{
    grid-area: header;
}

footer{
    grid-area: footer;
    background-color: rgb(0, 179, 255); 
}
#python{
    grid-area: python;
}

#java{
    grid-area: java;
}

#html{
    grid-area: html;
}

#css{
    grid-area: css;
}

#js{
    grid-area:js;
}

#php{
    grid-area:php;
}

#git{
    grid-area: git;
}

#github{
    grid-area: github;
}

#javaImage, #htmlImage, #cssImage, #gitImage, #githubImage, #jsImage #phpImage{
    width:50%;
}

#pythonImage{
    width: 70%;
}
#githubImage{
    background-color: black;
}