/* First and Last name styles

Styles needed to make text center and larger.

*/

.CoverFnameLname
{
    text-align: center;
    font-size: 2em;
}

/* Contact information styles

Styles needed to keep links aligned and to the edges of div.

*/

.contact-info1
{
    display: flex;
    justify-content: space-between;
    width: 50%;
}



.contact-info div
{
    flex: 1;   
}

.toEdge
{
    text-align: right;
}

/* Body Align Styles

Styles needed to keep the format of the body.

*/

.Align-Body
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1%;
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
    border-bottom: 2px solid whitesmoke;
    border-top: 2px solid whitesmoke;
    border-left: 2px solid whitesmoke;
    border-right: 2px solid whitesmoke;
    border-radius: 2px;
    background-color: whitesmoke;
}

body
{
    background-color: lightgrey;
}
/* Summary Styles

Styles needed to keep aligned within body width, and keep under summary header style.

*/

.summary-header
{
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 50%;
}

.summary-exp
{
    display: flex;
    flex-direction: column;
    align-items: left;
}

/* Education Styles

Styles needed to display colleges attending and attended, to display lists at equal side by side positioning.

*/

.education-header
{
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 50%;
}

.Studys-paragraph
{
    margin-top: -10px;
}

.course-work
{
    display: flex;
    flex-direction: column;
    align-items: left;
}

.course-columns
{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.course-columns ul
{
    flex:1;
    padding-left: 15%;
}

/* Experience Styles

Styles needed to keep page organized with bullet points, along with the date on the oposite side of the wording.

*/

.experience 
{
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    width: 50%;
    gap: 10px; 
}

.experience p 
{
    margin: 0; 
}

.place 
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.work-info
{
    flex: 1;
}

.date-worked
{
    text-align: right;
    flex: 0;
}

.date-worked2
{
    /* Nothing required */
}

/* Achievements and Activites Styles

Styles needed to align header to left and keep list organized within div below

*/

.achievements
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
}

.activites
{
    margin: 0;
}

.link-to-game
{
    text-decoration: none;
}

/* Image Styles

Styles needed to keep images aligned and text below.

*/

.img-styles
{
    height: 275px;
    width: 150px;
}

.img-styles2
{
    height: 275px;
    width: 200px;
}

.Image-format
{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}


/* Media Styles

Styles needed to......

*/


/*  Larger Phone/Tablet/Laptop Styles

Larger phone sizes and laptops

*/
@media (min-width: 768px)
{
    .Align-Body
    {
        width: 70%; 
    }
}

/* Phone Styles

Styles for Small Screens

*/
@media (max-width: 767px)
{
    .Align-Body,
    .summary-header,
    .education-header,
    .achievements,
    .experience
    {
        width: 90%; 
        align-items: center; 
    }

    .contact-info1
    {
        display: flex;
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
    }

    .align-info
    {
        text-align: center;
    }

    .info
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .toEdge
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .course-columns
    {
        flex-direction: column; 
        gap: 10px; 
    }

    .course-columns ul
    {
        padding-left: 5%; 
    }

    .place
    {
        flex-direction: column; 
        align-items: flex-start; 
    }

    .date-worked
    {
        margin-top: 5px; 
        text-align: left; 
    }

    .Image-format
    {
        flex-direction: row; 
        justify-content: center;
        gap: 15px; 
    }

    .img-styles,
    .img-styles2
    {
        height: auto; 
        width: 30%; 
    }
}