/* Use the following three css features in your page:
    CSS Positioning
    CSS Flexbox
    CSS Grid
Your resume should be responsive (looks good, no matter what the display size) and accessible (use good accessibility best practices)
It should include:
    at least one img but may contain as many as you like
    All of your pertinent experience and skills that you’ve built up at Sheridan.
    Anything that you think would help you to get hired by the person looking at the resume.
Feel free to link to other pages and/or sites
The resumes that I find the most impressive will get the most marks.  Remember, however, to only use technologies that we’ve learned in this course!
Please move your resume to the server, .zip your project and submit both the .zip as well as the link to your resume on your server. */

body {
    background-color: antiquewhite;
}

header img {
    position: absolute;
    right: 5%;
    width: 100px;
    text-align: right;
    border: 1px solid;
    border-radius: 50px;
    box-shadow: 0 0 10px 3px;
}

header h1 {
    position: absolute;
    left: 5%;
    top: 20px;
    color: white;
    text-shadow: 0 3px 4px black;
}

header h4 {
    position: absolute;
    left: 5%;
    top: 80px;
    color: white;
    text-shadow: 0 3px 4px black;
}

section h3 {
    border-bottom: 5px solid blue;
    width: 25%;
    color: rgb(68, 68, 68);
}

span {
    color: rgb(181, 99, 0);
}

#city {
    /* removes the dot */
    list-style-type: none;
}

/* before you ask, I might have taken this from somewhere else...
that being the internet. More specifically, here: 
https://stackoverflow.com/questions/7775594/css-list-style-image-size */
#city::before {
    content: "";
    display: inline-block;
    /* Set desired width for the custom marker */
    width: 20px;
    /* Set desired height */
    height: 20px;
    background-image: url(../images/CityImage.png);
    /* Or cover, or specific dimensions */
    background-size: contain;
    background-repeat: no-repeat;
    /* Space between marker and text */
    margin-right: 5px;
    /* Align with text */
    vertical-align: middle;
}

#email {
    list-style-type: none;
}

#email::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../images/EmailImage.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
    margin-top: 5px;
    vertical-align: middle;
}

#number {
    list-style-type: none;
}

#number::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../images/PhoneImage.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
    vertical-align: middle;
}

#LinkedIn {
    list-style-type: none;
}

#LinkedIn::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../images/LinkedIn.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
    vertical-align: middle;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "header header"
        "leftside rightside"
        "footer footer";
    border: 3px solid green;
    box-shadow: 0px 0px 10px 3px;
}

.container header {
    grid-area: header;
    display: flex;
    align-items: center;
    height: 150px;
    gap: 10px;
    padding: 0 20px;
    background-color: blue;
    border: 2px solid orange;
}

.container aside {
    grid-area: leftside;
    padding: 20px;
    background-color: lightblue;
    border: 2px solid coral;

    /* This is the flexbox portion*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.container main {
    grid-area: rightside;
    padding: 20px;
    background-color: lightgreen;
    border: 2px solid coral;
}

footer {
    grid-area: footer;
    text-align: center;
    background-color: lightgray;
    border: 2px solid coral;
    box-shadow: 0px 0px 5px 1px;
}

/* I got this from IC11*/
:root {
    --logo_size: 200px;
    --nav_left_position: 380px;
    --nav_top_position: 80px;
    --nav_header_top_position: 20px;
    --nav_header_left_position: 270px;
}

@media (width<620px) {
    :root {
        --logo_size: 100px;
        --nav_left_position: 5px;
        --nav_top_position: 120px;
        --nav_header_top_position: 5px;
        --nav_header_left_position: 100px;
    }
}