/***********************************
************************************
    Global Reset
************************************
***********************************/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sometype+Mono:wght@400;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");

/*========Page Display=========*/

body {
    min-height: 100vh;
    background-color: #e1dfde;
}

/*========Navigation Bar=========*/

#navbar {
    font-family: 'Poppins', sans-serif;
    padding-top: 80px;
    padding-bottom: 80px;
    align-items: normal;
}

/* set resume button on end */
#resume-btn {
    position: relative;
}

/*========Footer=========*/
#footer {
    padding-top: 80px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000;
}

/* my name shown on small screens */
@media screen and (max-width: 460px) {
    #my-name:before {
      content: "@YW Miao";
    }
  }

/* my name shown on big screens */
@media screen and (min-width : 461px) {
    #my-name:before {
        content: "@Yanwei Miao";
    }
}

/* set cursor of back to top button */
#top-btn {
    cursor: pointer;
}

/* set space between social icons */
.social-account  i {
    margin-left: 20px;
}

/*========Fonts=========*/

/* project title in project page */
h1 { 
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 60px;
    line-height: normal;
    color: #000;
}

/* text on About card in homepage */
h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: normal;
    color: #000;
}

/* get to know me more button in homepage & emphasized text in project page */
h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    color: #000;
}

/* name of project in homepage */
h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #000;
}

/* subtitles in project page */
h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    color: #000;
    opacity: .4;
}

/* descriptive text */
p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #000;
}

/* caption of image */
#caption {
    font-family: 'Sometype Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #000;
    opacity: .6;
    text-align: center;
    text-transform: uppercase;
    margin-top: 1rem; 
}

/*========Mark=========*/
/* 50% transparent color */
mark { 
    background-color: #A8CBC180; 
    border-radius: 4px;
}

/*========Links=========*/

/* remove link style */
a {
    color: #000;
    text-decoration: none;
}

/*========Buttons=========*/

/* outlined button */
.btn { 
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    padding: 10px 20px;
    color: #000;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-radius: 40px;
    background-color: transparent;
    height: max-content;
}

/* outlined button when hover */
.btn:hover {
    color: #fff;
    background-color: #000;
}

/* text button */
.text-btn {
    display: inline-block;
    position: relative;
}

/* text button hover animation */
.text-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #000;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

/* text button hover animation */
.text-btn:hover::after {
    transform: scaleX(0);
    transform-origin: bottom left;
}

/*========Bootstrap Style Reset=========*/

/* remove default styles of Bootstrap card */
.card {
    border: none;           /* no border line for all cards */
    --bs-card-spacer-y: 0;  /* align text from the y0 of the card */
    --bs-card-spacer-x: 0;  /* align text from the x0 of the card */
    --bs-card-bg: none;     /* remove the default background color of Bootstrap card */
}

/* remove default padding in Bootstrap card footer */
.card-footer {
    padding: inherit;
}