/* ---------------------- Default ---------------------- */

main {
    width: 100%;
    min-height: 100%;
    
    background-color: #1d1c1f;

    display: flex;
    justify-content: center;
    align-items: center;
}

#Main-Row {
    width: 95%;
    margin-top: 2.5%;
    margin-bottom: 5%;

    display: flex;
    justify-content: center;
}

/* ---------------------- Left Container ---------------------- */

#M-L-container {
    height: 47em;
    position: relative;
    
    background-color: #36353B;

    clip-path: inset(0);
}

#M-L-container > div:nth-of-type(2) {
    width: 101%;
    height: 20em;

    background-color: lightblue;
    clip-path: polygon(0% 15%, 100% 0%, 100% 85%, 0% 100%, 0% 100%);

    display: flex;
    justify-content: center;
}

#M-L-container > div:nth-of-type(1) {
    margin: 1em 0 0 1em;
}

#M-L-container > div:nth-of-type(3) {
    margin-left: 1em;
}

#M-L-container > div:nth-of-type(2) img {
    height: 25em;
}

.M-L-contact-info {
    display: flex;
    gap: 1em;
    margin-top: 0.5em;
}
.M-L-contact-info  img {
    height: 2em;
}

/* ---------------------- Middle Container ---------------------- */

#M-M-container {
    background-color: #36353B;
}

#M-M-container > div:nth-of-type(1) {
    width: 100%;
    
    margin-top: 1em;
    margin-bottom: 3em;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#M-M-container > div:nth-of-type(2) {
    width: 100%;
    
    margin-top: 1em;
    margin-bottom: 1em;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.M-M-stat-container {
    width: 20em;
    height: 12em;
    
    background-color: #616161;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.M-M-stat-container > div:nth-of-type(1) {
    width: 100%;
    height: 4em;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#M-M-competence-container {
    width: 45%;

    border-right: 4px solid #ff0000;
}

#M-M-jsp-container {
    width: 50%;
    height: 20em;
}

.M-M-stat {
    width: 90%;
    height: 8em;
}
.M-M-stat > div {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
}
.M-M-stat > div > p {
    white-space: nowrap;
}

.M-M-competence {
    margin-left: 0.5em;
}
.M-M-competence div {
    margin-left: 0.5em;
}

.M-M-skills-logo {
    height: 2em;
    width: 2em;    
}

.M-M-bull-container {
    position: relative;
    left: calc(var(--size) * 0.9% - 44.4%);
    width: 2em;
    height: 1.5em;
}
.M-M-bull-container p {
    height: 1em;

    text-align: center;
    background-color: #36353B;
}
.M-M-bull-container div {
    width: 2em;
    height: 0.5em;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);

    background-color: #36353B;
}

.M-M-stat-bar {
    height: 5px;
    width: 90%;
    
    background-color: #36353B;
}
.M-M-stat-bar > div {
    height: 5px;

    width: calc(var(--size) * 1%);
    background-color: red;
}
.M-M-stat > div > p {
    width: 7em;
    margin-bottom: 0.5em;
}

/* ---------------------- Right Container ---------------------- */

#M-R-container {
    height: 44em;

    background-color: #36353B;
    padding-bottom: 2em;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2em;
}

#M-R-container > div:nth-of-type(1){
    height: 19em;
    width: 94%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
}

#M-R-container > div:nth-of-type(2){
    height: 19em;
    width: 94%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.M-R-job-container {
    height: 5em;
    width: 100%;

    border: solid 1px #646464 ;

    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5%;
}
.M-R-job-container div:nth-of-type(1) {
    width: 15%;
    height: 4em;

    background-color: #646464;

    display: flex;
    align-items: center;
    justify-content: center;
}
.M-R-job-container div:nth-of-type(2) {
    width: 82.5%;
    height: 4em;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.M-R-timeline-container {
    width: 100%;
    height: 5em;

    display: flex;
    justify-content: center;
}
.M-R-timeline-container > div:nth-of-type(1) {
    width: 43%;
    height: 100%;
}
.M-R-timeline-container > div:nth-of-type(1) p {
    text-align: right;
}
.M-R-timeline-container > div:nth-of-type(3) {
    width: 43%;
    height: 100%;
}
.M-R-timeline-container > div:nth-of-type(3) p {   
    text-align: left;
}
.M-R-timeline-container > div:nth-of-type(2) {
    width: 8%;

    padding-top: 0.5em;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
}
.M-R-timeline-container > div:nth-of-type(2) div:nth-of-type(1) {
    border: solid 0.4em #646464;
    border-radius: 50%;
    width: 0.7em;
    height: 0.7em;

}
.M-R-timeline-container > div:nth-of-type(2) div:nth-of-type(2) {
    height: 2.5em;
    width: 0.2em;
    
    background-color: #1d1c1f;
}

/* ---------------------- Responsive ---------------------- */

@media (min-width:1401px) {
    #M-L-container {
        width: 20%;
        margin-right: 2em;
    }
    #M-M-container {
        width: 37.5%;
    }
    #M-R-container {
        width: 37.5%;
        margin-left: 2em;
    }
}

@media (max-width: 1400px) and (min-width:851px) {
    #Main-Row {
        flex-wrap: wrap;
    }
    #M-L-container {
        width: 30%;
    }
    #M-M-container {
        width: 50%;
        margin-left: 2em;
    }
    #M-R-container {
        width: 70%;
        margin-left: 0;
        margin-top: 4em;
    }
}
@media (max-width: 900px) {
    #Main-Row {
        flex-wrap: wrap;
    }
    #M-L-container {
        width: 57%;
    }
    #M-M-container {
        width: 80%;
        margin-top: 4em;
    }
    #M-R-container {
        width: 80%;
        margin-left: 0;
        margin-top: 4em;
    }
}
@media (max-width: 700px) {
    #M-M-competence-container {
        width: 90%;
        
        padding-bottom: 2em;
        border-right: none;
        border-bottom: solid 2px red;
    }
    #M-R-container {
        width: 90%;
    }
    #M-L-container {
        width: 80%;
    }

}
@media (max-width:500px) {
    #M-M-container {
        width: 90%;
        margin-top: 4em;
    }
}


@media print {
    @page {
        margin: 0;
    }
    header {
        display: none;
    }
    footer {
        display: none;
    }
    main > * {
        display: none;
    }
    #M-L-container,#M-M-container,#M-R-container {
        display: block !important;
        transform: scale(0.7);
        position: absolute;
    }
    #M-L-container {
        transform-origin: top left;
        top: 10mm;
        left: 10mm;
        width: 45%;
    }
    #M-R-container {
        transform-origin: top right;
        top: 10mm;
        right: 10mm;
        padding: 0;
        margin: 0;
    }
    #M-M-container {
        transform-origin: bottom;
        bottom: 10mm;
        width: 100%;
    }
    #M-M-container > div:nth-of-type(1) {
        flex-wrap: nowrap;
        margin-left: 1em;
    }
    #M-M-competence-container {
        border-right: solid 2px red;
        border-bottom: none;
        width: 50%;
    }
    .M-M-stat-bar {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}