:root {
  --audio-default: #f1f3f4;
  --primary-color: #307dfa;
  --black-bg-color: #0f172a;
  --gray-100-color: #e9eaf0;
  --blue-500: #3b82f6;
  --link-water-color: #cbd5e1;
  --gray-color: #64748b;
  --azure-color: #f7f9f969;
  --night-rider-color: #2b2b3d;
  --surface-0: #ffffff;
  --resolution-blue-color: #1e3a8a;
  --royal-blue-color: #1e3a8ae5;
  --text-default-text: #1e293b;
  --text-help-txt: #0081ff;
  --solitude-color: #f3f4f6;
  --gray-900: #1d2026;
  --gray-500: #8c94a3;
  --alice-blue: #eff6ff;
  --malachite-color: #22c55e;
  --orange-color: #f97316;
  --orange-trans-color: #fff7ed;
  --green-color: #22c55e;
  --red-color: #ef4444;
  --purple-color: #6366f1;
  --light-green-color: #f0fdf4;
  --light-gray-color: #e2e8f0;
  --light-white-color: #f8fafc;
  --night-shadow-color: #1d20261f;
  --secondary-blue-color: #1d4ed8;
  --primary-primary-5: #fff6e7;
  --auth-bg-layout-color: #e6f2ff;
  --white-color: #ffffff;
  --primary-text-color: #64748b;
  --text-secondary-text: #9e9e9e;
  --text-warning-text: #f0753d;
  --text-primary-text: #ff8110;
  --utility-primary: #ffa60b;
  --buttons-primary-transparent: #f8e9ce;
  --buttons-primary: #ff8110;
  --text-primary-txt: #ff8110;
  --text-third-txt: #102c51;
  --text-additional-txt: #005cb5;
  --surfaces-gray-bg-2: #c6c6c6;
  --surfaces-hover-bg: #fff5d7;
  --primary-primary-1: #fff5d7;
  --text-secondary-txt: #8c8e90;
  --surfaces-inactive-bg: #e5e5e5;
  --buttons-system-transparent: #e5e5e5;
  --surfaces-primary-bg: #ff8110;
  --state-danger-background: #ff0000;
  --text-danger-txt: #ff0000;
  --border-primary-br: #d1d1d1;
  --primary-primary-0: #fff2e7;
  --primary-primary-2: #ffd7b6;
  --primary-primary-3: #ffab5f;
  --primary-primary-default: #ff8110;
  --border-accent-br: #ff8110;
  --primary-primary-10: #102c51;
  --primary-primary-11: #e6f2ff;
  --state-warning-background: #ff611d;
  --surfaces-body-bg: #fff;
  --surfaces-black-bg: #000000;
  --primary-primary-7: #e2e8fe;
  --text-fourth_text: #64748b;
  --text-text-on-highlight: #734b05;
  --forms-third-border: #e0e0e0;
  --opacity-black-12: rgba(0, 0, 0, 0.12);
  --shadow-shadow-8: rgba(0, 0, 0, 0.08);
  --primary-primary-opacity: rgba(255, 166, 11, 0.3);
  --forms-fourth-border: #ffbd49;
  --surfaces-sixth-bg: #eee;
  /* success text */
  --font-size-5: 0.313rem;
  --font-size-6: 0.375rem;
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.938rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;
  --font-size-48: 3rem;
  --font-size-80: 5rem;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-900: 900;
  --line-height-16: 1rem;
  --line-height-20: 1.25rem;
  --line-height-22: 1.375rem;
  --line-height-24: 1.5rem;
  --line-height-28: 1.75rem;
  --line-height-32: 2rem;
  --line-height-36: 2.25rem;
  --line-height-40: 2.5rem;
  --line-height-57: 3.563rem;
  --line-height-96: 6rem;
  --base-border-radius: 1.5rem;
  --border-radius-12: 0.75rem;
  --border-radius-20: 1.25rem;
  --border-radius-8: 0.5rem;
  --border-radius-24: 1.5rem;
  --pixels-to-rem-40: 2.5rem;
  --border-24: 1.5rem;
  --font-font-size-heading-h6: 1.125rem;
  --spacing-8: 0.5rem;
  --spacing-11: 0.69rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-20: 1.25rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --margin: 3.5rem;
  --padding: 4.5rem;
  --surfaces-footer-background: #1d347a;
  --forms-border: #262626;
  --form-third-border: #e0e0e0;
  --surfaces-sixth-bg: #eeeeee;
  --buttons-warning-transparent: #fef1ec;
  --buttons-info-transparent: #f0f9ff;
  --buttons-pink-transparent: #fdf2fa;
  --buttons-purple-transparent: #f4f3ff;
  --text-warning: #f0753d;
  --text-info: #175cd3;
  --text-pink: #c11574;
  --text-default-text: #000000;
  --text-on-highlight: #734b05;
  --text-danger-text: #ff0000;
  --text-success-text: #22c55e;
  --utility-primary-transparent: #fff5e8;
  --primary-2: #ffbd49;
  --surface-primary: #ffa60b;
  --red-red-50: #ffecee;
  --pink-pink-600: #db2777;
  --purple-purple-600: #9333ea;
  --orange-orange-50: #fff6e7;
  --buttons-success-transparent: #f0fdf4;
  --text-third-text: #1d347a;
  --surface-black: #000000;
  --buttons-system-active: #000000;
  --text-default-txt: #000000;
  --danger-text: #ff3d57;
  --message-success: #dcfce7;
  --message-error: #ffe6e6;
  --primary-default: #ff8110;
  --border-primary: #d1d1d1;
  --surfaces-hover-bg: #fff5d7;
  --buttons-primary-transparent: #fff5d7;
  --buttons-system-transparent: #0000000a;
  --surfaces-fifth-bg: #fafafa;
  --overlay-black-bg: #000000b3;
  --border-second-br: #8c8e90;
  --border-primary-br: #d1d1d1;
  --shadow-black-40: #00000040;
  --shadow-shadow-12: #0000001f;
  --shadow-shadow-6: #0000000f;
  --shadow-shadow-25: #00000040;
  --primary-primary-0: #fff2e7;
  --state-success-transparent: #f0fdf4;
  --Buttons-Success-Transparent: #f0fdf4;
  --text-success-txt: #22c55e;
  --state-success-background: #22c55e;
  --state-help-transparent: #e6f2ff;
  --state-info-transparent: #f0f9ff;
  --text-info-txt: #0ea5e9;
  --text-info-text: #0ea5e9;
  --buttons-help-transparent: #eff6ff;
  --border-primary-br: #d1d1d1;
  --border-accent-br: #ff8110;
  --border-accent-hover-border: #ffd7b6;
  --primary-primary-2: #ffd7b6;
  --accent-focus-border: #ffab5f;
  --normal-button-border-radius: 6.25rem;
  --normal-button-width: 7.5rem;
  --normal-button-height: 3rem;
  --surfaces-primary-bg-active: #e8750f;
  --text-secondary-txt: #8c8e90;
  --large-button-width: 11.25rem;
  --large-button-height: 3.5rem;
  --font-family-font-family-fz-poppins: "FZ Poppins";
  --font-family-font-family-pretendard: "Pretendard";
  --border-radius-20: 1.25rem;
  --border-radius-8: 0.5rem;
  --text-dark-txt: #717273;
  --spring-green-color-family: #19d257;
  --border-black-br: #2f2f2f;
  --border-white-br: #ffffff;
  --text-white-txt: #ffffff;
  --primary-primary-4: #ff9a40;
  --loading-panel-bg-color: #ffffffab;
  --downloader-border-color: #e4ecf5;
  --downloader-bg-color: #f8fafe;
  --animate-delay: 0.9s; /*Animate.CSS Delay*/
  --border-radius-32: 2rem;
  --shadow-shadow-25: rgba(0, 0, 0, 0.25);
  --orange-orange-50: #fff2e7;
  --orange-orange-100: #fff5d7;
  --orange-orange-200: #ffd7b6;
  --orange-orange-300: #ffab5f;
  --orange-orange-400: #ff9a40;
  --green-500: #22c55e;
  --blue-blue-900: #102c51;
  --blue-blue-50: #e6f2ff;
  --indigo-indigo-500: #1d347a;
  --gray-gray-500: #8c8e90;
  --border-error-br: #f00;
  --state-danger-transparent: #ffe6e6;
  --state-warning-transparent: #ffefe8;
  --state-info-background: #0ea5e9;
  --surfaces-primary-bg: #ff8110;
}

@media (max-width: 768px) {
    /* Styles for phones */
    :root {
        --font-size-5: 0.313rem;
        --font-size-6: 0.375rem;
        --font-size-12: 0.75rem;
        --font-size-14: 0.875rem;
        --font-size-15: 0.938rem;
        --font-size-16: 1rem;
        --font-size-18: 1.1rem;
        --font-size-20: 1.125rem;
        --font-size-24: 1.25rem;
        --font-size-28: 1.5rem;
        --font-size-30: 1.75rem;
        --font-size-32: 1.5rem;
        --font-size-36: 2rem;
        --font-size-48: 2.5rem;
        --font-size-80: 5rem;
    }
}