@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/variables";

@import "base/base";
@import "base/typography";
@import "base/utilities";


// components
@import "components/button";

// pages
@import "pages/productOverview";

/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/

/* Orbitron */
@font-face {
    font-family: "Orbitron";
    src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: "Orbitron";
    src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: "Orbitron";
    src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
  }
  @font-face {
    font-family: "Orbitron";
    src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
  }
  /* Orbitron end */
  /* Satoshi */
  @font-face {
    font-family: "Satoshi";
    src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
  }
  
  /* Satoshi end */

  .satoshi_font{
    font-family: "Satoshi", sans-serif;
  }
  
  // html {
  //   font-size: 100%; }
  
  // body {
  //   box-sizing: border-box; 
  //   overflow-x: hidden;
  // }
  //   @media only screen and (max-width: 56.25em) {
  //     body {
  //       padding: 0; } 
  //   }
  
  .bg-green {
    background-color: #3bb78f;
    background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%); }
  

  /* button */
  .button_dark {
    clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
    padding-right: 1.7rem;
    padding-bottom: 0.6rem;
    padding-top: 0.6rem;
    border-radius: 10px; }
  /* footer */
  .footer-wrapper {
    background-color: rgb(0, 0, 0);
    border-radius: 0 275px 0 0;
    clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
  }
  .footer-wrapper li {
    line-height: 2rem;
  }