:root {
  /*    colors    */
  --primary-color: #013b51;
  --primary-color-transparent: #013a51f0;
  --secondary-color: #e72a2f;
  --active-color: #f28d79;
  --white-color: #ffff;
  --light-gray-color: #bcc3ca;

  /*   screen width   */
  --desktop-screen: 1600px;
  --small-screen: 768px;
  --mobile-screen: 480px;

  /*   height    */
  --full-height: 100vh;
  --height-90: 90vh;
  --height-80: 80vh;
  --height-70: 70vh;
  --height-60: 60vh;
  --half-height: 50vh;
  --height-40: 40vh;
  --height-30: 30vh;
  --height-50: 50%;
  /* fixed height */
  --height-fixed-6: 6px;
  --height-fixed-4: 4px;
  --height-fixed-2: 2px;

  /*   width    */
  /* relative width */
  --half-width: 50vh;
  --full-width: 100vh;
  --width-100: 100%;
  --width-97: 97%;
  --width-95: 95%;
  --width-92: 92%;
  --width-90: 90%;
  --width-85: 85%;
  --width-80: 80%;
  --width-60: 60%;
  --width-50: 50%;
  --width-40: 40%;
  --width-35: 35%;
  --width-25: 25%;
  /* fixed width*/
  --width-200: 200px;
  --width-250: 250px;
  --width-fixed-165: 165px;
  --width-fixed-50: 50px;
  --width-fixed-40: 40px;
  --width-fixed-30: 30px;
  --width-fixed-28: 28px;
  --width-fixed-25: 25px;
  --width-fixed-16: 16px;
  --width-fixed-10: 10px;

  /*    spacing   */
  --spacing-1: 1rem;
  --spacing-2: 2rem;
  --spacing-3: 3rem;
  --spacing-4: 4rem;
  --spacing-12: 12%;
  --spacing-5: 5%;
  --spacing-fixed-6: 6px;
  --spacing-fixed-15: 15px;
  --spacing-fixed-10: 10px;

  /*    font size    */
  --font-size-huge: 72px;
  --font-size-headline: 46px;
  --font-link-desktop: 16px;
  --font-24: 24px;

  /* mobile */
  --font-huge-mobile: 32px;
  --font-link-mobile: 14px;
  --font-paragraph-mobile: 18px;
  
  /*    font weight    */
  --weight-black: 900;
  --weight-light: 300;

  /*    line-height    */
  --line-height-medium: 1.2;
  --line-height-large: 1.5;
  --line-height-xlarge: 1.7;

  /*    letter spacing    */
  --letter-default-spacing: 0.025rem;
  --letter-spacing-2: 2px;

  /*    transition    */
  --transition-short-duration: .3s;
  --transition-normal-duration: .5s;
  --transition-duration-7: .7s;
  --transition-long-duration: 1.2s;

  /*    border    */
  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;

  /*    radius    */
  --radius-10: 10px;

  /*    shadow    */
  --shadow-1: 1px;
  --shadow-2: 2px;
  --shadow-3: 3px;
}