/* 
    all the sizing is done with em so as to keep it nice and proporotional
    if the user changes font size. this means that some of it is a bit off.
*/

@font-face { font-family: sorts-mill-goudy; src: url( '/assets/fonts/OFLGoudyStM.otf' ); }
/* styles for elements */
a           {
             color: #000;
             text-decoration: none;
            }

body        {background-color: #fbfbfb;
             color: #000;
             font-family: sorts-mill-goudy, serif;
             margin: 0px;
             padding: 0em;}

p           {padding-top: 0em; 
             padding: 0em 0em 0em 0.5em;
             margin-top: 0em;}

h1          {
             font-family: helvetica, sans-serif;
             font-weight: normal;
             font-size: 3em;
             margin: 0em;
             padding: 0em;
             padding-left: 1em;
             }
             
ul          {list-style-type: circle;
             margin-left: 0.8em; 
             padding-left: 0.8em; }

/* specific styles */
             
.front-page a {
  text-decoration: none;
  display: inline-table;
}

.front-page a:after {
  content: "";
  border-bottom: 1px solid #ccc;
  display: table-caption;
  caption-side: bottom;
  position: relative;
  margin-top:-0.25em;
}

.front-page p {
    margin-left: 1.6em;
    padding-left: 1.6em;
}

/* styles for classes and ids. in order of appearance :) */

/* top left hand box */
#title      {
             color: #cccccc;
             background-color: #fbfbfb;
             border: 0em;
             margin: 0em 0em 0em 16.5em;
             padding: 0.5em 0em 0.25em 0.25em;
             }

#title a {
             color: #cccccc;
         }

/* front page content */
.front-page {
  margin: 1.8em 4.6em 0.5em 18em;
}

.front-page ul {
  list-style: none;
  font-size: 2em;
}

@media all and (max-width: 800px) {
    #title {
        padding: 0.5em 0em 0.25em 3em;
        margin: 0em 0em 0em 2em;
    }
    #title > h1 { 
        padding-left: 0em; 
    }

    .front-page {
      margin: 1.8em 0em 0.5em 3em;
    }

}

@media all and (max-width: 320px) {

    #title {
        padding: 0.5em 0em 0.25em 0em;
        margin: 0em 0em 0em 2em;
        width: 20em;
    }

    #title > h1 {
        padding-left: 0em; 
    }

}