@font-face {
      font-family: "ronda";
      src: url("https://static.tumblr.com/rmj06l2/kcLlo1q2y/pf_ronda_seven.ttf");
    }

    @font-face {
      font-family: "pixel";
      src: url("https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0");
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 20px;
      background: #000;
      font-family: "ronda", calibri, verdana, arial;
      font-size: 9px;
      text-align: justify;
      color: #e8807e;
      letter-spacing: 1px;
      line-height: 13px;
    }
    
    textarea {background:#000;border:1px solid #8d2524;}

a {
  color: #e8807e;
  text-decoration: none;
  transition: 0.2s ease;
}

a:hover {
  color: #ff9d9c;
  text-shadow: 0 0 4px #ff7472;
}

a:active {
  color: #b04544;
}

b {font-weight: bold;}
    
    
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1a0000;
}

::-webkit-scrollbar-thumb {
  background: #5c0f0e;
  border-radius: 5px;
  border: 2px solid #1a0000;
}

::-webkit-scrollbar-thumb:hover {
  background: #7f1a19;
}

    .layout {
      max-width: 600px;
      margin: 40px auto;
      border-radius: 10px;
      overflow: hidden;
    }
    
    
    .main {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      background: #2b0201;
    }

    .column {
      padding: 8px;
      background: #2b0201;
    }
    
    

    .title {
      text-transform: lowercase;
      font-family: "ronda", arial;
      font-size: 10px;
      color: #8d2524;
      line-height: 12px;
      margin-bottom: 4px;
      letter-spacing: 2px;
    }
    
    

    .lace {
      height: 36px;
      background: url(https://itinerae.neocities.org/img/lace2.png) repeat-x #000;
      color: #bcaccc;
      border-top-right-radius: 30px;
      border-top-left-radius: 30px;
    }
    
    

    .banner {
      width: 100%;
      height: 130px;
      background: #190000 url(YOUR-BANNER-URL-HERE) center/cover no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .banner-inner {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    

    .site-name {
      font-family: "ronda", pixel, sans-serif;
      font-size: 24px;
      color: #e8807e;
      letter-spacing: 2px;
      text-shadow: 0 0 4px #000;
    }

    .slogan {
      margin-top: 15px;
      font-family: "ronda", sans-serif;
      font-style: italic;
      font-size: 9px;
      color: #e8807e;
      letter-spacing: 1px;
      text-shadow: 0 0 3px #000;
      opacity: 0.85;
    }
    
    

    .navigation {
      background: #2b0201;
      border-top: 1px solid #111;
      border-bottom: 1px solid #111;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 8px;
    }

    .navi-link {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .navi-link a {
      font: italic 11px georgia, monospace;
      text-transform: lowercase;
      line-height: 30px;
      padding-right: 15px;
      letter-spacing: 2px;
      color: #ae4442;
      white-space: nowrap;
    }

    .navi-link a:hover {
      color: #ccc;
    }
    


    .footer {
      height: 36px;
      background: url(https://itinerae.neocities.org/img/lace1.png) repeat-x #000;
      color: #555;
      border-top: 1px solid #111;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      line-height: 20px;
    }

    .credits {
      text-align: center;
      font-family: ronda, sans-serif;
      font-size: 9px;
      color: #e8807e;
      margin: 10px 0 20px;
      opacity: 0.8;
      letter-spacing: 1px;
    }
    
    

    @media (max-width: 768px) {
      .layout {
        margin: 20px auto;
      }

      .main {
        grid-template-columns: 1fr;
      }

      .navi-link a {
        margin-right: 10px;
        line-height: 24px;
      }