/* Reference: CSS Essentail Training Course on Linkedin Learning */


/* 
COLOR PALETTE

#F7FFF7 - almost white
#343434 - dark gray - almost dark
#2F3061 - blue dark
#FFE66D - yellow
#A1C6D7 - blue light
*/



/* Global styles
------------------------------------------------- */

/* the common settings for many htmls */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: border-box;
}
/*  */
body {
    color: #343434;
    margin: 0;   /* let the body fill the whole page */
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.5;   /* gap between lines */
}

img {
    width: 250px;   /* crop images */
}

a {
    color: #FFE66D;   /* set the color of links */
}

a:hover {  /* pseudo-selector */
    text-decoration: none;   /* if we hover over a, then no underline decoration */
}

h1 {
    font-size: 100px;
    line-height: 1;
    margin-top: 30px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

h2 {
    font-size: 45px;
    margin: 0;
}

h1, h2 {  /* both h1 and h2*/
    font-family: 'Caveat', cursive;
    font-weight: 400;    /* thin, medium, or bold */
}
.content-wrap {
    max-width: 850px;  /* when the width is smaller than max-width, use width */
    width: 95%;     /* 90%80% means it will take 90% width of the whole page. */
    margin: 0 auto;
    padding: 40px 30px;   /* top/bottom: 40px, left/right: 30px */
}

h3 {
    margin-bottom: 0;
}

.item-details h3 + p {   /* all p after h3 */
    font-style: italic;
}

.item-details h3 ~ p {  /* all p that are siblings of h3 */
    margin: 0;
}

.divider > section{ /* all section elements whose parent element is a divider class */
    border-bottom: 1px dashed #343434;        /* add dashed seperating lines */
    padding: 25px 0;     /* add paddings between each section */
}

.divider > section:last-of-type {  /* the last type of section child of divider class*/
    border-bottom: none;  /* for the last item, we don't need the dashed line*/
}


/* Profile Styles
------------------------------------------------- */
header {
    /* background: #2F3061; */
    background-image: url("../assets/images/skate.jpg");   /* use an image as the background */
    background-size: cover;     /* define how the image spans the container */
    background-position: center right;   /* if we shrink the window, always show the center(y-axis) right(x-axis) part */
    color: #F7FFF7;   /* text color */
    padding: 50px;  
}

header p {
    font-size: larger;   /* larger than the default font size: 16px */
}

.nav-bar {
    float: right;   /* let the navigation bar floats on the right side */
}

.nav-bar .button {
    color: #F7FFF7;             /* text color of the navigation buttons */
    font-weight: 700;
    text-decoration: none;      /* no underline decoration */
    padding: 5px;               /* add some space between buttons */
    border-radius: 4px;         /* make the corners round a bit */
    margin: 0;
    display: inline-block;      /* float display: inline-block, not in seperate lines */
    margin-top: 20px;
    margin-right: 20px;
}

.nav-bar .button:hover {
    background: rgba(211,211,211, 80%);   /* when we hover on the button, make the button a bit opaque */
}

/* ------ dropdown styles -------------- */
/* Reference: https://www.w3schools.com/howto/howto_css_dropdown.asp, I have made a few changes to make it look nicer. */

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border-radius: 5px;
min-width: 100px;
text-align: center;
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 6px;
text-decoration: none;
display: block;
border-radius: 5px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Change color of dropdown links on click */
.dropdown-content a:active {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Show the dropdown menu on click */
.dropdown:active .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .button {background-color: rgba(211,211,211, 80%);}



/* Projects Styles
------------------------------------------------- */
.projects {
    background: #F7FFF7;
}

.projects a {
    color: #2F3061;
}

.projects .button {   /* define the styles for the buttons */
    font-size: smaller;
    color: #F7FFF7;
    background: #2F3061;
    text-decoration: none;
    padding: 5px;
    border-radius: 4px;
    margin: 4px 4px;
    display: inline-block;
}

.projects .button:hover {
    background: rgba(47, 48, 97, 80%);
}

.project-item {
    overflow: hidden;   /* if overflow happens, then the overflow is clipped, and the rest of the content will be invisible */
}

.project-item h3 {
    margin-top: 0;
}


#github {                   /* settings for the github button */
    text-decoration: none;
    font-weight: 900;
    padding: 0.5px;
    border-radius: 4px;
    display: inline-block;
    
}

#github:hover {
    background-color: rgba(211,211,211, 50%); 
}

/* Work Experience Styles
------------------------------------------------- */
.work-experience {
    background: #A1C6D7;
}


/* Education Styles
------------------------------------------------- */
.education {
    background-image: url(../assets/images/sharon-mccutcheon-unsplash.jpg);
    background-size: cover;
    background-position: top left;
    padding-bottom: 100px;
}

.education p {
    width: 60%;
}


/* Contact Info Styles
------------------------------------------------- */
footer {
    background: #343434;
    color: #F7FFF7;
}

.contact-list {
    list-style-type: none;      /* dont't show the dots in the beginning */
    padding: 0;
}

.contact-list a {
    padding: 15px;              /* add extra space for the users to click */
    display: inline-block;
}


/* Responsive Styles
------------------------------------------------- */
/* later css can override the previous ones, so we put the media queries at the end */

/* for large viewport */
@media screen and (min-width:750px) {  /* applies to screens whose size is 750 at minimum */
    header, footer {
        text-align: center;
    }

    .project-item img {
        float: left;
        margin-right: 20px;
    }

    .job-item {
        display: grid;                      /* use grid to control the layout */
        grid-template-columns: 1fr 2fr;    /* the first counts 1 portion, and the second counts for two portions. */
        column-gap: 20px;                   /* add gaps between the columns */
    }

    .contact-list {   /* for large sizes, they will layout horizontally, and for small sizes, they will stack, */
        display: flex;                      /* use flex to control the layout */
        justify-content: center;
    }
}

/* for small viewport */
@media screen and (max-width: 749px) { /* applies to screens whose size is 749 at maximum */
    h1 {
        font-size: 65px;            /* when the screen is small, make the font smaller correspondingly */
        line-height: 0.9;
        margin-bottom: 20px;
        /* margin-top: 30px; */
    }

    h2 {
        font-size: 30px;
        line-height: 1;
    }

    .contact-list a {
        padding: 5px;
    }
    
}

@media screen and (max-width: 450px) { /* applies to smart phones */
    .nav-bar .button {
        margin-right: 5px;
        font-size: smaller;
    }

}