/*
* @Author: ArthurBernard
* @Date:   2023-03-17 07:13:44
* @Last Modified by:   ArthurBernard
* @Last Modified time: 2023-04-20 16:31:43
*/

/*Two columns resume*/
.resume {
    padding: 0rem;
    margin: 3rem auto;
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 0.5rem;
    background-color: white;
    border: solid black 2px;
    width: 100%;
    max-width: 970px;
}

.contact {
    grid-column: 1;
    grid-row: 1;
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    margin: 0rem;
    font-size: 0.9rem;
}

.contact li {
    margin-top: 0.5rem;
    list-style-type: none;
    padding: 0rem;
}

.contact a {
    font-style: normal;
}

.contact a:hover {
    text-decoration: none;
    text-shadow: -2px 6px 3px #4d4d4d;
    color: #1a4c70;
}

.resume-header {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 3fr 1fr;
}

.resume-header__title {
    grid-column: 1;
    grid-row: 2;
    padding-left: 1rem;
    color: #4d4d4d;
}

.resume-header__name {
    grid-column: 1;
    grid-row: 1;
    padding-left: 1rem;
    margin-left: 0;
    margin-top: 2rem;
    color: #1a4c70;
    text-shadow: none;
}

.resume-header__picture {
    grid-column: 2;
    grid-row: 1 / 3;
    border: 2px solid #0E5484;
    padding: 2px;
    /*margin: auto;*/
    margin-right: 2rem;
    margin-top: 2rem;
}

/******************/
/* Core of resume */
/******************/

/* Side left with soft skills */

.side-left {
    grid-column: 1;
    grid-row: 2;
    display: block;
    font-size: 1rem;
    margin: 0rem;
    padding: 1rem 1rem 1rem 1rem;
    background-color: #E7E7E7;
}

h3 {
    font-size: 1.8rem;
    color: #4d4d4d;
}

p, li {
    color: black;
}

.resume a {
    color: #0E5484;
}

.side-left h3 {
    border: 3px solid #0E5484;
    width: 100%;
    box-shadow: 3px 3px 0px #4d4d4d;
    text-align: center;
    margin: auto;
    color: black;
    padding: 0.5rem;
}

/* Right side with hard skills */

.side-right {
    grid-column: 2;
    grid-row: 2;
    display: block;
    font-size: 0.9rem;
    margin: 0rem;
    padding: 0rem;
    height: auto;
}

.side-right h3 {
    margin: 0rem 0rem 0.5rem 0rem;
}

.container {
    color: black;
    padding: 0rem 1rem 0rem 1rem;
    margin: 0.2rem;
}

.side-left .container {
    margin-bottom: 2rem;
}

.container ul {
    padding: 0rem;
    margin-left: 0.5rem;
}

.container li {
    padding: 0rem;
    margin: 0.5rem;
    width: 100%;
}

.field {
    display: grid;
    grid-template-columns: 1fr 5fr;
}

.field__date {
    grid-column: 1;
    grid-row: 1 / 4;
    font-size: 0.9rem;
}

.field__title {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    font-size: 1.3rem;
    font-weight: 700;
    color: #0E5484;
}

.field__place {
    grid-column: 2;
    font-size: 0.8 rem;
    font-style: italic;
}

.field__description {
    grid-column: 2;
    text-align: justify;
    margin-top: 0.1rem;
}

/* Responsive fields for large screen */
@media (min-width: 1130px) {
    .field {
        margin: 0rem;
        padding: 0;
        height: auto;
        max-height: 8rem;
    }

    .field__place {
        grid-row: 1;
        text-align: right;
    }

    .field__description {
        grid-row: 2 / 4;
    }
}

/* Responsive fields for medium screen */
@media (max-width: 1130px) {
    .field {
        margin-bottom: 0.5rem;
        height: auto;
    }

    .field__place {
        grid-row: 2;
        text-align: right;
    }

    .field__description {
        grid-row: 3;
    }
}

/* Responsive resume for small screen */
@media (max-width: 740px) {
    .resume {
        display: block;
    }
}

/* Responsive resume-header for very small screen */
@media (max-width: 400px) {
    .resume-header {
        display: block;
    }

    .resume-header__picture {
        margin-left: 2rem;
    }
}

.download {
    text-align: center;
}

.download__button {
    background-color: rgba(231, 231, 231, 1);
    border: solid #0E5484 2px;
    color: black;
    margin: 1rem;
    padding: 1rem;
    border-radius: 10px;
    font-size: 1.2em;
    transition: all 0.3s;
}

.download__button:hover {
    color: white;
    background: rgba(75, 121, 161, 1);
    border: solid rgba(231, 231, 231, 1) 2px;
}