@import 'colorsJM.css';

.ListContainer {
    width: 80%; /* Takes 80% of the parent's width */
    margin: 0 auto; /* Centers the container */
}

.ListEntry {
    width: 100%; /* Takes full width of its parent */
    display: block; /* Lays out children in a row */
    margin-bottom: 1em; /* Adds space between entries */
    position: relative; /* Set the parent position to relative */
    overflow: hidden; /* Optional: hides the overflowing part of pseudo-elements */
    background-color: var(--colorCA);
}



    .ListEntry::before,
    .ListEntry::after {
        content: '';
        position: absolute; /* Change to absolute positioning */
        border: 0.5em solid transparent;
        box-sizing: border-box;
    }

    .ListEntry::before {
        border-color: var(--colorA) transparent transparent var(--colorA);
        top: 0;
        left: 0;
        width: 66%;
        height: 33%;
    }

    .ListEntry::after {
        border-color: transparent var(--colorA) var(--colorA) transparent;
        bottom: 0;
        right: 0;
        width: 66%;
        height: 33%;
    }

.ListYearAndContent {
    width: 100%; /* Takes full width of its parent */
    display: flex; /* Lays out children in a row */
    position: relative; /* Set the parent position to relative */
}

.ListEntryDate {
    min-width: 20%;
    text-align: center; /* Centers text horizontally */
    display: flex;
    justify-content: center; /* Centers content horizontally in flex container */
    align-items: center; /* Centers content vertically in flex container */
    padding: 1em; /* Optional padding for aesthetic spacing */
}

.ListEntryAuthors {
    text-align: left; /* Aligns text to the left */
    font-size: 1.2em;
    line-height: 1.1;
}

.ListEntryTitle {
    text-align: left; /* Aligns text to the left */
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1.1;
}

.ListEntrySource {
    text-align: left;
    margin-top: auto;
    line-height: 1.2;
}

.ListEntryPublished {
    text-align: left;
    margin-top: auto;
    line-height: 1.2;
}

.ListEntryExperienceTitle {
    text-align: left;
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1.1;
}

.ListEntryExperienceEmployer {
    text-align: left; /* Aligns text to the left */
    font-size: 1.2em;
    line-height: 1.1;
}

.ListEntryExperiencePosition {
    text-align: left; /* Aligns text to the left */
    font-size: 1.2em;
    line-height: 1.1;
}

.ListEntryExperienceBulletPoints {
    text-align: left; /* Aligns text to the left */
    font-size: 1.2em;
}

    .ListEntryExperienceBulletPoints > ul > li {
        text-align: left; /* Aligns text to the left */
        line-height: 1.1;
    }

.ListEntryEducationGraduation {
    text-align: left; /* Aligns text to the left */
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1.1;
}

.ListEntryEducationTitle {
    text-align: left;
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.1;
}

.ListEntryContent {
    flex-grow: 1; /* Takes the remaining width */
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    padding: 1em; /* Optional padding for aesthetic spacing */
}

.ListEntryContentL {
    text-align: left; /* Aligns text to the left */
    line-height: 1.3;
}

.ListEntryContentR {
    text-align: right; /* Aligns text to the right */
    margin-top: auto; /* Aligns to the bottom if there's extra space */
}

.ListEntryLinkCarret {
    width: 100%;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* Centers the links horizontally */
    position: relative;
    font-size: 2.5em;
    margin-bottom: 0.5em;
    z-index: 3;
}


.ListEntryLinkContainer {
    padding-top: 0.5em;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* Centers the links horizontally */
    position: relative;
    overflow: hidden;
    margin-bottom: 1em;
}

    .ListEntryLinkContainer::before {
        content: "";
        position: absolute;
        justify-content: center;
        align-content: center;
        width: 66%;
        top: 0;
        left: 17%;
        right: 0;
        height: 2px;
        background-color: var(--colorA); /* Change the color as needed */
    }


.ListEntryLink {
    position: relative;
    display: inline-flex; /* Using inline-flex for better control */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: var(--colorA);
    color: var(--colorTextNav);
    padding: 0.5em;
    margin: 0 0.5em;
    z-index: 2; /* High z-index value */
}

    .ListEntryLink:hover {
        color: var(--colorTextNav);
        background-color: var(--colorB);
    }

    .ListEntryLink i {
        display: block; /* Makes each child take a full line */
        text-align: center; /* Centers the text/icons */
        font-size: 2em;
    }

    .ListEntryLink::before,
    .ListEntryLink::after {
        content: '';
        position: absolute;
        border: 0.25em solid transparent;
        border-color: transparent transparent transparent transparent;
        box-sizing: border-box;
        transition: all 1s ease;
    }

    .ListEntryLink::before {
        top: 0;
        left: 0;
        width: 0;
        height: 0;
    }

    .ListEntryLink::after {
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
    }

    .ListEntryLink:hover::before {
        border: 0.25em solid transparent;
        border-color: var(--colorA) transparent transparent var(--colorA);
        top: 0;
        left: 0;
        width: 66%; /* Full width of the parent */
        height: 50%; /* Half height of the parent */
    }

    .ListEntryLink:hover::after {
        border: 0.25em solid transparent;
        border-color: transparent var(--colorA) var(--colorA) transparent;
        bottom: 0;
        right: 0;
        width: 66%; /* Full width of the parent */
        height: 50%; /* Half height of the parent */
    }










@media only screen and (min-width: 451px) and (max-width: 850px) {
    .ListYearAndContent {
        display: block; /* Lays out children in a row */
    }

    .ListEntryDate {
        width: 100%;
    }


    .ListEntryContent {
        margin-top: -2em;
        width: 100%;
        display: flex;
        flex-direction: column; /* Stacks children vertically */
    }

    .ListEntryLinkCarret {
        display: flex;
    }

    .ListEntryLinkContainer {
        display: none;
    }
}


@media only screen and (max-width: 450px) {
    .ListContainer {
        width: 95%;
    }

    .ListYearAndContent {
        display: block; /* Lays out children in a row */
    }

    .ListEntryDate {
        width: 100%;
        font-size: 0.8em;
    }

    .ListEntryContent {
        margin-top: -1.5em;
        width: 100%;
        display: flex;
        flex-direction: column; /* Stacks children vertically */
    }

    .ListEntryContentR {
        text-align: left; /* Aligns text to the right */
        margin-top: auto; /* Aligns to the bottom if there's extra space */
    }

    .ListEntryLinkCarret {
        display: flex;
    }

    .ListEntryLinkContainer {
        display: none;
    }
}