:root {
    --primary-color: #212121;
    /* --background-color: #111; */
    --background-color: #212121;
    --font: sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    margin: 0;
    min-height: 100%;
}

body {
    /* background: var(--background-color); */
    background: #111111;
    background: -webkit-linear-gradient(left, #111111 0, #212121 30%, #212121 70%, #111 100%);
    background:    -moz-linear-gradient(left, #111111 0, #212121 30%, #212121 70%, #111 100%);
    background:     -ms-linear-gradient(left, #111111 0, #212121 30%, #212121 70%, #111 100%);
    background:      -o-linear-gradient(left, #111111 0, #212121 30%, #212121 70%, #111 100%);
    background:         linear-gradient(to right, #111111 0, #212121 30%, #212121 70%, #111 100%);
    background-position: 50% 100%;
    font-family: var(--font);
    display: flex;
    justify-content: center;
    flex-direction: column;

    padding-top: 20px;
}

/* Timeline Container */
.timeline {
    /* background: var(--primary-color); */
    margin: 0 auto;
    padding: 0 20px 20px 20px;
}

/* Card container */
.card {
    position: relative;
    max-width: 450px;
}

/* setting padding based on even or odd */
.card:nth-child(odd) {
    padding: 30px 0 30px 30px;
}

.card:nth-child(even) {
    padding: 30px 30px 30px 0;
}

/* Global ::before */
.card::before {
    content: "";
    position: absolute;
    width: 50%;
    border: solid orangered;
}

/* Setting the border of top, bottom, left */
.card:nth-child(odd)::before {
    left: 0px;
    top: -5px; /* previously 4.5 */
    bottom: -5px;
    border-width: 5px 0 5px 5px;
    border-radius: 50px 0 0 50px;
}

/* Setting the border of top, bottom, right */
.card:nth-child(even)::before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 5px 5px 5px 0;
    border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first card */
/* .card:first-child::before {
    border-top: 0;
    border-top-left-radius: 0;
} */

.card:first-child::after {
    z-index: 1;
    content: "";
    position: absolute;
    width: 50%;
    border: solid orangered;

    left: 0px;
    top: -5px;
    bottom: -5px;
    border-width: 5px 0 5px 5px;
    border-radius: 50px 0 0 50px;
}

.card:first-child .title::before {
    z-index: 3;
}

/* Removing the border if it is the last card  and it's odd */
.card:last-child:nth-child(odd)::before {
    border-bottom: 0;
    border-bottom-left-radius: 0;
}

/* Removing the border if it is the last card  and it's even */
.card:last-child:nth-child(even)::before {
    border-bottom: 0;
    border-bottom-right-radius: 0;
}

/* Information about the timeline */
.info {
    display: flex;
    flex-direction: column;
    background: #333;
    color: gray;
    border-radius: 10px;
    padding: 10px;
    width: 90%;
}

.card:nth-child(odd) .info {
    margin-right: auto;
}

.card:nth-child(even) .info {
    margin-left: auto;
}

/* Title of the card */
.title {
    color: orangered;
    position: relative;
}

/* Timeline dot  */
.title::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 999px;
    border: 3px solid orangered;
}

/* text right if the card is even  */
.card:nth-child(even)>.info>.title {
    text-align: right;
}

/* setting dot to the left if the card is odd */
.card:nth-child(odd)>.info>.title::before {
    left: -45px;
}

/* setting dot to the right if the card is odd */
.card:nth-child(even)>.info>.title::before {
    right: -45px;
}

/* Bio container */
.bio {
    position: relative;
    max-width: 450px;
    margin: 0 auto 0 auto;
    padding: 20px 20px 20px 20px;
    background: #333;
    color: gray;
    border-radius: 50px;
}

.biotitle {
    color: orangered;
    position: relative;
}

.biotext {
    border-radius: 10px;
    padding: 10px;
    /* width: 90%; */
}

/* .bio::before {
    content: "";
    position: absolute;
    width: 50%;
    border: solid orangered;

    left: 0px;
    top: 0px;
    bottom: 0px;
    border-width: 5px 0 5px 5px;
    border-radius: 50px 0 0 50px;
} */

.bio {
    /* content: ""; */
    /* position: absolute; */
    /* width: 50%; */
    /* width: 98%; */
    border: solid orangered;

    left: 0px;
    top: 0px;
    bottom: 0px;
    /* border-width: 5px 0 5px 5px; */
    border-width: 5px 5px 5px 5px;
    /* border-radius: 50px 0 0 50px; */
    border-radius: 50px 50px 50px 50px;
}

/* p lower margin */
/* .info p.ppad {
    margin-bottom: 10px;
} */

.info > p:not(:first-of-type) {
    margin-top: 10px;
}