:root{
    --body-color: hsl(0, 0%, 100%);
    --text-color: hsl(0, 0%, 13%);
    --links-color: '';
    --links-color-hover: '';
    --h1-color: '';
    --h2-color: '';
    --h3-color: '';
    --h4-color: '';
    --h5-color: '';
    --h6-color: '';
    --primary: hsl(0, 0%, 10%);
    --secondary: hsla(320, 2%, 39%, 1);
    --tertiary: hsla(190, 53%, 33%, 1);
    --light: hsl(0, 0%, 96%);
    --dark: #202020;
    --info: #80838a;
    --success: #3c9b5f;
    --warning: #e3c83f;
    --danger: #eb242c;
    --html-font-size: 16px;
    --body-font-family: 'Roboto';
    --body-font-size: 1rem;
    --body-line-height: 1.5;
    --body-font-weight: 400;
    --body-letter-spacing: 0;
    --h1-font-family: 'Roboto';
    --h1-font-size: 2.5rem;
    --h1-line-height: 1.2;
    --h1-font-weight: 500;
    --h1-letter-spacing: '';
    --h2-font-family: 'Roboto';
    --h2-font-size: 2rem;
    --h2-line-height: 1.2;
    --h2-font-weight: 500;
    --h2-letter-spacing: '';
    --h3-font-family: 'Roboto';
    --h3-font-size: 1.75rem;
    --h3-line-height: 1.2;
    --h3-font-weight: 500;
    --h3-letter-spacing: '';
    --h4-font-family: 'Roboto';
    --h4-font-size: 1.5rem;
    --h4-line-height: 1.2;
    --h4-font-weight: 500;
    --h4-letter-spacing: '';
    --h5-font-family: 'Roboto';
    --h5-font-size: 1.25rem;
    --h5-line-height: 1.2;
    --h5-font-weight: 500;
    --h5-letter-spacing: '';
    --h6-font-family: 'Roboto';
    --h6-font-size: 1rem;
    --h6-line-height: 1.2;
    --h6-font-weight: 500;
    --h6-letter-spacing: '';
    --primary-hover: hsla(0, 0%, 20%, 1);
    --primary-text: #ffffff;
    --primary-text-hover: #ffffff;
    --primary-letter-spacing: 0.5px;
    --primary-padding: 0.375rem 0.75rem;
    --primary-border: 1px;
    --primary-border-radius: 0px;
    --primary-border-style: solid;
    --primary-border-color: hsla(0, 0%, 10%, 1);
    --primary-border-hover: hsla(0, 0%, 20%, 1);
    --primary-icon: none;
    --primary-icon-width: 0px;
    --primary-icon-height: 0px;
    --primary-icon-inset: 6px auto auto 10px;
    --primary-icon-color: transparent;
    --primary-icon-color-hover: #ffffff;
    --secondary-hover: hsla(320, 2%, 30%, 1);
    --secondary-text: #ffffff;
    --secondary-text-hover: #ffffff;
    --secondary-letter-spacing: 0.5px;
    --secondary-padding: 0.375rem 0.75rem;
    --secondary-border: 1px;
    --secondary-border-radius: 0px;
    --secondary-border-style: solid;
    --secondary-border-color: hsla(320, 2%, 39%, 1);
    --secondary-border-hover: hsla(320, 2%, 30%, 1);
    --secondary-icon: none;
    --secondary-icon-width: 0px;
    --secondary-icon-height: 0px;
    --secondary-icon-inset: 6px auto auto 10px;
    --secondary-icon-color: transparent;
    --secondary-icon-color-hover: #ffffff;
    --btn-style-1: hsla(320, 2%, 39%, 1);
    --btn-style-1-hover: hsla(320, 2%, 30%, 1);
    --btn-style-1-text: #ffffff;
    --btn-style-1-text-hover: #ffffff;
    --btn-style-1-letter-spacing: 0.5px;
    --btn-style-1-padding: 0.375rem 0.75rem;
    --btn-style-1-border: 1px;
    --btn-style-1-border-radius: 0px;
    --btn-style-1-border-style: solid;
    --btn-style-1-border-color: hsla(320, 2%, 39%, 1);
    --btn-style-1-border-hover: hsla(320, 2%, 30%, 1);
    --btn-style-1-icon: none;
    --btn-style-1-icon-width: 0px;
    --btn-style-1-icon-height: 0px;
    --btn-style-1-icon-inset: 6px auto auto 10px;
    --btn-style-1-icon-color: transparent;
    --btn-style-1-icon-color-hover: #ffffff;
    --btn-style-2: hsla(320, 2%, 39%, 1);
    --btn-style-2-hover: hsla(320, 2%, 30%, 1);
    --btn-style-2-text: #ffffff;
    --btn-style-2-text-hover: #ffffff;
    --btn-style-2-letter-spacing: 0.5px;
    --btn-style-2-padding: 0.375rem 0.75rem;
    --btn-style-2-border: 1px;
    --btn-style-2-border-radius: 0px;
    --btn-style-2-border-style: solid;
    --btn-style-2-border-color: hsla(320, 2%, 39%, 1);
    --btn-style-2-border-hover: hsla(320, 2%, 30%, 1);
    --btn-style-2-icon: none;
    --btn-style-2-icon-width: 0px;
    --btn-style-2-icon-height: 0px;
    --btn-style-2-icon-inset: 6px auto auto 10px;
    --btn-style-2-icon-color: transparent;
    --btn-style-2-icon-color-hover: #ffffff;
    --btn-style-3: hsla(320, 2%, 39%, 1);
    --btn-style-3-hover: hsla(320, 2%, 30%, 1);
    --btn-style-3-text: #ffffff;
    --btn-style-3-text-hover: #ffffff;
    --btn-style-3-letter-spacing: 0.5px;
    --btn-style-3-padding: 0.375rem 0.75rem;
    --btn-style-3-border: 1px;
    --btn-style-3-border-radius: 0px;
    --btn-style-3-border-style: solid;
    --btn-style-3-border-color: hsla(320, 2%, 39%, 1);
    --btn-style-3-border-hover: hsla(320, 2%, 30%, 1);
    --btn-style-3-icon: none;
    --btn-style-3-icon-width: 0px;
    --btn-style-3-icon-height: 0px;
    --btn-style-3-icon-inset: 6px auto auto 10px;
    --btn-style-3-icon-color: transparent;
    --btn-style-3-icon-color-hover: #ffffff;
    --btn-style-4: hsla(320, 2%, 39%, 1);
    --btn-style-4-hover: hsla(320, 2%, 30%, 1);
    --btn-style-4-text: #ffffff;
    --btn-style-4-text-hover: #ffffff;
    --btn-style-4-letter-spacing: 0.5px;
    --btn-style-4-padding: 0.375rem 0.75rem;
    --btn-style-4-border: 1px;
    --btn-style-4-border-radius: 0px;
    --btn-style-4-border-style: solid;
    --btn-style-4-border-color: hsla(320, 2%, 39%, 1);
    --btn-style-4-border-hover: hsla(320, 2%, 30%, 1);
    --btn-style-4-icon: none;
    --btn-style-4-icon-width: 0px;
    --btn-style-4-icon-height: 0px;
    --btn-style-4-icon-inset: 6px auto auto 10px;
    --btn-style-4-icon-color: transparent;
    --btn-style-4-icon-color-hover: #ffffff;
    --btn-style-5: hsla(320, 2%, 39%, 1);
    --btn-style-5-hover: hsla(320, 2%, 30%, 1);
    --btn-style-5-text: #ffffff;
    --btn-style-5-text-hover: #ffffff;
    --btn-style-5-letter-spacing: 0.5px;
    --btn-style-5-padding: 0.375rem 0.75rem;
    --btn-style-5-border: 1px;
    --btn-style-5-border-radius: 0px;
    --btn-style-5-border-style: solid;
    --btn-style-5-border-color: hsla(320, 2%, 39%, 1);
    --btn-style-5-border-hover: hsla(320, 2%, 30%, 1);
    --btn-style-5-icon: none;
    --btn-style-5-icon-width: 0px;
    --btn-style-5-icon-height: 0px;
    --btn-style-5-icon-inset: 6px auto auto 10px;
    --btn-style-5-icon-color: transparent;
    --btn-style-5-icon-color-hover: #ffffff;
    --header-height: 72px;
    --header-background: hsl(0, 0%, 96%);
    --header-icons-color: #202020;
    --header-position: sticky;
    --header-logo-width: 200px;
    --headermobile-height: 48px;
    --headermobile-background: hsl(0, 0%, 96%);
    --headermobile-icons-color: hsl(0, 0%, 96%);
    --headermobile-position: sticky;
    --headermobile-logo-width: 150px;
    --footer-background: hsl(0, 0%, 12%);
    --footer-color: hsl(0, 0%, 100%);
    --footer-title-color: hsl(0, 0%, 100%);
    --footer-icons-color: hsl(0, 0%, 100%);
    --footer-bottom-background: hsl(0, 0%, 12%);
    --footer-bottom-color: hsl(0, 0%, 100%);
    --menu-color: hsl(0, 0%, 13%);
    --menu-color-hover: hsl(0, 0%, 10%);
    --menu-font-family: 'Roboto';
    --menu-font-size: 1rem;
    --menu-font-weight: 500;
    --menu-letter-spacing: '';
    --menu-gap: 20px;
    --menumobile-width: 280px;
    --menumobile-background: #202020;
    --menumobile-color: hsl(0, 0%, 96%);
    --menumobile-font-family: 'Roboto';
    --menumobile-font-size: 1rem;
    --menumobile-font-weight: 500;
    --menumobile-letter-spacing: '';
    --menumobile-gap: 5px;
    --menufooter-color: '';
    --menufooter-color-hover: '';
    --menufooter-font-family: 'Roboto';
    --menufooter-font-size: 0.85rem;
    --menufooter-font-weight: 400;
    --menufooter-letter-spacing: '';
    --menufooter-gap: 5px;
    --section-gap: 80px;
    --margin: 30px;
    }
    @font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: url("//fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf");
    }
    @font-face {
    font-family: 'Roboto';
    font-weight: 500;
    src: url("//fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9vAx05IsDqlA.ttf");
    }