/*
* littlelink.io
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/*
* Built using on:
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––

- Buttons
- Brand Styles

*/

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button,
  button {
    display: inline-block;
    text-decoration: none;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    width: 300px;
    font-weight: 700;
    line-height: 20px;
    padding: 14px 12px 12px 12px;
    letter-spacing: 0.1px;
    white-space: wrap;
    outline: none;
    border-radius: 8px;
    cursor: pointer;
    
  }

button:hover,
  .button:focus {
    color: #212121;
    border-color: #888;
    outline: #7AB8FF solid 3px
  }

.button.button-primary {
  color: #fff;
  filter: brightness(90%);
}

.button.button-primary:hover,
  .button.button-primary:focus {
    color: #fff;
    filter: brightness(90%);
  }

/* Brand Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.icon {
  padding: 0px 8px 3.5px 0px;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  filter: invert(1);
}

/* Brand Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Default (this is great for your own brand color!) */
.button.button-default {
  color: #ffffff;
  background-color: #2457F5;
}

.button.button-default:hover,
  .button.button-default:focus {
    filter: brightness(90%);
  }

  /* 42 */
.button.button-42 {
  color: #ffffff;
  background-color: #32C7C9;
}

.button.button-42:hover,
  .button.button-42:focus {
    filter: brightness(90%);
  }

/* GitHub */
.button.button-github {
  color: #ffffff;
  background-color: #000000;
  border: 1px solid #FFFFFF;
}

.button.button-github:hover,
  .button.button-github:focus {
    filter: brightness(90%);
  }

/* GitLab */
.button.button-gitlab {
  color: #ffffff;
  background-color: #fc6d26;
}

.button.button-gitlab:hover,
  .button.button-gitlab:focus {
    filter: brightness(90%);
  }

/* Hack The Box */
.button.button-htb {
  color: #ffffff;             /* #9FEF01 */
  background-color: #1A2332;
}

.button.button-htb:hover,
  .button.button-htb:focus {
    filter: brightness(90%);
  }

/* LinkedIn */
.button.button-linked {
  color: #ffffff;
  background-color: #2867b2;
}

.button.button-linked:hover,
  .button.button-linked:focus {
    filter: brightness(90%);
  }

/* Notion */
.button.button-notion {
  color: #000000;
  border: 1px solid #212121;
  background-color: #ffffff;
}

.button.button-notion:hover,
  .button.button-notion:focus {
    filter: brightness(90%);
  }

/* Proton Mail */

.button.button-protonmail {
  color: #ffffff;
  background-color: #6d4aff;
}

.button.button-protonmail:hover,
  .button.button-protonmail:focus {
    filter: brightness(90%);
  }

/* Telegram */
.button.button-telegram {
  color: #ffffff;
  background-color: #3faee8;
}

.button.button-telegram:hover,
  .button.button-telegram:focus {
    filter: brightness(90%);
  }

/* TryHackMe */
.button.button-thm {
  color: #ffffff;
  background-color: #BF0D0E;
}
.button.button-thm:hover,
  .button.button-thm:focus {
    filter: brightness(90%);
  }

  /* Obsidian */
.button.button-obsidian {
  color: #ffffff;
  background-color: #483699;
}

.button.button-obsidian:hover,
  .button.button-obsidian:focus {
    filter: brightness(90%);
  }