/* .content class, handle the entiere right side of the page */
.content {
    grid-area: content;
    background-color: transparent;
    /* set background opacity to 20% */
    position: relative;
    height: 100%;
    width: 100%;

    /* disable scrolling */
    overflow: hidden;
}

.content section {
    transition: opacity 0.3s ease-in-out;
}

/* About section, the first one of the page */
.simple-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    flex-wrap: wrap;

    overflow-x: visible;
    gap: 0.5rem;

    font-size: 100%;
    background: transparent;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;

    width: 80%;
    height: auto;
    margin: 5rem;
    margin-bottom: 0rem;
    margin-top: 0rem;
    margin-left: 1rem;
    padding: 3rem;
    padding-bottom: 0rem;
    padding-top: 1rem;
}

.simple-container-title {
    display: block;
    position: relative;
    color: var(--color-primary_text_title-darkmode);
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0.15rem 0.10rem 0.10rem rgba(0, 0, 0, 0.835);
    width: auto;
    /* add a text border */
    z-index: 1;
    overflow-x: visible !important;
}

.simple-container-content {
    display: block;
    color: var(--color-primary_text_global-darkmode);
    font-size: 1.30rem;
    font-weight: 400;
    text-align: left;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    z-index: 1;
}


/* About section, the first one of the page */
.about-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    flex-wrap: wrap;

    overflow-x: hidden;
    gap: 0.5rem;

    font-size: 100%;
    background: transparent;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;

    width: 80%;
    height: auto;
    margin: 5rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    margin-left: 1rem;
    padding: 3rem;
    padding-bottom: 1rem;
}

.about-title {
    display: block;
    position: relative;
    color: var(--color-primary_text_title-darkmode);
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0.15rem 0.10rem 0.10rem rgba(0, 0, 0, 0.835);
    /* add a text border */
    z-index: 1;
}

.about-content {
    display: block;
    color: var(--color-primary_text_global-darkmode);
    font-size: 1.30rem;
    font-weight: 400;
    text-align: left;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Information Block, this a rectangle located in the content area, he can be hovered and clicked, he contain a title, and a description */
/* These blocks are generated by the javascript file */
/* The size is 80% (width) of the content area */
/* The height is proportional, cause the content area is scrollable */
/* The margin is 10% (width) of the content area */
/* The padding is 5% (width) of the content area */
/* The border radius is 1rem */
/* The background color is nothing, the border is the title color */
/* The title is left aligned, the font size is 2rem, the font weight is 700, the text shadow is 0 0.5rem 1rem rgba(0, 0, 0, 0.5) */
.blocks-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    overflow-x: hidden;
}

.information-block {
    width: 80%;
    height: 90%;
    margin: 2.0rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: 1rem;
    padding: 5%;
    padding-top: 1rem;
    padding-bottom: 0.8rem;
    border-radius: 0.3rem;
    background-color: transparent;
    border: 0 solid var(--color-primary_text_title-darkmode);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;

    overflow: hidden !important;
}

.information-block:hover {
    cursor: default;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
    /* change the background color in hover */
    background-color: var(--color-primary_background_hover-darkmode);
}

/* when the hover is done, restore the initial state */
.information-block:hover:not(:hover) {
    box-shadow: none;
    background-color: transparent;
}

.information-block-title {
    display: block;
    color: var(--color-primary_text_title-darkmode);
    font-size: 2rem;
    font-weight: 700;
    text-align: left;
    margin-bottom: 0.10rem;
    margin-top: 0.15rem;
    /* text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); */
}

.information-block-description {
    display: block;
    color: var(--color-primary_text_global-darkmode);
    font-size: 1.5rem;
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;
    font-weight: 400;
    text-align: left;
}

.information-block-description a {
    color: var(--color-primary_text_global-darkmode);
    font-size: 1.5rem;
    font-weight: 400;
    text-align: left;
}

.information-block-description a:hover {
    color: var(--color-primary_text_title-darkmode);
    font-size: 1.5rem;
    font-weight: 400;
    text-align: left;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

.information-block-year {
    display: block;
    color: var(--color-primary_text_global-darkmode);
    font-size: 1.15rem;
    font-weight: 400;
    text-align: left;
}

.information-block-details {
    display: block;
    color: var(--color-primary_text_details-darkmode);
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 0.5rem;
    text-align: left;
    overflow-y: visible !important;
}

.information-block-start_date {
    /* display as the same place of the year one */
    display: block;
    position: inherit;
    color: var(--color-primary_text_details-darkmode);
    font-size: 0.8rem;
    font-weight: 400;
    margin-top: 0.0rem;
    top: 0.2rem;
    text-align: left;
}

.information-block-end_date {
    /* display at the very end of the max height div, like a footer */
    display: block;
    position: inherit;
    color: var(--color-primary_text_details-darkmode);
    font-size: 0.8rem;
    font-weight: 400;
    bottom: -0.2rem;
    text-align: left;

    z-index: 100;
}


/*
    LINEAR PROGRESS :

    The goal is to create a vertical progress bar based on two date (start and end) and the current date (today).
    The progress bar will be a rectangle, with a width of 1rem, and a height of 100% of the information block.
    The progress bar will be located on the left of the information block.
    To show the progress, the bar will be larger where completed, and smaller where not completed.
    The progress bar will be a gradient, from the top to the bottom, the color will be the same as the title.
*/

.linear-bar-placer {
    width: 100%;
    display: block;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: start;
    flex-wrap: wrap;

    overflow: visible;
}

.linear-bar-container {
    width: auto;
    display: block;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: visible;
}

.linear-bar-big {
    width: 0.5rem;
    height: 0rem;
    border-radius: 0.3rem;
    background: linear-gradient(
        180deg,
        var(--color-primary_text_title-darkmode) 0%,
        var(--color-primary_text_title-darkmode) 100%
    );
    overflow: visible;

    transition: height 0.5s ease-in-out;
}

/* create a dotted bar */
.linear-bar-dotted {
    width: 0.20rem;
    height: 20rem;
    border-radius: 10rem;
    background: linear-gradient(
        180deg,
        var(--color-primary_text_title-darkmode) 0%,
        var(--color-primary_text_title-darkmode) 100%
    );
    background-size: 20rem 1.5rem;
    background-image: radial-gradient(
        transparent 85%,
        var(--color-primary_text_title-darkmode) 80%
    );
    overflow: visible;
    transition: height 0.5s ease-in-out;
}

.linear-rounded-dot {
    width: 1.25rem;
    height: 0.0rem;
    border-radius: 10%;
    background: linear-gradient(
        180deg,
        var(--color-primary_text_title-darkmode) 0%,
        var(--color-primary_text_title-darkmode) 100%
    );
    transition: height 0.1s ease-in-out;
    margin-top: -0.5rem;
    margin-bottom: -0.75rem;
    z-index: 3;
}

.linear-data-container {
    width: 80%;
    height: 99%;
    display: flex;
    /* allow element of the flex box to take 100% of the height */
    position: relative;

    flex-direction: row;
    justify-content: left;
    align-items: start;
    overflow: hidden;
    transition: height 0.5s ease-in-out;
}

.linear-data-container .information-block {
    /* parent is 'relative', so we can use absolute here */
    position: absolute;
    height: auto;
    width: 90%;
    margin: 0 auto;
    margin-left: 1.5rem;
    padding-left: 0.5rem;
}

.linear-data-container .linear-bar-placer {
    margin-right: 0;
    padding-right: 0;
    width: auto;
    height: auto;
}

.linear-data-container .information-block-end_date {
    position: absolute;
}

/* ---------------------------- */
/* ----- SKILS ICONS PART ----- */
/* ---------------------------- */

.skills-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* allow max 4 elements per row */
    max-width: 70%;

    margin: 0 auto;

    overflow-x: hidden;
}

.flex-left {
    justify-content: left;
    align-items: center;
    max-width: 100%;
    margin-top: 0.5rem;
}

.skill-box {
    /* a skill box is located into the skills-container, and contain an skill-icon and an skill-title under the icon */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    justify-content: center;
    align-items: center;

    max-width: 4rem;
    max-height: 4rem;
    margin: 0.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;

    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
        background-color 0.2s ease-in-out;
}

.skill-box:hover {
    cursor: pointer;
    /* change the background color in hover */
    opacity: 1;

    /* edit child .skill-title properties */
    .skill-title {
        color: var(--color-primary_text_title-darkmode);
        opacity: 1;
    }
    transform: scale(1.05);
}

.skill-title {
    display: block;
    position: relative;
    color: var(--color-primary_text_title-darkmode);
    font-size: auto;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    color: var(--color-primary_text_title-darkmode);
    opacity: 0.75;
    z-index: 1;

    transition: opacity 0.1s ease-in-out, transform 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.skill-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    background-color: transparent;
    border: 0 solid var(--color-primary_text_title-darkmode);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.skill-closer {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}