:root {
    --size0: calc(0.25vw + 14px);
    --size1: calc(0.6vw + 16px);
    --size2: calc(0.6vw + 24px);
    --size3: calc(0.6vw + 32px);
    --size4: calc(0.6vw + 48px);
    --huge: 9rem;
}

body {
    padding: 1em;
    font-family: 'Roboto';
}

h1 {
    font-size: var(--size4);
}

hr {
    size: 1px;
    color: black;
    align: center;
}

.content {
    font-size: var(--size0);
    margin: 1.5em 0 1.5em 0;
    width: 90%;
}

.icon {
    width: 32px;
    height: 32px;
    vertical-align: bottom;
}

a {
    text-decoration: underline;
    padding-bottom: 0;
    color: inherit; /*rgb(22, 150, 247);*/
}

    a:hover {
        text-decoration: none;
        color: rgb(22, 150, 247);
    }


/* --- large mobile screen  --- */
@media screen and (min-width: 321px) and (max-width: 550px) {
    .content {
        min-width: 90%;
    }
}

/* --- small tablet screen  --- */
@media screen and (min-width: 551px) and (max-width: 768px) {
    .content {
        width: 80%;
    }
}

/* --- large tablet screen  --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .content {
        width: 70%;
    }
}

/* --- desktop screen  --- */
@media screen and (min-width: 1025px) {
    .content {
        width: 50%;
    }
}