:root {
    --bg: #fbfbfc;
    --text: #121212;
    --muted: #6b6b6b;
    --accent: #0b5fff;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Open Sans", sans-serif;
    margin: 32px 7%;
    line-height: 1.6;
}

h1 {
    margin: 0px;
    font-weight: 700;
    font-size: 1.6rem;
}

a {
    color: var(--accent);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

hr {
    border: 0px;
    border-top: 1px solid #e6e7ea;
    margin: 18px 0px;
}

main {
    p {
        margin: 0px;
    }

    h2 {
        margin-top: 20px;
        font-size: 1.08rem;
    }

    ul {
        margin: 0px;
        padding-left: 1.4rem;
    }
}

footer p {
    margin: 0px;
    color: var(--muted);
    font-size: 0.95rem;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    body {
        margin: 32px 15%;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    body {
        margin: 32px 20%;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    body {
        margin: 32px 25%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    body {
        margin: 32px 30%;
    }
}