@charset "UTF-8";

UTF-8;
/*******************************************************************************
Animations.
******************************************************************************/
@keyframes fadein {
  fromopacity:0;
}

to {
  opacity:1;
}  
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity:0;
  }
  
  to {
    opacity:1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity:0;
  }
  
  to {
    opacity:1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity:0;
  }
  
  to {
    opacity:1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity:0;
  }
  
  to {
    opacity:1;
  }
}

overflow:hidden;
/*******************************************************************************
Setup fonts.
******************************************************************************/
/* latin-ext */
@font-face {
  font-family:'Roboto Mono';
  font-style:normal;
  font-weight:400;
  src:local('Roboto Mono'),local(Roboto-Regular),url(https://fonts.gstatic.com/s/roboto/v16/Ks_cVxiCiwUWVsFWFA3Bjn-_kf6ByYO6CLYdB4HQE-Y.woff2) format("woff2");
  unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family:'Roboto Mono';
  font-style:normal;
  font-weight:400;
  src:local('Roboto Mono'),local(Roboto-Regular),url(https://fonts.gstatic.com/s/roboto/v16/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;
}

/* Fancy font */
/* latin-ext */
@font-face {
  font-family:'Alex Brush';
  font-style:normal;
  font-weight:400;
  src:local('Alex Brush Regular'),local(AlexBrush-Regular),url(https://fonts.gstatic.com/s/alexbrush/v8/SZc83FzrJKuqFbwMKk6EhUvz7QtO.woff2) format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family:'Alex Brush';
  font-style:normal;
  font-weight:400;
  src:local('Alex Brush Regular'),local(AlexBrush-Regular),url(https://fonts.gstatic.com/s/alexbrush/v8/SZc83FzrJKuqFbwMKk6EhUXz7Q.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/*******************************************************************************
  Disable MFC crap.
 ******************************************************************************/
/* Turn off all the MFC stuff. After this, we have a blank screen. */
.container,.profile_section,.profile_section_background,.heading,.label,#footer_bar,#header_bar {
  display:none;
}

/* And turn on only what we need. */
#about_me_container,#profile_about_me_friends,#about_me_value {
  width:100%;
  display:block;
}

/*******************************************************************************
 Main body.
 ******************************************************************************/
/* First set a dark background, so that before any content shows up we
    aren't blinded by the normal white. */
body {
  padding:0;
  margin:auto;
  background-color:rgb(40,40,40);
  font-size:1em;
}

/* Setup the header. */
nav {
  position:fixed;
  font-size:1em;
/* Keep it at the top of the page.*/
  top:0;
  left:0;
  width:100%;
/* Make it full-screen width.     */
  padding:.5em 0;
/* Give some room around text.    */
  text-align:center;
/* Center align everything.       */
  background:#262626;
/* Header background color.       */
  font-family:'Roboto Mono';
/* Header font.                   */
  z-index:0;
/* Make the header on top always. */
}

/* This is where we style the labels in your header. */
nav > a {
  color:#EBEBEB;
  padding:15px;
  text-decoration:none;
}

/* When we hover over the labels, change the color. */
nav > a:visited {
  color:#EBEBEB;
}

nav > a:hover {
  color:#def4c1;
}

/*******************************************************************************
 Content holders.
 ******************************************************************************/
/* Now by default we don't want to see the content. To
   hide, We are using visibility and opacity rather
   than dispaly so that we can use fancy animations.
   We also need to set max-height and overflow so that
   hidden contetnt doesn't take up space.*/
.content-page {
  visibility:hidden;
  max-height:0;
  overflow:hidden;
  padding-top:0;
  margin:0;
/* Set margin and width to cover everything. */
  width:100%;
  display:flex;
/* These 3 make content centered vertically. */
  align-items:center;
  flex-direction:column;
}

/* This prevents images from being too big. If your image is
   wider than this value, then it will be scaled down. */
.content-page > img {
  max-width:96%;
  max-height:96%;
  margin:auto 2%;
}

/* This padding trick makes vertical alignment work properly,
   spaces content below the header, and also removes
   scrollbars if we don't need them. Hackish, but effective. */
.content-page > :first-child,.content-page > :last-child {
  padding-top:2em;
}

/* When we select a content page, we should make it visible and
   let the height grow to accomidate all the content. */
.content-page:target {
  visibility:visible;
  height:auto;
  max-height:none;
  min-height:100vh;
  -webkit-animation:fadein 2s;
/* Safari, Chrome and Opera > 12.1 */
  -moz-animation:fadein 2s;
/* Firefox < 16 */
  -ms-animation:fadein 2s;
/* Internet Explorer */
  -o-animation:fadein 2s;
/* Opera < 12.1 */
  animation:fadein 2s;
}

/*******************************************************************************
 Splash screen.
 ******************************************************************************/
/* What this does is make the splash section a background. It
   covers the entire screen, but is intially hidden. Then
   the animation property causes it to slowly fade in. */
.splash {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  padding:0;
  z-index:-1;
  -webkit-animation:fadein 2s;
/* Safari, Chrome and Opera > 12.1 */
  -moz-animation:fadein 2s;
/* Firefox < 16 */
  -ms-animation:fadein 2s;
/* Internet Explorer */
  -o-animation:fadein 2s;
/* Opera < 12.1 */
  animation:fadein 2s;
}

/* Here we make sure that your backgorund image resizes to
   always cover the screen. We also add a transition to
   fade in and out when switching between content. */
.splash > img {
  min-height:100%;
  min-width:100%;
  max-width:100%;
  object-fit:cover;
  transition:opacity .5s ease;
}

/* This styles the name in the lower left. */
.splash > span {
  position:fixed;
  bottom:0;
  left:0;
  color:rgba(255,255,255,1);
  padding:0 .2em;
  font-size:8em;
  opacity:1;
  font-family:'Alex Brush',cursive;
}

.splash > span.joe {
  position:fixed;
  bottom:0;
  left:75%;
  color:rgb(300,300,300);
  padding:0 .2em;
  font-size:2.1em;
  opacity:1;
  font-family:'Alex Brush';
}

/* This part handles changes when header links are clicked.
   If a content link is clicked, fade the backgorund to 5%
   and make the name transparent. Also, if any content is
   visible, force the navigation bar to be visible also. */
.content-page:target ~ .splash > img {
  opacity:.05;
}

.content-page:target ~ .splash > span {
  color:rgba(0,0,0,0);
}

.content-page:target ~ nav {
  opacity:1;
}