/*
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Wire+One&display=swap');
*/

html {
  box-sizing: border-box;
  x-font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-family: 'Oxygen', sans-serif;
  line-height: 1.9;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3 {
    margin-bottom: 15px;
    text-transform: lowercase;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 34px;
}

h3 {
    font-size: calc((5.625 - 1) * 1.2vw + 1rem);
    line-height: 1.2;
}

a {
    color: rgb(99, 150, 171);
    transition: color 0.3s ease;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    text-decoration-skip-ink: auto;
    cursor: pointer;
}


.content {
    max-width: 828px;
    margin: 40px auto 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.content h1 {
    text-align: center;
}

body {
    background-color: #fdfdfd;
    color: #262626;
    font-size: calc((1.4 - 1) * 1.2vw + 1rem);
}

main > footer {
    margin: 10px;
    text-align: center;
    font-size: 10px;
    color: #777;
}

main > section {
    margin-bottom: 15px;
}

#external-links {
    text-align: right;
}

.content p {
    margin-bottom: 20px;
}

.post .date {
}

::selection {
    background: blue;
    color: #fff;
    text-shadow: none;
}

@media screen and (min-width: 1440px) {
    body .content {
        max-width: 880px;
    }
}

@media screen and (device-width: 414px) {
    body .content {
        padding-left: 64px;
        padding-right: 64px;
    }
}

@media screen and (min-width: 368px) {
    body .content {
        padding-left: 30px;
        padding-right: 30px;
    }
}


@font-face {
    font-family: "Josefin sans";
    src: url('/fonts/JosefinSans-Regular.ttf');
}

@font-face {
    font-family: "Roboto";
    font-weight: normal;
    src: url('/fonts/Roboto-Regular.ttf');
}


@font-face {
    font-family: "Roboto";
    font-weight: lighter;
    src: url('/fonts/Roboto-Light.ttf');
}