/* PRE-STE STYLESHEET */

/*Creating variables to make the color parameters easier to aplicate*/
:root{
    /* MAIN COLORS */
    --clr-light:#ffffff;
    --clr-dark:#1e1e1e;
    --clr-slate400:#dddddd;
    --clr-slate600:#768ba8;
    --clr-slate800:#212d41;
    --clr-interaction:#3483dd;
    --clr-options:#2ecc71;
    --clr-info:#f1c40f;
    /* rose rgb(225, 29, 72) */
  
        /* FONT SIZING */
    --size-2xs	: 0.5em; /*8px*/ 
    --size-xs	: 0.75rem; /* 12px */
    --size-sm	: 0.875rem; /* 14px */
    --size-base: : 1rem; /* 16px */
    --size-lg	: 1.125rem; /* 18px */
    --size-xl	: 1.25rem; /* 20px */
    --size-2xl:  1.5rem; /* 24px */
    --size-3xl:  1.875rem; /* 30px */
    --size-4xl:  2.25rem; /* 36px */
    --size-5xl:  3rem; /* 48px */
    --size-6xl:  3.75rem; /* 60px */
    --size-7xl:  4.5rem; /* 72px */
    --size-8xl:  6rem; /* 96px */
    --size-9xl:  8rem; /* 128px */
    --size-10xl:  10rem; /* 160px */
  
  }
  
  /* GEN PRE-SETTING */
  *{  
    margin: 0;
    line-height: calc(1em + 0.5rem);
  }
  
  html{
    scroll-behavior: smooth;
    
  }
   
  body{
    /* font-family: 'General Sans', sans-serif; */
    /* font-family: 'Roboto', Helvetica, Arial, sans-serif; */
    /* font-family: 'Lato', Helvetica, Arial, sans-serif; */
    font-family: 'Montserrat', Arial, sans-serif;
    overflow-x: hidden;
    background-color: var(--clr-dark);
    color: var(--clr-light);
    height: 100vh;
    width: 100vw;
  }
  h1, .icon{
    text-transform: uppercase;
    /*Reduce space between letters*/
    letter-spacing: -0.09em;
  }
  
  strong{
    color:var(--clr-slate400);
  }
  a{
    color: var(--clr-interaction);
    font-weight: 600;
    text-decoration:none;
  }
  li{
    list-style: none;
  }
  ul{
    list-style-type: none;
    padding: 0;
  }
  .button{
    display: inline-block;
    background-color: var(--clr-interaction);
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 10px 20px;
  }
  h1,h2,h3,h4,h5{
    cursor: default;
  }
  
   img,video,picture,
  video,canvas,svg{
    display: block;
    max-width: 100%;
    user-select: none;
  }