* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

:root {
    --fondop: #000000;
    --fondocol1: #373d48;
    --fondocol2: #ffffff;
    /*también para la letra col1*/
    --letracab: #383838;
    --letracuerpo: #5f5f5f;
    --line: #dfdfdf;
    --griso: #252932;

    /*mesures*/
    --margenmin: 5px;
    --margenmax: 20px;
    --range-progress: 50%;
}

body {
    background-color: var(--fondop);
}

body>main {
    display: grid;
    grid-template-columns: 20% 80%;
    margin: 0 10% 0;
    font-family: Arial, Helvetica, sans-serif;
}

.datos {
    background: var(--fondocol1);
    color: var(--fondocol2);
    width: 100%;
}

body section {
    padding: var(--margenmax);
}

body section h2 {
    margin-bottom: var(--margenmin);
}

body section h5 {
    margin-bottom: var(--margenmin);
}

body section img {
    width: 100%;
    margin-bottom: var(--margenmax);
}

body section.datos fieldset {
    border: 0px;
    font-size: 0.8em;
    margin-bottom: var(--margenmax);
}

body section.datos fieldset>legend {
    background-color: var(--griso);
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;
    padding: 5px 15px;
    font-size: 1.3em;
    font-weight: bolder;
}

body>main>section.datos fieldset>ul {
    margin: 5px;
}

body>main>section.datos fieldset>ul>li {
    margin-left: 10px;
    list-style: none;
    font-size: 0.9em;
}

body>main>section.datos fieldset>ul.apt li {
    margin: 5px;
    padding: 3px;
    font-size: x-small;
}

body>main>section.datos fieldset>ul.idom li {
    padding: 10px;

    &> :first-child {
        margin: 5px;
        padding: 5px;
        /* border:1px solid black; */
    }

    &>input {
        padding: 5px;
    }

    & :last-child {
        margin-top: 5px;
        text-align: right;
    }
}

input[type=range] {
    display: block;
    width: 100%;
    background: transparent;
}

input[type=range]:focus {
    outline: none;
}

input[type=range],
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-thumb {
    background-color: transparent;
    width: 15px;
    height: 8px;
}

input[type=range].ingles::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: linear-gradient(to right,
            var(--fondocol2) 0%,
            var(--fondocol2) 75%,
            var(--griso) 25%,
            var(--griso) 0%);
}

input[type=range].frances::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: linear-gradient(to right,
            var(--fondocol2) 0%,
            var(--fondocol2) 50%,
            var(--griso) 50%,
            var(--griso) 0%);
}

.experiencia {
    background: var(--fondocol2);
    color: var(--letracuerpo);
    width: 100%;
    line-height: 1.5em;
    font-size: 0.8em;


    &>P {
        margin-bottom: var(--margenmax);
    }

    &>fieldset {
        border: none;
        display: grid;
        grid-template-columns: 10% 90%;
        /* grid-template-areas: "date resto"; */
        margin-bottom: 10px;
        font-size: 1em;

        &>legend {
            margin-bottom: var(--margenmax);
            padding: 10px;
            width: 100%;
            border: 1px solid var(--line);
            border-left: 0;
            border-right: 0;
        }

        &>fieldset {
            border: none;
            margin: 5px 0px 5px 0px;

            & legend {
                margin-bottom: 5px;
            }

            &>ul {
                /* border:1px solid black; */
                border-top: 5px;
                padding: 5px;

                &>li {
                    list-style-position: inside;
                    text-align: justify;
                }
            }


        }
    }
}

@media(width<720px) {
    body>main {
        grid-template-columns: 1fr;
    }

    body>main>section.experiencia {
        grid-template-columns: 1fr;

        & >fieldset {
            grid-template-columns: 1fr;
            &>legend{
                border: 1px solid var(--griso);
                 border-left: 0;
            border-right: 0;

            }
            &>div {
                border-bottom: 1px solid var(--line);
            }

            & fieldset {
                border-bottom: 1px solid var(--line);
                margin-bottom: 15px;
            }
        }

    }
}