html {
  font-family: 'Noto Sans', 'sans-serif', 'Microsoft Jhenghei';
  width: 100%;
  height: 100%; }

body {
  color: #222;
  display: flex;
  min-height: 100vh;
  flex-direction: column; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
  line-height: 1.7em;
  color: #7f8c8d;
  font-size: 13px; }

h1,
h2,
h3,
h4,
h5,
h6,
label {
  color: #34495e; }

.pure-img-responsive {
  max-width: 100%;
  height: auto; }

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
  padding: 1em; }

.l-box-lrg {
  padding: 2em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.is-center {
  text-align: center; }

/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */
.home-menu {
  padding: 0.5em;
  text-align: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }

.home-menu {
  background: #2d3e50; }

.pure-menu.pure-menu-fixed {
  /* Fixed menus normally have a border at the bottom. */
  border-bottom: none;
  /* I need a higher z-index here because of the scroll-over effect. */
  z-index: 4; }

.home-menu .pure-menu-heading {
  color: white;
  font-weight: 400;
  font-size: 120%; }

.home-menu a {
  color: white; }

.home-menu li a:hover,
.home-menu li a:focus {
  background: none;
  border: none;
  color: #AECFE5; }

.content {
  width: 50%;
  margin: auto; }

.about, .l-box-lrg.is-center.pure-u-1.pure-u-md-1-2.pure-u-lg-2-5 {
  text-align: center;
  margin: auto; }

/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */
.splash-container {
  background: #5EB1E8;
  z-index: 1;
  overflow: hidden;
  /* The following styles are required for the "scroll-over" effect */
  width: 100%;
  height: 88%;
  top: 0;
  left: 0;
  position: fixed !important; }

.splash {
  /* absolute center .splash within .splash-container */
  width: 80%;
  height: 50%;
  margin: auto;
  position: absolute;
  top: 100px;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase; }

/* This is the main heading that appears on the blue section */
.splash-head {
  font-size: 20px;
  font-weight: bold;
  color: white;
  border: 3px solid white;
  padding: 1em 1.6em;
  font-weight: 100;
  border-radius: 5px;
  line-height: 1em; }

/* This is the subheading that appears on the blue section */
.splash-subhead {
  color: white;
  letter-spacing: 0.05em;
  opacity: 0.8; }

.content-wrapper {
  /* These styles are required for the "scroll-over" effect */
  position: absolute;
  top: 87%;
  width: 100%;
  min-height: 12%;
  z-index: 2;
  background: white; }

.content-head {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 2em 0 1em; }

.content-head-ribbon {
  color: white; }

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
  color: #1f8dd6; }

.content-subhead i {
  margin-right: 7px; }

/* This is the class used for the dark-background areas. */
.ribbon2 {
  background: #2d3e50;
  color: #aaa; }

/* This is the class used for the footer */
.footer {
  background: #111;
  text-align: right; }

.footer a {
  color: white; }

@media (min-width: 48em) {
  /* We increase the body font size */
  body {
    font-size: 16px; }

  /* We want to give the content area some more padding */
  .content {
    padding: 1em; }

  /* We can align the menu header to the left, but float the
  menu items to the right. */
  .home-menu {
    text-align: left; }

  .home-menu ul {
    float: right; }

  /* We increase the height of the splash-container */
  /*    .splash-container {
          height: 500px;
      }*/
  /* We decrease the width of the .splash, since we have more width
  to work with */
  .splash {
    width: 50%;
    height: 50%; }

  .splash-head {
    font-size: 250%; }

  /* We remove the border-separator assigned to .l-box-lrg */
  .l-box-lrg {
    border: none; } }
/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
  .splash-head {
    font-size: 300%; } }
.ribbon-container {
  z-index: 100000;
  position: relative;
  display: inline-block;
  line-height: 1; }

.ribbon {
  position: fixed;
  bottom: 1em;
  left: 0;
  margin-right: 1em;
  padding: .75em 1.25em .75em .75em;
  border-radius: 0 .5em .5em 0;
  background-color: #39f;
  background-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
  box-shadow: inset 0 0.062em 0 rgba(255, 255, 255, 0.6), 0 0.125em 0.25em rgba(0, 0, 0, 0.2);
  color: #fff;
  text-shadow: 0 -0.062em 0 rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  transition: background-color .2s ease-in-out; }

.ribbon:before,
.ribbon:after {
  position: absolute;
  background-color: inherit;
  content: ""; }

.ribbon:before {
  bottom: 0;
  left: -.5em;
  width: .5em;
  height: 3em;
  border-radius: 0 0 0 .5em;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 100%); }

.ribbon:after {
  top: -1em;
  left: -.5em;
  width: .5em;
  height: 1em;
  border-radius: .5em 0 0 .5em;
  background-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  box-shadow: 0 0.062em 0 rgba(255, 255, 255, 0.6); }

.ribbon-container:hover .ribbon {
  background-color: #7acc29; }