@font-face {
    font-family: EBGaramond;
    src: url(font/EBGaramond12-Regular.woff)
}

@font-face {
    font-family: EBGaramond;
    src: url(font/EBGaramond12-Italic.woff);
    font-style: italic
}

body {
    font-family: EBGaramond, Garamond, "Times New Roman", Times, serif;
   background-color: #E6E6E6
}

/* LINK COLOURS */

a:link {
    color: #999999;
    text-decoration: none
}
a:visited {
    color: #999999;
    text-decoration: none
}
a:hover {
    color: red;
    text-decoration: none	
}
a:active {
    color: black;
    text-decoration: none	
}

/* SCROLLBAR */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.3)
}

::-webkit-scrollbar-thumb {
    background: black; 
    -webkit-box-shadow: 0px -10px 5px -5px rgba(0, 0, 0, 0.3);
}

/* CONTAINERS */

.page {

    width: 600px;
    height: 900px;
    background-color: white;
    padding: 60px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3)
}

.pagestory {

    width: 600px;
    background-color: white;
    padding: 60px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3)
}

.scroll {

    width: 250px;
    height: 450px;
    background-color: white;
    padding: 10px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
    overflow-y: scroll;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3) inset
}

.title {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    text-align: center
}

.fictionA {
    position: absolute;
    width: 110px;
    margin-left: 165px
}

.fiction {
    position: absolute;
    width: 110px;
    margin-top: 150px;
    margin-left: 165px;
    text-align: right
}

.translation {
    position: absolute;
    width: 110px;
    margin-top: 150px;
    margin-left: 315px;
    text-align: left
}

.translationB {
    position: absolute;
    width: 110px;
    margin-left: 315px
}
.main {
    position: absolute;
    text-align: center;
    margin-top: 35px;
    margin-bottom: 20px;
    width: 600px
}
.mainstory {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 20px;
    width: 600px
}
.maincolumns {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    position: static;
    text-align: justify;
    width: 600px	
}
.mainright1 {
    position: absolute;
    text-align: justify;
    margin-top: 200px;
    margin-left: 315px;
    width: 275px	
}
.mainleft1 {
    position: absolute;
    text-align: justify;
    margin-top: 200px;
    width: 275px	
}
.contact {
    text-align: center;
    margin-top: 610px;
    width: 600px
}
.contactstory {
    position: static;
    text-align: center;
    margin-top: 35px;
    width: 600px
}
.divider {
    position: static;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 50px;
    width: 600px
}

.inset {
    position: absolute;
    right: 10px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3) inset;
    width: 260px;
    background-color: #E6E6E6;
    padding: 5px;
}

.line{ 
    margin-top: 230px;
    display:block;
    border:none;
    color:white;
    height:1px;
    background:black;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#000), to(#fff));
}

/* FORM */

form {
  position: relative;
}

#from {
  position: absolute;
  right: 5px;
}

#reply {
  position: absolute;
  right : 5px;
  top: 2em;
}

#subject {
  position: absolute;
  right : 5px;
  top: 4em;
}

#message {
  position: absolute;
  right : 5px;
  top: 6em;
}

input, textarea {
  border  : none;
  padding : 5px 5px;
  margin  : 0 0 0 50px;
  width   : 265px;

  background: none;
}

input:focus, textarea:focus {
  outline      : none;
}

textarea {
  display : inline-block;
  vertical-align: -314px;

  padding : 5px 5px;
  margin  : 0 0 0 50px;
  width   : 265px;
  height  : 320px;

  resize  : none;
  overflow: auto;
}

.btn {
  position     : absolute;
  right        : 235px;
  top          : 432px;
  width: 45px;
  height: 25px;
  -webkit-appearance: none;
  -moz-box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.3);
  font-family: EBGaramond, Garamond, "Times New Roman", Times, serif;
  font-size: 100%;
  background   : white;
  cursor       : pointer;
  text-decoration: none;
}

.btn:hover,
.btn:focus {
  background: rgba(0, 0, 0, 0.3);
  color   : red;
  text-decoration: none;
}

/* TEXT */

p {

    text-align: justify;
    line-height: 120%;
    margin-top: 0px;
    margin-bottom: 10px
}

p1 {
    letter-spacing: 10px;

    font-size: 130%;
    line-height: 150%;
    text-transform: uppercase
}

p2 {

    text-transform: uppercase;
    font-size: 100%
}

p3 {

    font-size: 100%;
    line-height: 100%
}


p.body {

    text-align: justify;
    font-size: 100%;
    line-height: 120%
}

p.links {

    font-size: 100%;
    line-height: 130%;
    margin-bottom: 1em;
    display:inline-block
}

p.quote {

    text-align: center;
    font-size: 100%;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px
}