tofuness/Toshocat

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('./fonts/roboto-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/roboto-v15-latin-300.woff') format('woff'); /* Modern Browsers */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('./fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/roboto-v15-latin-regular.woff') format('woff'); /* Modern Browsers */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('./fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/roboto-v15-latin-500.woff') format('woff'); /* Modern Browsers */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('./fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/roboto-v15-latin-700.woff') format('woff'); /* Modern Browsers */
}
/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black'),
       url('./fonts/roboto-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/roboto-v15-latin-900.woff') format('woff'); /* Modern Browsers */
}

/* vollkorn-regular - latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  src: local('Vollkorn Regular'), local('Vollkorn-Regular'),
       url('./fonts/vollkorn-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/vollkorn-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'),
       url('./fonts/oswald-v10-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/oswald-v10-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'),
       url('./fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@import url(https://file.myfontastic.com/E4KG3MY5eJGdB96mnocJZJ/icons.css);

.ns {
    -webkit-user-select: none;
    user-select: none;
    outline-style: none;
}
.st {
    -webkit-user-select: text;
    user-select: text;
}
.ts {
    transition: all 220ms cubic-bezier(0, .33, .2, 1);
}
.ts-slow {
    transition: all 800ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.ts-out {
    transition: all 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.mask {
    // Not sure what is happening but ok
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.cf:before, .cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
.hidden {
  display: none;
    visibility: hidden;
}
.hide {
    display: none!important;
}
.opensans {
    font-family: 'Open Sans', sans-serif;
}
.oswald {
    font-family: 'Oswald', sans-serif;
}
.vollkorn {
    font-family: 'Vollkorn', serif;
}
.roboto {
    font-family: 'Roboto', sans-serif;
}
.playfair {
    font-family: 'Playfair Display', serif;
}
.robotocondensed {
    font-family: 'Roboto Condensed', sans-serif;
}
.robotomono {
    font-family: 'Roboto Mono';
}
.button {
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 40px;
    font-size: ms(0);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.65px;
    border: 2px solid $lapis-blue;
    &:not(.added) {
        color: #fff;
        background: $lapis-blue;
        &.active {
            @extend .ts;
            color: $lapis-blue;
            background: transparent;
        }
        &:hover:not(.active) {
            background: $hoverable-blue-hover;
            border-color: $hoverable-blue-hover;
        }
        &:active:not(.active) {
            transform: translateY(1px);
            background: $hoverable-blue-active;
            border-color: $hoverable-blue-active;
        }
    }
}