/***************************** 
    Styles 
******************************/

* {

  background-color: GhostWhite;
  
}


::-moz-selection { 
    background: LightSlateGrey;
    color: white;
  }

  
::selection { 
    background: LightSlateGrey;
    color: white;
 }


@font-face {
  font-family: 'Common Serif Regular';
  src:  url('fonts/CommonSerifLoBeta7-Regular.otf') format('otf'),
        url('fonts/CommonSerifLoBeta7-Regular.woff2') format('woff2'),
        url('fonts/CommonSerifLoBeta7-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'True Sans Regular';
  src:  url('fonts/TrueSans-Regular.otf') format('otf'),
        url('fonts/TrueSans-Regular.woff2') format('woff2'),
        url('fonts/TrueSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/***************************** 
    Layout
******************************/

.container {

  font-family: "Common Serif Regular", Times, serif;
  font-size: 18px;
  line-height: 1.25em;
  color: DimGray;
  text-align:center;
  margin-bottom:3em;


    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
 
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;

            margin-right: 20px;
            margin-left: 20px;
            margin-top: 3vh;
 }


p {
  text-align:left;
}

p.header {
  margin-top:0;
  margin-bottom:1em;
}

p.info {
  margin-top:0;
  margin-bottom:1em;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
       break-inside: avoid;
}


p.footer {
	margin-top:1.5em;
	font-family: "Common Serif Regular", Times, serif;
  	text-align:center;
  	font-size: .75em;
  	line-height: 1.25em;
}


a {
  color:OrangeRed;
  text-decoration: none;
  
  transition: .5s;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
}


a:hover {
  color:MediumSeaGreen;
  text-decoration: none;
}

.expand {
  text-align: center;
  margin-bottom: 2em;
}


/***************************** 
    Projects
******************************/

.projects {
  margin-top:1em;
  
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;

  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
 }

.projects img {
  max-width: 100%;
  text-align:left;
 }

.caption {
  margin-top:-0.65em;
  padding-bottom:3.5em;
	font-family: "True Sans Regular", Arial, sans-serif;
  	text-align: center;
  	font-size: .65em;
    line-height: 1.25em;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
         break-inside: avoid;
  }






 
/***************************** 
    Mobile 
******************************/


 @media only screen and (max-width: 1100px) {
  
  .container {

    font-family: "Common Serif Regular", Times, serif;
    font-size: 16px;
    line-height: 1.25em;
    color: DimGray;
          
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
          
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
          
    margin-right: 1vw;
    margin-left: 1vw;
    margin-top: 2vh;
  }
    
  .projects {
          
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;

    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;

  }




}