body {
    margin: 10px auto;
    max-width: 700px;
    width: 80%;
}
hgroup,
dl,
ol li,
#skills {
    align-items: baseline;
    column-gap: 20px;
    display: grid;
    grid-template-columns: [first] 30% [middle] auto [last];
}
h1 {
    grid-column: first / middle;
}
.where {
    align-self: end;
    grid-column: middle / last;
}
.what-dett {
    grid-column: first / last;
}
h4,
.where {
    grid-area: 1 / 2;
}
dt {
    text-align: right;
}
dd {
    margin-left: 0;
}
#contact {
    display: grid;
    grid-template-areas: "main"
}
#contact h3,
#contact dl {
    grid-area: main;
}
ul li:before,
.where:before {
    padding: 0;
    position: absolute;
    right: calc((100% - 4em) / 100 * 70 + 2em);
}
time {
    display: block;
}
time:nth-of-type(2):before {
    content: "to ";
    margin-left: 25%;
}
.when span {
    display: none;
}


@media screen {
    html {
        background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(rgba(0,0,0,0)), to(rgba(0,0,0,.8)));
        background-image: -moz-radial-gradient(center 45deg, circle farthest-side, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 150%);
        background-image:      radial-gradient(center 45deg, circle farthest-side, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 150%);
    }
    body {
        -webkit-box-shadow: 6px 20px 20px rgba(0, 0, 0, 0.5), -6px -20px 20px rgba(0, 0, 0, 0.5);
           -moz-box-shadow: 6px 20px 20px rgba(0, 0, 0, 0.5), -6px -20px 20px rgba(0, 0, 0, 0.5);
                box-shadow: 6px 20px 20px rgba(0, 0, 0, 0.5), -6px -20px 20px rgba(0, 0, 0, 0.5);
    }
}