@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

html{
    font-size:10px;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size:2.4rem;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.image {
    width:100%;
    height:30rem;
    background-size:cover;
    background-position:center;
    border-bottom:2px solid #999;
    margin-bottom:2.5rem;
}

.headline {
    background-color:#333;
    color:white;
    border-radius:5px;
}

.links {
    list-style-type:"-";
}

.links li {
    padding-left:1rem;
}

.links a {
    text-decoration:underline;
    color:darkblue;
}

.links a~div {
    margin-left:25px;
}

.links a:hover {
    background-color:orangered;
    color:white;
    border-radius:5px;
}

span[data-description] {
    text-decoration:underline;
    position:relative;
}
span[data-description]:hover:after {
    content:attr(data-description);
    position:absolute;
    width:auto;
    min-width:10rem;
    white-space: nowrap;
    background-color:#333;
    color:white;
    border-radius:5px;
    padding:.5rem 1rem;

    bottom:100%;
    left:50%;
    transform:translateX(-50%);
}