@font-face {
    font-family:'Montserrat';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url(/font/montserrat.woff2) format("woff2");
    unicode-range:U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD
  }
  html {
    height:98%;
    overflow-x:hidden;
    font-family:'Montserrat', sans-serif;
    line-height:1.25;
    display:flex;
    flex-direction:column;
    align-items:center
  }
  body {
    background-color:#1f1822;
    color:#b5eaf4;
    display:flex;
    flex-direction:column;
    max-width:800px;
    min-height:100%;
    align-items:center;
    justify-content:space-between
  }
  a {
    color:#ffc900;
    text-decoration:none
  }
  header {
    padding:10px 0 20px
  }
  header a {
    padding:0 25px
  }
  .mono {
    font-family:monospace
  }
  footer {
    padding-top:20px
  }
  .container {
    background-color:#3b2c43;
    border-radius:0.5em
  }
  .dim {
    color:#a6adc8
  }
  @media (prefers-color-scheme: light) {
    body {
      background-color:#e2d5e6;
      color:#4c4f69
    }
    a {
      color:#A020F0
    }
    .container {
      background-color:#fff4cc
    }
    .dim {
      color:#6c6f85
    }
  }
  .container {
    padding:30px;
    text-align:left;
    line-height:1.5
  }
  .container h2 {
    margin:0 0 -0.7em 0
  }
  .container h3 {
    margin:0.5em 0 0.5em 0
  }
  .point,
  .contact,
  .contact-header {
    display:block
  }
  .image{
    display: grid;
    align-items: center;
    grid-template-columns: 4fr 1fr;
    column-gap: 5px;
  }
  .heart {
    display:inline;
    padding-right:3px
  }
  .contact-header {
    padding:1em 0 0
  }
  .contact a {
    padding:0 5px
  }