/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End of the reset css */

:root {

    /* Using the same colors for all the page */
    --gray: hsl(196, 24%, 88%);
    --blue: hsl(187, 60%, 57%);
    --dark-blue: hsl(191, 76%, 29%);
    --darker-blue: hsl(193, 46%, 14%);

    /* Using the font Lato 400 for all the page */
    font-family: 'LatoRegular';
    font-style: normal;

    /* Initialize number for the thanks page */
    counter-reset: thankslist;
    /* To break large text (like long urls) correctly on mobile */
    overflow-wrap: anywhere;
}

/* The section the is on the top of the page */
header {

    /* It is adapted to the elements that contein */
    height: auto;
    /* Use all the width */
    width: 100%;

}

/* Modifying the elements that are inside the header part */
.headerClass{

    display: grid;
    /* Three parts: 1.Space / 2. The section centered / 3. Space */
    grid-template-columns: 1fr auto 1fr;
    /* Two rows to make the top for the logo and the second for the sections */
    grid-template-rows: auto auto;

}

.logoSection {

    /* The logo section will be on the center */
    grid-column: 2;
    /* The logo section will be on the top */
    grid-template-rows: 1;
    display: flex;
    /* the element will be centered inside the section */
    align-items: center;
    justify-content: center;

}

.logoImage {

    /* marging to the logo for estetic */
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    /* width to make the logo responsive */
    width: 5rem;

}

.internalLinksOnDesktop {

    /* The section links will be centered */
    grid-column: 2;
    /* The section links will be on the bottom of the logo */
    grid-template-rows: 2;
    display: flex;
    /* The elements inside the section will be centered */
    align-items: center;
    justify-content: center;

}

.internalLinks {

    /* Removed the underline on the nav links */
    text-decoration: none;
    /* Using the colors of the pallete of colors */
    color: var(--darker-blue);

}

.sectionOfMobileMenu {

    /* This section display the mobile menu only on mobile so by default is not active*/
    display: none;

}

.sectionOfMobileNavLinks {

    /* The nav links appear only when the menu button on mobile is pressed so by default is not active*/
    display: none;

}

.headerHR {

    /* This is an esthetic line on the top of the articles but on the bottom of the header */
    size: 1rem;
    color: var(--dark-blue);
    /* On mobile you the inside is white by default */
    background-color: var(--dark-blue);
    width: 75%;
    border-style: solid;

}

.futurePostsABSection {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.futurePostsABIntern {
    grid-column: 2;
    /* elements centered */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* To center the h1 */
    text-align: center;
    font-weight: bold;
}

.futurePostsABIntern > p {
    color: var(--darker-blue);
    margin: .25rem 0;
}

.futurePostsABIntern > hr {
    width: 100%;
    color: var(--dark-blue);
    /* On mobile the center color if white by default */
    background-color: var(--dark-blue);
    border-style: solid;
}

.futurePostsABIntern > img {
    width: 8rem;
}

.futurePostsABIntern > h1 {
    margin-top: .5rem;
    color: var(--darker-blue);
    font-size: 1.5em;
    /* limit the width of the text */
    word-wrap: break-word;
    max-width: 75ch;
    /* width: clamp(45ch, 1px,75ch); */
}

/* Separated from divPost to avoid errors when the title is to big */
.headerOfPost {
    /* Background for all the div */
    background-color: var(--gray);
    display: grid;
    /* This will make easier to center the text */
    grid-template-columns: 1fr auto 1fr;

}

/* The div were is the text */
.divpost {

    /* Background for all the div */
    background-color: var(--gray);
    display: grid;
    /* This will make easier to center the text */
    grid-template-columns: 1fr auto 1fr;

}

/* The title of the article */
.headerOfPost > h1 {

    /* Centered element */
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    /* on p is 75ch on h1 it is using 50 to does not be to big */
    max-width: 50ch;
    text-align: center;
    /* Big size for the title */
    font-size: 2em;
    /* a margin fos estetic */
    margin: 1rem;
    /* Diferent color compared with the text */
    color: var(--dark-blue);

}

.headerOfPost > .headerImageOfThePost {
    grid-column: 2;
    /* The following is to center the image */
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    /* The following is to mark the width */
    width: 8rem;
}

/* The title of contact and thanks page*/
.divpost > h1 {

    /* Centered element */
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    /* on p is 75ch on h1 it is using 50 to does not be to big */
    max-width: 50ch;
    text-align: center;
    /* Big size for the title */
    font-size: 2em;
    /* a margin fos estetic */
    margin: 1rem;
    /* Diferent color compared with the text */
    color: var(--dark-blue);

}

/* The subtitle of the article */
.divpost > h2 {

    /* Centered element */
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Big size for the title */
    font-size: 1.75em;
    /* a margin fos estetic */
    margin: 1rem;
    /* Diferent color compared with the text */
    color: var(--dark-blue);
    /* Added an underline to show the difference between sections (h2 and h3 ) */
    text-decoration: underline;

}

/* The sub-subtitle of the article */
.divpost > h3 {

    /* Centered element */
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Big size for the title */
    font-size: 1.75em;
    /* a margin fos estetic */
    margin: 1rem;
    /* Diferent color compared with the text */
    color: var(--dark-blue);

}

/* Text of the article */
.divpost > p {

    /* text centered */
    grid-column: 2;
    /* Max of 75ch to better read */
    width: clamp(45ch, 60ch, 90vw);
    /* Darker to see the text */
    color: var(--darker-blue);
    /* Bigger font size for easy to read */
    font-size: 1.5em;
    /* Margin to each paragraph */
    margin: 1rem;
    /* Centered elements */
    display: flex;
    justify-content: center;
    align-items: center;
    /* line spacing in each line for better readability*/
    line-height: 1.5em;
    /* The text oh the post is justify */
    text-align: justify;

}

/* added "strong" to the strong etiquete */
.divpost > p > strong {
    font-style: italic;
}

/* The image of the posts use the max of the parent element */
.divpost > p > a > img {
    max-width: 100%;
}

/* This is for the references part on the post page */
.divpost > ul {

    /* text centered */
    grid-column: 2;
    /* Darker to see the text */
    color: var(--darker-blue);
    /* Bigger font size for easy to read */
    font-size: 1.5em;
    /* Margin to each paragraph */
    margin: 1rem;
    /* line spacing */
    line-height: 1.5em;
}

/* We declare to enumerate the elements of the list on the post page */
.divpost > ul > li::before {
    /* Changed the color of the elements for mantain the estethic of the page */
    color: var(--darker-blue);
    content: "● ";
}

/* Chnged the text inside a links (because the reset page do not affect this part)*/
.divpost > ul > li > a {
    /* removed the line on the bottom of the page */
    text-decoration: none;
    /* Changed the color to mantain the estetic of the page */
    color: var(--darker-blue);
}

/* This is for the thanks page, the list of the elements of the tools that we use */
/* It is similar to the above code */
.divpost > ol {

    /* text centered */
    grid-column: 2;
    /* Max of 75ch to better read */
    width: clamp(45ch, 60ch, 90vw);
    /* Darker to see the text */
    color: var(--darker-blue);
    /* Bigger font size for easy to read */
    font-size: 1.5em;
    /* Margin to each paragraph */
    margin: 1rem;
    /* line spacing */
    line-height: 1.5em;
    /* Added this so do not overflow all the elements on the page */
    overflow: hidden;

}

.divpost > ol > li::before {
    /* Saved the following code to reset code if it is needed on the future */
    /* counter-reset: listonpost; */
    content: counter(listonpost) ": ";
}

.divpost > ol > li:not(:first-child) {
    margin-top: .75em;
}

.divpost > ol > li {
    counter-increment: listonpost;
}

.divpost .suscriptionButton {
    grid-column: 2;
}

.thankspart > ol > li{

    /* Increment number on the thanks page */
    counter-increment: thankslist;

}

.thankspart > ol > li::before {

    /* Write the number before each element */
    content: counter(thankslist) ". ";

}

/* Small devices/mobile version */
@media screen and (max-width: 600px) {

    /* The HR line use more width on the mobile version */
    .headerHR {
        width: 90%;
    }

    /* The header for the mobile version uses columns to distirbute the logo and the mobile menu */
    .headerClass{
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    .logoSection {
        /* The logo is on the superior left position */
        grid-column: 1;
        justify-content: flex-start;
    }

    .logoImage {
        /* responsive width of the image */
        width: 2rem;
        /* margin for estetic */
        margin-left: 0.5rem;
    
    }
    
    /* The links for desktop version are not displayed on the mobile version */
    .internalLinksOnDesktop {
    
        display: none;
    
    }

    /* The section of the mobile menu is displayed on the superior rigth part */
    .sectionOfMobileMenu {
        grid-column: 3;
        justify-content: flex-end;
        display: flex;
        /* The menu is centered based on the height */
        align-items: center;
        /* margin for estetic */
        margin-right: 1rem;
    }

    /* The button of the mobile menu */
    .menuButton {

        /* estetic changes */
        background-color: var(--darker-blue);
        color: var(--gray);
        border: none;
        font-size: 1.5rem;
    
    }

    /* When the mobile menu is selected the section of movile nav links appear */
    /* With focus-within presing any child mantain the action */
    .mobileMenu:focus-within .sectionOfMobileNavLinks{
        display: block;
        /* Absolute position to make the elements over the rest */
        position: absolute;
        /* Appear on the left part */
        left: 50%;
        /* Use the 50% of the screen */
        width: 50%;
        /* Background to make easy see the text */
        background-color: var(--darker-blue);
    }

    /* Each navifation mobile link */
    .mobilenNavLinks {
        /* Display flex to automatic all the width */
        display: flex;
        /* Contrast color for diferenciate the color from the menu */
        color: var(--gray);
        /* Big font size to make easy to press */
        font-size: 2rem;
        /* margin bottom and  top to make it more esthetic*/
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    /* Text of the post on small devices */
    .divpost > p {
        /* give a margin to the text */
        width: clamp(75%, 75ch, 90%);
        /* font size more big to make easy to read */
        font-size: 1.5em;
    }

    /* This is for the thanks page, the list of the elements of the tools that we use */
    /* It is similar to the above code */
    .divpost > ol {
        /* give a margin to the text */
        width: clamp(75%, 75ch, 90%);
        /* font size more big to make easy to read */
        font-size: 1.5em;
    }

    /* For estetic the copyright notice and the nav elements are in a column */
    .footerClass {
        flex-direction: column;
    }

    /* For esthetic added a margin top from the copyright notice to the legal links */
    .footerClass > p {
        margin-top: 1rem;
    }
    
}

/* Adjusted the text for medium screens */
@media screen and (min-width: 600px) and (max-width: 800px){
    
    /* Text post for medium devices */
    .divpost > p {

        /* It appear natural in the 800 breakpoint */
        max-width: 90vw;
    
    }

    /* This is for the thanks page, the list of the elements of the tools that we use */
    /* It is similar to the above code */
    .divpost > ol {

        /* It appear natural in the 800 breakpoint */
        max-width: 90vw;
    
    }

}

/* List of the posts on the blog (the index page) */
.eachPost {

    /* Same heigth to be equal */
    height: max-content;
    /* Same fontsize on all the screens */
    font-size: 1.5em;
    /* The text is centered */
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    /* It is more readable */
    font-weight: 600;
    /* Uses all the possible space */
    width: 100%;

}

.eachPost img {
    width: 8rem;
    margin-left: 1rem;
}

#postslist li:nth-child(odd) {
    /* To diferenciate each article one will have a gray background and the other no */
    background-color: var(--gray);
}

#postslist li img {
    padding: 1rem 0;
}

#postslist li a {
    /* remove the text decorations of the links and change the color from blue to black */
    text-decoration: none;
    color: #000;
    width: clamp(45ch, 1px,75ch);
    padding: 1rem;
}

#navgationSection {

    /* Same heigth to be equal */
    height: max-content;
    /* Same fontsize on all the screens */
    font-size: 1.5em;
    /* The text is centered */
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    /* It is more readable */
    font-weight: 600;
    /* Uses all the possible space */
    width: 100%;
}

.navigationLi {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.navgationSectionItem {

    text-decoration: none;
    color: #000;
    width: clamp(45ch, 1px, 75ch);
    padding: 1rem;
    text-align: center;

}

/*Div for the service*/

.popup .overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
}

.popup.active .content {
    background-color: red;
    height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 15rem var(--blue);
}

.popup.active .closeButton {
    display: flex;
    justify-content: center;
    padding: 1rem;
    font-size: 2.5em;
}

.iframeCloseButton {
    border-radius: 100%;
    border: 3px solid black;
}

.popup.active .iframeContainer {
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.popup.active .iframeEmelent {
    background-color: var(--gray);
    height: 100%;
}

.popup.active .overlay {
    display: flex;
}

/*Finish the Div for the service*/

/* CSS for the button for the service */

#zuyiDiv{
    grid-column: 2;
}

h4 {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.75em;
    margin: 1rem;
    color: var(--dark-blue);
    text-decoration: underline;
    text-decoration-style: double;
}

h5 {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.75em;
    margin: 1rem;
    color: var(--dark-blue);
    text-decoration: underline;
    text-decoration-style: wavy;
}

#thanks_button {
    grid-column: 2;
    background-color: var(--dark-blue); /* Green */
    border: none;
    color: var(--gray);
    padding: 1em;
    text-align: center;
    text-decoration: none;
    font-size: 1.75rem;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border-radius: 1em;
}
/* End CSS for the button for the service */

/* on the bottom of the page */
footer {
    /* Centered elementes */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Background using the pallete colors */
    background-color: var(--darker-blue);
    /* For statics separate the elements from the bottom */
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    /* Change the color to make ir visible */
    color: var(--gray);
    /* It will use all the available width */
    width: 100%;
}

/* To make the links on the footer visible and estetic */
.internalLinksFooter {
    text-decoration: none;
    color: var(--gray);
}

.floating-share-button-is-not-visible {
    display: none;
}

.floating-share-button {

    /*width and height of the button*/
    width: 4.5rem;
    height: 4.5rem;
    
    /*Background color by default*/
    background-color: var(--dark-blue);
    /*whith this is an cicle*/
    border-radius: 50%;

    /*to move in the page the position is fixed*/
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    /*transition when someone press the button*/
    transition: background 1s;

    /*the cursor change when is over the button*/
    cursor: pointer;
}

.floating-share-button:hover {
    background-color: var(--darker-blue);
}

.svgShareButton {
    /* display: none; */
    fill: var(--darker-blue);
    transition: fill 1s;
}

.floating-share-button:hover .svgShareButton {
    fill: var(--dark-blue);
}