.taskcontainer{
    /*border: 2px solid black;*/
    border:none;
    width: 130%;
    margin-left: -15%; /* negative half of the extra width */
    display: flex;
}

.intro{
    border: 2px solid black;
    width: 40%;
    float: left;
    padding: 20px;
    /*flex: 1; The flex property sets the flexible length on flexible items.*/
}

.task{
    border: 2px solid black;
    width: 60%;
    float: right;
    padding: 25px;
    /*flex: 1;*/
}

table {
    border-collapse: collapse;
    border-spacing: 30px;
    border: none;
    font-size: 20px;
    width: 100%; /* has to be 100%, otherwise goes beyond the border of the div */
    padding: 0px;
}

td{
    padding:0px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slider{
    -webkit-appearance: none;
    appearance:none;
    width: 100%;
    height:15px;
    border_radius: 5px;
    outline:none;
    background:#d3d3d3;
    cursor:pointer;
}

.slider:hover{
    opacity:1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:none;
    width: 0px;
    height:0px;
    border-radius: 50%;
    background:#4c6baf;
    cursor:pointer;
}

.slider::-moz-range-thumb {
    width: 0px;
    height:0px;
    border-radius: 50%;
    background:#4c6baf;
    cursor:pointer;
}

label {
    display: inline;
    padding: 0px 1em 0px 8px;
}

p, ul{
    font-size: 20px;
}

h2{
    text-align: center;
}

h3{
    text-align: left;
}

.circle-orange{
    width:16px;
    height:16px;
    border-radius: 50%;
    background: orange;
    display: inline-block;
}

.circle-red{
    width:16px;
    height:16px;
    border-radius: 50%;
    background: red;
    display: inline-block;
}