@import './variables.styl';

body
  display: block;
  margin: 0;
  padding: 0;
  font-family: $font-family;
  // background-image: url('https://cdn.sencort.com/ooi/images/bg/city-buildings-up-lens.jpg');
  background-color: #fff;
  background-attachment: fixed;
  background-image: url('https://cdn.sencort.com/ooi/images/bg/sports.png');

.index-content

  .section
    margin-bottom: 20px !important;

    & > p
      text-align: left !important;
      margin-top: 30px !important;
      
      strong
        margin-bottom: 20px;

    pre
      margin-bottom: 0;
      font-family: 'Fira Code', 'Hack', 'Menlo', 'Consolas', monospace;
      font-size: 14px;
      line-height: 1.2em;
      background: #333;

a i.fa, a i.fas
  color: #F2994A;

i.fa, i.fas
  dosplay: inline-block;
  margin-right: 0.26em;

.markdown-body img
  max-width: none;

a.large-button
  padding: 15px 20px;
  background-color: #009e54;
  color: #fff !important;
  font-size: 1.2em;
  font-weight: 500;
  display: inline-block;
  border-radius: 5px;
  transition: 0.3s background-color;

  &:hover
    background-color: #F2994A;

    i.fa, i.fas
      color: #fff !important;
  
  &--secondary
    background-color: lighten(#ECEFF1, 80%);
    color: #263238;
    font-size: 1.1em;
    padding: 10px 15px 15px 15px;
    border-left: 3px solid #F2994A;

.markdown-body
  padding-top: $header-margin;

  // code
  // 	margin-bottom: 0;
  // 	font-family: 'Fira Code', 'Hack', 'Menlo', 'Consolas', monospace;
  // 	font-size: 14px;
  // 	line-height: 1.2em;
  // 	background: #ECEFF1;

.forum-teniryte
  font-family: $font-family;
  font-weight: $font-weight;
  font-size: $font-size;
  padding: $header-margin;
  margin: $header-margin;
  background-color: transparentify(#fff, 85%);
  width: 1300px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid lighten(#eee, 0%);
  border-radius: 5px;

  .marker
    font-size: 0.8em;
    position: relative;
    bottom: 1px;
    color: #607D8B;

  // p:first-of-type, p:nth-of-type(2)
  // 	display: flex;
  // 	justify-content: space-between;
  // 	margin: auto;
    
  // 	a
  // 		margin: 10px;
  // 		// transform: scale(1.3, 1.3);
  
  .section--header__slogan
    width: auto;
  
  p:first-of-type
    text-align: center;

    a

      img
        // width: 106px;
        // height: 20px;

  p:nth-of-type(2)
    justify-content: center;

  .contents

    a

      em
          display: inline-block;
          margin-right: 3px;
          font-style: normal;

  a
    color: #0087e0;
    font-weight: 500;

    &:hover
      text-decoration: none;
      color: #F2994A;

  .section--header

    img
      border-radius: 10px;
    
    h3
      font-size: 3em;
  
  .section--miniheader
    //

    img
      border-radius: 10px;
    
    h3
      font-size: 2em;
      margin-top: 0;
  
  .section
    font-family: $font-family;
    font-weight: $font-weight;
    font-size: $font-size;
    padding: 20px;
    margin: $header-margin;
    background-color: lighten(#eee, 50%);
    border: 1px solid #CFD8DC;
    border-radius: 5px;
    // background-image: linear-gradient(#ECEFF1, #CFD8DC);

    &--header
      text-align: center;

      &__menu
        
        span
          color: #aaa;
          display: inline-block;
          margin-left: 10px;
          margin-right: 10px;

      strong
        font-size: 1.1em;
      
      &__slogan
        font-size: 1.4em;
  
  ul
    margin-left: 30px;

  // Top Line ==================================================================

  h2
    margin-top: 0 !important;
    color: #263238 !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
    padding: 1em 1.1em 0.85em 1.1em !important;
    border-radius: 5px !important;
    background-color: lighten(#eee, 20%) !important;
    background-color: #fff !important;
    border: 1px solid lighten(#ccc, 60%) !important;
    font-size: 1.2em !important;

    em
      display: inline-block;
      margin-right: 20px;
      font-style: normal;
    
    a
      opacity: 0.2;
      color: #78909C;
      position: relative;
      bottom: 1px;

      &:hover
        opacity: 0.5;
        color: #78909C;

  h1
    font-family: $font-family;
    color: $text-color;
    font-weight: $font-weight;
    font-size: $header-font-size;
    padding-bottom: $header-margin;
    margin-bottom: $header-margin;

    em
      color: #546e7a;
      font-weight: 500;
      font-style: normal;
      background-color: #eceff1;
      border-radius: 5px;

  blockquote
    text-decoration: none;
    border: none;
    font-style: normal;
    font-size: 0.8em;
    font-weight: 400;
    margin-bottom: 10px;
    background-color: $light-bg;
    border-radius: $border-radius;
    padding: $badge-padding;
    padding-left: 20px;
    border-left: 3px solid #B0BEC5;
    transition: 0.3s margin-left, 0.3s padding-left;

    &:hover
      margin-left: 30px;
      padding-left: 30px;

    a
      text-decoration: none;
      color: #78909c;
      display: flex;