/* style.css */
body {
    display: flex;
    flex-direction: column;
}

.header { /* header is the blue bar at the top of the page */
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    padding: 20px 30px 10px;
    gap: 130px;
}

.logo { /* logo is the image of Toronto skyline */
    margin-left:20px;
     height: 100px;
    width: 10%;
    padding: 5px;
    border-radius: 50%;
    
}

.header-links { /* header links are the links in the blue bar */
    margin-right: -10px;
}


.header,
.intro, 
.footer { /* assigning header, intro, and footer the same colors */
    background-color: #1f2937;
    color: white;

}


ul { /* ul are all the unordered lists including the links and the projects */
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 16px;
}

.header ul { /* ul in the header */
    padding-right:40px;
}

.header a { /* links in the header */
    font-size: 18px; 
}


.secondary-intro-text { /* text under the title that welcomes the reader*/
    color: #E5E7EB;
    max-width: 400px;
    margin-top: 0;
}

.intro { /* intro is the section that has the title and the Linkedin image*/
    display: flex;
    justify-content: center;
    padding: 10px 10px 25px;
    gap: 100px;
}

.title { /* title is the name of the page - My Portfolio */
    color: #F9FAF8;
    font-size: 48px;
    font-weight: extra bold;
    margin-bottom: 0;
}


.intro-image { /* intro image is the Linkedin image of me */
    width: 35%;
    height: auto;
}



.linkedin-button, .github-button { /* common button styles */
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    background-color: #3882F6;
    padding: 10px 35px;
    border-radius: 10px;
    font-size: 17px;
}

.project-header { /* header for the projects section */
    font-size: 32px;
    text-align: center;
    font-weight: bolder;
    padding: 30px 20px 20px;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.project-pictures { /* pictures of the projects */
    border: 5px solid #3882F6;
    border-radius: 25px;
    width: 200px;
    height: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.project-description { /* description of the projects */
    font-size: 18px;
    text-align: center;
    padding: 20px;
    margin: 0;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.project-section { /* section that contains the projects */
    justify-content: center;
    padding: 20px 50px 50px;
}

.link-box { /* blue box that has github link button */
    background-color: #3882F6;
    display: flex;
    border-radius: 5px;
    margin: 40px 150px;
    padding: 40px;
    justify-content: space-around;
    align-items: center;
    color: white;
    /* gap: 10px; */
}

.about-me { /* about me section */
    background-color: #E5E7EB;
    font-size: 24px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: oblique;
    color: 1f2937;
    padding: 50px 250px;
    /* margin: 50px; */
    
}

.footer{ /* footer is the section that has my name */
    display: flex;
    justify-content: center;
    align-items: center; 
}

a { /* links  style*/
    text-decoration: none;
    color: white;
}


.github-button { /* github button specific style*/
    border: 2px solid white;
    padding: 8px 25px;
    
}

.link-header { /* header for the blue box */
    font-size: 20px;
    font-weight: bold;
    padding: 0;
    margin: 0;
    margin-bottom: 4px;
}

.link-directions{   /* directions for the blue box */
    padding: 0;
    margin: 0;
    font-size: 14px; 
}


#flashcard-phone 
{
    width: 130px;
    height: 200px;
}