:root {
    --full-light: #ffffff;
    --dark: hsl(44, 33%, 2%);
    --light: hsl(44, 33%, 91%, 1);
}

body {
    background-color: var(--dark);
    color: var(--light);
    font-family: "Raleway", sans-serif;
}

.content {
    padding: 1em;
}

h1 {
    font-size: 15vw;
    font-weight: bolder;
    margin: 0;
}

.info {
    font-size: 5vw;
}

.info a {
    color: var(--light);
    text-decoration: none;
}

.info a:hover {
    background-color: var(--light);
    color: var(--dark);
}

.info ul {
    display: inline;
    list-style: none;
}

.links {
    display: inline;
    list-style: none;
    padding: 0px;
}

.links li {
    display: inline;
}

.links li:not(:last-child):after {
    content: ", ";
    color: var(--full-light);
}

.links::before {
    color: var(--full-light);
    content: "{ ";
}

.links::after {
    color: var(--full-light);
    content: " }";
}

@media (max-width: 768px) {
    .content {
        padding: 0em;
    }

    .info {
        font-size: 1.75em;
    }

    h1 {
        font-size: 15vw;
    }

    .info ul {
        list-style: none;
    }
    .links li {
        padding-left: 2rem;
        display: block;
    }
}