@charset "UTF-8";

/*******************************************************************************
  Animations.
 ******************************************************************************/
@keyframes fadein {
  from {
    opacity:0;
  }
  
  to {
    opacity:1;
  }
}

/* For old broswers. */
@-webkit-keyframes fadein {
  from {
    opacity:0;
  }
  
  to {
    opacity:1;
  }
}

/*******************************************************************************
  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;
}

/* This sets the width of your content and setting margin
   to auto makes sure that it is centered on the page. */
#about_me_container {
  width:920px;
  margin:auto;
}

/*******************************************************************************
 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. */
  opacity:0;
/* Start with it hidden.          */
  animation:fadein 1s 1.5s forwards;
/* Then fade it in after a delay  */
  -webkit-animation:fadein 1s 1.5s forwards;
}

/* 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;
  opacity:0;
  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%;
  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;
  animation:fadein 1s .01s forwards;
  -webkit-animation:fadein 1s .01s forwards;
  height:auto;
  max-height:none;
  min-height:100vh;
}

/*Jmarc says it gets rid of scroll bars. */
.profile_section_content {
  padding:0;
  margin:0;
}

/*******************************************************************************
 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 {
  opacity:0;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  padding:0;
  z-index:-1;
  animation:fadein 2s .25s forwards;
  -webkit-animation:fadein 2s .25s forwards;
}

/* 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:0;
  font-family:'Alex Brush',cursive;
  animation:fadein 1s 1.5s forwards;
  -webkit-animation:fadein 1s 1.5s forwards;
  transition:color .5s ease;
}

.splash > span.jmarc {
  position:fixed;
  bottom:0;
  left:75%;
  color:rgb(300,300,300);
  padding:0 .2em;
  font-size:1.1em;
  opacity:0;
  font-family:'Alex Brush';
  animation:fadein 1s 1.5s forwards;
  -webkit-animation:fadein 1s 1.5s forwards;
  transition:color .5s ease;
}

/* 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;
}