:root {
    --dark: #2e2e2e;
    --bg: #f0f0f0;
    --highlight: #659669;
}

.bg {
    background-color: var(--bg);
}

@font-face {
    font-family: "font";
    src: url(/fonts/PPFragment-SerifLight.otf);
    font-weight: 300;   
}

body {
    font-family: "font";
    margin: 0;
}

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.align-middle {
    align-items: center;
}

.w-full {
    width: 100%;
}

.w-max {
    width: 48rem;
}

.pad-s-2 {
    padding: 0 2rem;
}

p {
    font-size: 2rem;
    line-height: 3rem;
    padding: 1rem 0;
}

p, a, a:visited {
    color: var(--dark);
}

a:hover {
    color: var(--highlight);
}

@media only screen and (max-width: 600px) {
    .content {
      padding: 4rem;
    }
    p {
        font-size: 1rem;
        line-height: 2rem;
    }
  }

@media only screen and (min-width: 601px) {
    .content {
        padding: 8rem;
    }
}