/*-----------------------------------*\
  #variable.css
\*-----------------------------------*/

/**
 * copyright 2022 @codewithsadee
 */





/*-----------------------------------*\
  #VARIABLE
\*-----------------------------------*/

:root {



    /**
     * colors 
     */
      --primary: #fff;
      --secondery: #a2a2a2;
      --accent: #ffbc47;
      --main-color:#e2c78c;
      --darkblue:#0D1F2B;
     --darkblue2:#0D2E44;
     --darkblue3: #254ca2;
     --light-color:#666;
     --white:#fff;
     --light-gray: hsl(0, 0%, 80%);
     --cultured: hsl(228, 26%, 96%);
     --white: hsl(0, 0%, 100%);
  
  
     --primary1: #472D2D;
     --primary2: #553939;
     --primary3: #704F4F;
     --primary4: #A77979;
     
  
     --strong-cyan: hsl(171, 66%, 44%);
     --light-blue: hsl(233, 100%, 69%);
     --dark-grayish-blue: hsl(210, 10%, 33%);
     --grayish-blue: hsl(201, 11%, 66%);
  
     --main-nav: rgb(223, 210, 210);
    --red-orange-color-wheel: hsl(15, 100%, 55%);
    --ultramarine-blue: hsl(217, 100%, 50%);
    --lavender-blue: hsl(229, 96%, 91%);
    --oxford-blue: hsl(229, 98%, 22%);
    --light-gray: hsl(0, 0%, 80%);
    --sonic-silver: hsl(0, 0%, 47%);
    --blue-crayola: hsl(216, 98%, 52%);
    --cultured: hsl(228, 26%, 96%);
    --white: hsl(0, 0%, 100%);
  
    --clr-bg: hsl(273, 75%, 66%);
    --clr-stroke: hsl(240, 5%, 91%);
    --clr-white: hsl(0, 100%, 100%);
    --clr-text-dark: hsl(240, 6%, 50%);
    --clr-text-darker: hsl(237, 12%, 33%);
    --gradient-bg: 
            linear-gradient(
            hsl(273, 75%, 66%), 
            hsl(240, 73%, 65%));
            
    /**
     * typography 
     */
  
     --fs-1: 48px;
     --fs-2: 44px;
     --fs-3: 38px;
     --fs-4: 36px;
     --fs-5: 32px;
     --fs-6: 28px;
     --fs-7: 24px;
     --fs-8: 22px;
     --fs-9: 18px;
     --fs-10: 16px;
     
     --fs-11: 14px;
     --fs-12: 12px;
  
     --fw-5: 300;
     --fw-6: 400;
     --fw-7: 500;
     --fw-8: 600;
     --fw-9: 700;
     --fw-10: 900;
     --fw-11: 1000;
    /**
     * spacing 
     */
  
    --px: 15px;
    --py: 80px;
  
    /**
     * others 
     */
  
    --default-transition: 0.25s ease;
  
  }