/*To add this to a page, use <link href="FILEPATH.css" rel="stylesheet" type="text/css" media="all">*/

html { /*somehow, this keeps the column on short pages in the same place as the column on pages long enough to require a scrollbar. better reading experience*/
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

body { /*background color, font*/
background-image: url(images/rikkabg.gif);
background-repeat: round;
background-attachment: fixed;
font-family: "basiic.tff";
}

@font-face {
    font-family: 'oswald';
    src: url('fonts/basiic.ttf');
}

html, body, div, span, applet, object, iframe, h2, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    font-family: oswald;
    vertical-align:baseline;
    color: white;
} 

h1, h3, strong {
    color: white;
}


#patch {
    position: fixed;
    bottom: 5px;
    right: 100px;
    z-index: 3;
}

.overlay::before {
  content: '';
  z-index: 10;
  width: 100%;
  height: 120%;
  display: block;
  position: absolute;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%);
}

.midcolumn { /*the main body of the this-style page, it doesn't go in a row it just encloses all the content*/
border: 6px hidden #e06d8a;
margin: auto;
margin-left: 2px;
width: 28%;
padding: 1px;
background-color: transparent;
}

.row { /*base of the row-column system. you might find success adding 'width' to this*/
  display: flex;
  width: 100%
}

.leftcolumn {
  flex: 20%;
  padding-left: 10px;
  padding-right: 1px;
  position: relative; 
  border: 1px dotted transparent;
  margin-left: 10px;
  font-size: 14px;
  background-color: transparent;
}

.rightcolumn {
  flex: 250px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative; 
  border: 1px dotted transparent;
  margin-left: 10px;
  font-size: 14px;
  background-color: black;
}
