html {
    scroll-behavior: smooth; /*for navigation bar*/
}

body{
    background-color: #E9F1DA;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
}

.section-title{
    color: black;
    font-size: 44px;
    font-family: "Outfit", Arial;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    margin: 5px;
}

/*navigation bar*/
.navigation-bar-item{
    text-align: center;
    font-family: "Outfit", Arial;
    font-weight: bold;
    text-decoration: none;
    color: #6a6d65;
    font-size: clamp(14px, 2vw, 18px); /*font-size can shrink (if webpage shrinks or on smaller screen) (14px min, 18px max)*/
    padding: 5px;
}

.navigation-bar-item:hover{
    color: #909588;
    cursor: pointer;
}

.navigation-bar{
    position: sticky; /*stays at same position as you scroll*/
    top: 20px;

    width: min(90%, 700px); /*width is responsive, makes width the smaller value: 90% of screen size or 700px*/
    height: auto;
    padding: 10px;
    background-color: #CCD3C0;
    border-radius: 50px;
    opacity: 80%;

    margin: 0 auto; /* horizontally centers the bar on webpage*/
    row-gap: 5px; /*gap between rows when text wraps*/ 
    /*gap between each item in a row: */
    column-gap: clamp(10px, 5vw, 50px); /*dynamic gaps, 10px is minimum, 50px is max*/

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}   

/*intro section*/
.intro-section{
    /* background-color: #E9F1DA; */

    display: flex;
    flex-direction: column;
    align-items: center; /*items at center of page*/
    padding-top: 40px;
}

.intro-line, .skills-line{ /*decorative line*/
    width: 158px;
    height: 8px;
    background-color: #99A091;
    border-radius: 10px;
    margin: 10px 0; /*space above and below*/
    border: none;
}

.my-picture{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover; /*image doesn't get warped*/
    overflow: hidden; /*excess is hidden*/
    margin-top: 40px;
    margin-bottom: 20px;
}

.intro-bio{
    font-family: "Roboto", Arial;
    text-align: center;
    font-size: 20px;
    margin: 20px;
    display: flex;
    width: 70%;
}

.contact-icons-group{
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

.square-github,
.linkedin,
.email {
    position: relative; /*each icon is a container (can stack images in it)*/
    width: 40px;
    height: 40px;
    margin: 5px;
    display: inline-block; /*sit side by side */
    cursor: pointer;
}

/*styling image inside each container (when hover, colour should change, which is an image swap)*/
.square-github img,
.linkedin img,
.email img {
    position: absolute; /*puts both images on top of each other in container*/
    width: 100%; /*image fills container*/
    height: 100%;
    transition: opacity 0.3s ease; /*smooth fade when hover in and out of image*/
}

/*hide second image by default until hover*/
/*Note: selector:nth-child(n) selects elements based on their order within a parent*/
/*.square-github img:nth-child(1) selects first img inside .square-github*/
.square-github img:nth-child(2),
.linkedin img:nth-child(2),
.email img:nth-child(2) {
    opacity: 0;
}

/*when hover, switch images*/
/*when hover, first image fades out*/
.square-github:hover img:nth-child(1),
.linkedin:hover img:nth-child(1),
.email:hover img:nth-child(1) {
    opacity: 0; 
}
/*when hover, second image fades in*/
.square-github:hover img:nth-child(2),
.linkedin:hover img:nth-child(2),
.email:hover img:nth-child(2) {
    opacity: 1;
}

/*projects section*/
.projects-section{
    background-color: #F9FAF4;
    display: flex;
    flex-direction: column;
    align-items: center; /*items at center of page*/
    padding: 45px 10px;
}

.projects-line, .education-line{
    width: 158px;
    height: 8px;
    background-color: #DDAFB2;
    border-radius: 10px;
    margin: 10px 0; /*space above and below*/
    border: none;
}

.project-cards-holder{
    margin: 40px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.project-card{
    width: clamp(180px, 70vw, 1100px);
    background-color: white;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0px 5px 6px rgba(188, 188, 188, 0.5);

    display: flex;
    flex-direction: row;
    align-items: center; /*center horizontally (in each row)*/
    justify-content: flex-start;
    gap: 40px; /*gap between picture and info*/
    flex-wrap: wrap;

    transition: transform 0.3s ease; /*smooth scaling for hover effect*/
}

.project-card:hover{
    transform: scale(1.02); /* grow by 2% */
}

.project-picture img{
    width: clamp(200px, 30vw, 360px);
    height: clamp(115px, 20vw, 200px);
    border-radius: 10px;
    border-style: solid;
    border-width: 5px;
    border-color: #FED6D7;
}

.project-info-container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

.project-name{
    font-family: "Outfit", Arial;
    font-size: clamp(16px, 3vw, 24px);
    font-weight: bold;
    color: #9BA091;
    text-align: left;
    margin-bottom: 10px;
}

.project-tech{
    font-family: "Roboto", Arial;
    font-size: clamp(12px, 3vw, 18px);
    color: #9BA091;
    text-align: left;
    font-weight: bold;
    margin-bottom: 4px;
}

.project-description{
    font-family: "Roboto", Arial;
    font-size: clamp(12px, 3vw, 16px);
    color: #9BA091;
    text-align: left;
    margin-bottom: 8px;
}

.project-buttons-holder{
    display: flex;
    flex-direction: row;
    gap: 26px;
}

.live-button, .github-button{
    background-color: #FED6D7;
    width: 120px;
    border-radius: 50px;
    height: 45px;
    font-family: "Outfit";
    font-size: 18px;
    color: #959691;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 7px; /*gap between symbol and word in each button*/
}

.live-symbol, .github-symbol{
    width: 20px;
    height: 20px;
}

.live-button:hover, .github-button:hover{
    background-color: #FFF5F5;
    color: #fac0c1;
    cursor: pointer;
}

/*skills section*/
.skills-section{
    background-color: #E9F1DA;
    padding: 45px 10px;
    display: flex;
    flex-direction: column;
    align-items: center; /*items at center of page*/
}

.skill-group-holder{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 85%;
    margin: 13px;
    gap: 8px; /*gap between skill title and list of skills*/
}

.skill-type-title{
    color: #9BA091;
    font-family: "Outfit", Arial;
    font-size: 30px;
    font-weight: bold;
    text-align: left;
}

.skills-list-holder{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.a-skill{
    background-color: white;
    color: #DDAFB2;
    font-family: "Outfit", Arial;
    font-size: 24px;
    padding: 10px 20px;
    text-align: center;
    border-radius: 50px;
    box-shadow: 0px 5px 6px rgba(188, 188, 188, 0.5);
    transition: transform 0.3s ease; /* smooth scaling for hover effect*/
}

.a-skill:hover{
    transform: scale(1.03); /* grow by 2% */
    cursor: default;
}

/*education section:*/
.education-section{
    background-color: #F9FAF4;
    display: flex;
    flex-direction: column;
    align-items: center; /*items at center of page*/
    padding: 55px 10px;
}

.education-info-box{
    background-color: #FFF5F5;
    font-family: "Roboto", Arial;
    border-radius: 40px;
    padding: 45px;
    margin: 30px;
    gap: 5px; /*gap between each line of info*/
    box-shadow: 0px 5px 6px rgba(188, 188, 188, 0.5);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;

    width: min(75%, 1100px); /*width is responsive, makes width the smaller value: 90% of screen size or 700px*/
}

.degree-name{
    font-size: clamp(18px, 2vw, 25px); /*font-size can shrink (if webpage shrinks or on smaller screen) (18px min, 25px max)*/
    font-weight: bold;
}

.uni-name, .uni-years{
    font-size: clamp(18px, 2vw, 25px); /*font-size can shrink (if webpage shrinks or on smaller screen) (18px min, 25px max)*/
}

.uni-list{
    font-size: clamp(14px, 2vw, 20px); /*font-size can shrink (if webpage shrinks or on smaller screen) (14px min, 20px max)*/
}

.uni-list-item{
    margin-bottom: 8px;
}

/*footer*/
.footer{
    background-color: #CCD3C0;
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto", Arial;
    font-size: 18px;
    color: #9BA091;
}