* {
    margin: 0px;
}

/*For the header & title*/
.flex-header {
    display: flex;
    background-color: rgb(62, 12, 109);
    width: 100%;
    height: 50px;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px; /*fixed Q1: delete left and right padding, only top and bottom. Because left and right padding will increase the entire width and let it go beyond the frame*/
    position: fixed;
    z-index: 3;
}

.flex-header > div {
    display: flex;
    color: white;
    padding: 5px;
    font-family: 'Gabarito', sans-serif;
    font-size: 1.8rem;
    margin-left: 10px;
    margin-right: 10px;
}

/* new: stylize the log out link*/
.flex-header > div a {
    color: white;
}

.flex-header > div a:hover {
    text-decoration: underline;
    color: rgb(0, 106, 255);
}

main {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    background-color: rgba(226, 226, 226, 0.489);
}

.grid-title {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 560px;
    gap: 20px 60px;  /*gap: row-gap column-gap*/
    background-image: url('assets/pet-bkg.png'); 
    background-size: cover;
    background-position-x: center;
    margin-top: 70px;
}

.grid-title > div {
    padding: 20px;
    text-wrap: wrap;
}

.title {
    grid-row: 1 / 4;
    font-family: 'Permanent Marker', cursive;
    color: white;
    text-shadow: 4px 4px black;
}

.main-title {
    font-size: 4rem;
}

.sub-titile {
    font-size: 1.8rem;
}

.guide-box {
    width: 200px;
    height: auto;
    text-align: center;
    font-family: 'Gabarito', sans-serif;
    font-size: 1.8rem;
    color: rgba(0, 0, 0, 0.9);
    background-color: white;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5); /*shadow of the background: horizontal offset, veritical offset, blurriness, shadow color*/
    border-radius: 20px;
}

.guide-box a {
    text-decoration: none;
    color: black;
}

.guide-box:hover {
    border: 2px solid rgb(62, 12, 109);
    border-radius: 20px;
    cursor: pointer;
}

/* For the main content */
h2 {
    width: 100%;
    font-family: 'Gabarito', sans-serif;
    font-size: 2rem;
    padding: 10px;
    padding-left: 40px;
    background-color: rgb(62, 12, 109);
    color: white;
    letter-spacing: 0.1rem;
}

.flex-for-PE {
    display: flex;
    flex-wrap: wrap;
    /* grid-template-columns: auto auto; */
    width: 70%;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 20px;
    align-items: stretch;
}

.row {
    display: flex;
    width: 100%;
    border: 2px solid #c4c4c4;
    border-radius: 10px;
    overflow: hidden;
    background-color: white;
    box-shadow: 5px 5px 10px rgba(67, 67, 67, 0.5);
}

.col-1 {
    width: 120px;
    border-right: 2px solid #c4c4c4;
}

.label {
    padding: 35px 0;
    text-align: center;
    /* background-color: blueviolet; */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: rgb(88, 21, 151);
    font-size: 1.3rem;
}

/*Q3. How to scale the .label div up to the whole area left in .col-1 div subtracted 
the image area?
Prob Descrip:
I actually wanna change the background color from white to blueviolet of where the label text
exists. However, when I activate 'background-color: blueviolet;', the background color only 
applies to part area, not the whole area below the image. I know that's because the label 
area's height is not defined so it just takes what the font size and padding need to take, 
but since I cannot get the height of the area below the image, I do not know what value to 
set to .label height.
*/

.col-2 {
    overflow: hidden;
    padding: 30px;
}

p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sign {
    font-family: 'Gabarito', sans-serif;
    font-size: 1.2rem;
    color: rgb(88, 21, 151);
    font-weight: bold;
}

.example {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    overflow: hidden;
}

/*Q4. How to make the 'row gap' 0 but 'column gap' still 50px for the flexbox layout in 
.example?
Prob Descrip:
I made the .example flexbox layout with 50px gap to ensure the list of dog breeds won't 
overlap and stay in one line. But if narrowing the window size, the list will wrap and 
the 50px gap also applies to their gap between each 'row', while I don't want it.
*/

.row:hover {
    border: 2px solid rgb(62, 12, 109);
    border-radius: 10px;
    cursor: pointer;
}

.flex-for-PA {
    margin: auto; /* another way of centering the images and texts inside the flexbox (when the width of flexbox is 100%)*/
    display: flex;
    gap: 30px;
    align-items: stretch;
    flex-wrap: wrap;
}

.image {
    border: 1px solid #c4c4c4;
    border-radius: 20px;
    width: 144px;
    overflow: hidden;
    background-color: white;
    box-shadow: 5px 5px 10px rgba(67, 67, 67, 0.5);
}

.image:hover, .image-side:hover { 
    border: 1px solid rgb(62, 12, 109);
    cursor: pointer;
}

.desc {
    padding: 15px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.name {
    font-size: 1.5rem;
    color: rgb(88, 21, 151);
}

.image-side {
    display: flex;
    align-items: center;
    text-align: center;
    width: 144px;
    height: 100%;
    background-color: blueviolet;
    border-radius: 20px;
    box-shadow: 5px 5px 10px rgba(67, 67, 67, 0.5);
}

.image-side h3 {
    color: white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
}

.flex-for-PLC {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 70%;
    margin: auto;
}

.flex-for-PLC p {
    text-align: center;
    font-size: 1.1rem;
    margin: 30px;
    line-height: 30px;
}

input[type=button] {
    font-family: 'Gabarito', sans-serif;
    font-size: 1.5rem;
    background-color: blueviolet;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 150px;
}

input[type=button]:hover {
    background-color: rgb(88, 21, 151);
}

.vertical-nav {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    width: 20%;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f3c677;
    box-shadow: 0px 10px 10px rgba(67, 67, 67, 0.5);
}

.vertical-nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
}

.vertical-nav > ul > li a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
}

.vertical-nav > ul > li a:not(.active) {
    color: black;
}
  
.vertical-nav > ul > li a:hover:not(.active) {
    background-color: #ffe8c1;
    color: black;
}

.vertical-nav h3 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    background-color: #0c0a3e;
    color: white;
    padding: 20px;
}

.post-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
}

.post-title a:hover {
    text-decoration: underline;
}

.date {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    color: #4F4F4F;
    border-bottom: 1px solid black;
}

.grid-for-PLC {
    display: grid;
    grid-template: auto auto auto auto / auto auto;
    width: 100%;
    height: auto;
    background-color: white;
}

.grid-for-PLC h3 {
    grid-column: 1 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2rem;
    font-weight: bold;
    padding: 30px;
}

.questions-group1 li, .questions-group2 li {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 50px;
}

.questions-group1 li a, .questions-group2 li a {
    color: black;
    text-decoration: none;
}

.questions-group1 li a:hover, .questions-group2 li a:hover {
    text-decoration: underline;
    font-style: italic;
}

/*For the footer*/
.flex-footer {
    display: flex;
    background-color: rgb(62, 12, 109);
    height: 300px;
    align-items: center;
    justify-content: space-between;
}

.flex-footer > div {
    font-family: 'Gabarito', sans-serif;
    color: white;
    font-size: 2.2rem;
} 

.credit {
    display: flex;
    font-family: 'Gabarito', sans-serif;
    color: white;
    height: 30px;
    background-color: rgb(62, 12, 109);
    justify-content: center;
    align-items: center;
}