/* styles screenshots for each project*/
.projectScreenshot{
    width:100%;
    position:relative;  
}

.projectScreenshot:hover{
    background-color: azure;
}
.screenshot{
    
    width:100%; 
    object-fit:fill;
   
}


.externalLinkIcon{
    position: absolute;
    right:0px;
    top:0px;  
    width: 10%;
}
/* Styles tags for each project */
.tag{
    border: 0.1rem solid lightgrey;
    border-radius: 25%;
    background-color:lightgrey;
    margin-right:1rem;
}


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

}

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



article{
    padding-left: 1rem;
}

/* Indents bullet points */
article ul{
    margin: 1em;
}



/* Sets colour of text for project links to black */
.projectLink{
    color: black; 
}

/* Creates spacing to increase readability */
.headline{
    display: inline-block;
    margin-top: 1em;
}

.date{
    font-family: 'Playfair', 'Courier New', 'Courier', 'monospace';
    padding-left: 2em; /*Creates space to make dates more visible*/
}

/*Makes it easier to process different sections*/
section{
    display: block;
    margin: 1rem;
    border: 0.25em solid black;
    border-radius:5%;
    background-color: rgb(152, 216, 244);

}
section h2{
    background-color: rgb(154, 242, 242);
    border: 0.1em solid rgb(154, 242, 242);
    border-radius:10px;

    margin:0.4em;

}

/* Defines page grid layout */
#pageGrid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 'header header header header header'
                          '. . title . .'
                          'experience experience . projects projects'
                          'volunteering volunteering . projects projects'
                          'cv cv . projects projects'
                          'footer footer footer footer footer';
}

header{
    grid-area: header;
}

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

#experience{
    grid-area: experience;
}

#projects{
    grid-area: projects;
}

#volunteering{
    grid-area: volunteering;
}

#cv{
    grid-area: cv;
}

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