a {
  font-weight: $base-font-bold;
  text-decoration: none;
  color: $light-red;
  text-shadow:  1px 1px $dark-white ,2px 2px $darker-white;
}

blockquote a {
  color: $blue;
  text-shadow: none;
  &:hover {
    border-bottom: 1px dashed $blue;
  }
}

/**
 * btn
 */

.btn-primary {
  width: auto;
  height: auto;
  padding: 5px 10px;
  @include border-radius(20px);
  @include transition-duration(0.5s);
  text-shadow: none;
  border: 2px solid $blue;
  color: $blue;
  background-color: transparent;
  &:hover,
  &:active {
    background-color: rgba(98, 179, 245, 0.2);
  }
}

.btn-blue {
}

.btn-white {
  border: 2px solid $white;
  color: $white;
  background-color: transparent;
  &:hover,
  &:active {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
.btn-left {
    border-radius: 1em 1em 1em 0;
}
.btn-right {
    border-radius: 1em 1em 0 1em;
}
.btn-top {
  font-size: 3em;
  position: fixed;
  bottom: 40px;
  right: 20px;
}

.btn-pagination {
  color: $blue;
  &:hover,
  &:active {
    color: $light-red;
  }
}

.post-pagination {
  height: 1.5em;
  margin-top: 1.5em;
  .next {
    float: right;
  }
}

.page-holder {
	text-align: center;
	a {
		color: $blue;
		text-align: center;
		cursor: pointer;
        display: inline-block;
        height: 25px;
        width: 25px;
		&:not(:last-child) {
			margin-right: 5px;
		}
	}
	span {
		color: $blue;
		font-weight: $base-font-bold;
        text-shadow:  1px 1px $dark-white ,2px 2px $darker-white;
        margin: 0 5px;
	}
	.jp-current {
        pointer-events: none;
        cursor: auto;
        @include border-radius(0.3em);
        background-color: $blue;
        text-shadow: none;
        color: $white;
        box-shadow: 1px 1px 0 1px $darker-white;
        -webkit-box-shadow: 1px 1px 0 1px $darker-white;
    }
	.jp-disabled {
		color: $grey-color;
		cursor: auto;
		event-pointers:none;
	}
}

/**
* Post Tab
**/

.posts-tabs {
	border-bottom: 2px solid $blue;
	margin-bottom: 20px;
	color: $grey-color;
	max-height: 2em;
	overflow: hidden;
	.posts-tab-item {
		display: inline-block;
		width: 4em;
		margin-right: 0.5em;
		padding-top: 0.2em;
		padding-bottom: 0.2em;
		color: $blue;
		cursor: pointer;
		text-align: center;
		border: 2px solid $blue;
		border-bottom: none;
		&.active {
			color: $white;
			background-color: $blue;
		}
	}
	i {
		position: relative;
		margin-left: 1.6em;
		margin-right: 1.6em;
	}
	i:first-of-type {
		margin-left: 2.4em;
	}
	i:nth-of-type(2n) {
		bottom: 0.4em;
		transform: rotate(80deg);	
	}
	i:nth-of-type(2n+1) {
		transform: rotate(100deg);	
	}
}
.tab-hidden {
	display: none;
}


/**
 * title
 */

.post-title {
  display: inline-block;
  max-width: 75%;
  color: $light-red;
  text-shadow: 1px 1px $dark-white, 2px 2px $darker-white;
  &:hover {
    text-shadow: 1px 1px $dark-white, 2px 2px $light-blue;
  }
}

.entry-title {
  color: $blue;
  a {
    color: $blue;
    text-shadow: none;
    &:hover {
      border-bottom: 1px dashed $blue;
    }
  }
}


/**
 * comment
   I use Gitalk as comment system and want to change the default style of the Gitalk
 */
#gitalk-container .gt-container {
  .gt-btn {
    border: 1px solid $blue;
    background-color: $blue;
  }

  .gt-btn-preview {
    background-color: $white;
    color: $blue;
    &:hover {
      background-color: rgba(98, 179, 245, 0.2);
    }
  }

  a {
    color: $blue;
    text-shadow: 1px 1px $dark-white, 2px 2px $darker-white;
    &:hover {
      text-shadow: 1px 1px $dark-white, 2px 2px $light-blue;
    }
  }

  .gt-link {
    border-bottom: 1px dotted $blue;
  }
  .gt-comment-admin .gt-comment-content {
    background-color: rgba(98, 179, 245, 0.2);
  }

  .gt-svg svg {
    fill: $blue;
  }

  .gt-spinner::before {
    border-top-color: $blue;
  }

  .gt-btn-public:hover {
    background-color: $blue;
    border-color: $blue;
  }

  .gt-error {
    color: $light-red;
  }

  .gt-user .is--poping .gt-ico svg {
    fill: $blue;
  }

  .gt-popup .gt-action.is--active:before {
    background: $blue;
  }

  .gt-header-controls-tip, .gt-comment-username{
    color: $blue;
  }

}