/* ================================================================ /

  Built by: 
    <3 Cheeriko      || https://github.com/cheeriko
    >  MIT License   || https://github.com/cheeriko/softserve/blob/main/LICENSE

  Built with: 
    <3 Vanilla CSS   || https://vanillacss.com/
    >  MIT License   || https://github.com/bradleytaunt/vanilla-css/blob/master/LICENSE

    <3 Bootstrap 4   || https://getbootstrap.com/docs/4.0/getting-started/introduction/
    >  MIT License   || https://getbootstrap.com/docs/4.0/about/license/

  Inspired by: 
    <3 Milligram CSS || https://milligram.io/
    >  MIT License   || https://github.com/milligram/milligram/blob/master/license

    <3 Chota CSS     || https://jenil.github.io/chota/
    >  MIT License   || https://github.com/jenil/chota/blob/master/LICENSE

/ ================================================================= /

  Directory 
  > ctrl + f to find these sections

    1.  <3 Body
    2.  <3 Headers
    3.  <3 Links
    4.  <3 Typography
    5.  <3 Blockquote
    6.  <3 Code 
    7.  <3 HR 
    8.  <3 Images
    9.  <3 Lists
    10. <3 Table
    11. <3 Utility
    12. <3 Scrollbar
    13. <3 Forms
    14. <3 Buttons
    15. <3 Card
    16. <3 Pagination
    17. <3 Collapse
    18. <3 Modal
    19. <3 Carousel
    20. <3 Navbar
    21. <3 Navbar Dropdown
    22. <3 Footer
    23. <3 Borders
    24. <3 Text
    25. <3 Backgrounds
    26. <3 Containers
    27. <3 Rows
    28. <3 Columns
    29. <3 Display
    30. <3 Flex & Justify
    31. <3 Spacing
    32. <3 Height & Width

/ ================================================================= /
 Font Import
================================================================== */

  @import url("https://fonts.googleapis.com/css?family=Pacifico|Fredoka:400,700");

/* ================================================================ /
 Variables
================================================================== */
:root {

  /* Element Colors
  ================================================================ */

  /* Primary Colors */
  --ss-primary-color: #9b834c;
  --ss-primary-font-color: var(--ss-color-light);

  /* Secondary Colors */
  --ss-secondary-color: #ddc798;
  --ss-secondary-font-color: var(--ss-font-color-faded);

  /* Primary Colors */
  --ss-info-color: #93a987;
  --ss-info-font-color: var(--ss-primary-font-color);

  /* Primary Colors */
  --ss-success-color: #9b834c;
  --ss-success-font-color: var(--ss-primary-font-color);

  /* Primary Colors */
  --ss-warning-color: #d38d53;
  --ss-warning-font-color: var(--ss-primary-font-color);

  /* Danger Colors */
  --ss-danger-color: #b35840;
  --ss-danger-font-color: var(--ss-primary-font-color);

  /* All colors on Hover */
  --ss-base-color-hover: var(--ss-font-color-faded);
  --ss-base-font-color-hover: var(--ss-primary-font-color);


  /* Base Colors
  ================================================================ */
  
  /* Background Colors */
  --ss-background-color: #ebd9b3;
  --ss-background-color-faded: #e7d2a5;

  /* Font Colors */
  --ss-font-color: #976640;
  --ss-font-color-faded: #a17655;

  /* Other */
  --ss-color-light: var(--ss-background-color);
  --ss-color-dark: var(--ss-font-color);
    

  /* Font Styles
  ================================================================ */

  /* Font Sizes */
  --ss-font-size: 1.1rem;
  --ss-font-size-sm: .9rem;
  --ss-font-size-lg: 1.2rem;

  /* Font Family */
  --ss-font-family-body: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --ss-font-family-display: "Pacifico", var(--ss-font-family-body);
  --ss-font-family-code: "Monaco", "Consolas", "Lucida Console", monospace;

  /* Font Weight */
  --ss-font-weight: 400;
  --ss-font-weight-light: 300;
  --ss-font-weight-bold: 800;

  --ss-body-line-height: 1.2;

  
  /* Border Styles
  ================================================================ */
  
  --ss-border-color: rgb(151, 102, 64, .125);
  --ss-border-width: 0;
  --ss-border-style: solid;

  /* Border Radius */
  --ss-border-radius: 1.5rem;
  --ss-border-radius-sm: 1rem;
  --ss-border-radius-lg: 2rem;

    
  /* Body
  ================================================================ */

  /* Body Background */
  --ss-body-background-color: #b3985b;
  --ss-body-background-image: url(../assets/background.png);

  /* Body Font */
  --ss-body-font-color: var(--ss-font-color);
  --ss-body-font-family: var(--ss-font-family-body);
  --ss-body-font-size: var(--ss-font-size);
  --ss-body-font-weight: var(--ss-font-weight);

  /* Scrollbar */
  --ss-scrollbar-color: var(--ss-border-color);     

  
  /* Header Styles
  ================================================================ */
  
  /* Header Font Sizes */
  --ss-h1-font-size: 2.6rem;
  --ss-h2-font-size: 2.4rem;
  --ss-h3-font-size: 2rem;
  --ss-h4-font-size: 1.6rem;
  --ss-h5-font-size: 1.4rem;
  --ss-h6-font-size: 1rem;
  
  /* Header Font Styles */
  --ss-header-font-weight: 800;
  --ss-header-font-family: var(--ss-font-family-body);
  --ss-header-margin-bottom: var(--ss-spacer-2);


  /* Links
  ================================================================ */

  --ss-link-color: var(--ss-primary-color);
  --ss-link-color-hover: #79663b;
  

  /* HR
  ================================================================ */

  --ss-hr-border-color: var(--ss-border-color);
  --ss-hr-border-size: 1px;
  --ss-hr-border-style: solid;
  --ss-hr-border-spacer: var(--ss-spacer-3);

  /* Navbar
  ================================================================ */
  
  --tm-page-header-image: url(../assets/header.png);

  /* Navbar Background Styles */
  --ss-navbar-background-color: #75432e;
  --ss-navbar-background-image: url(../assets/wood_accent.png);

  /* Navbar Font Styles */
  --ss-navbar-font-color: var(--ss-color-light);
  --ss-navbar-font-color-hover: var(--ss-primary-color);
  --ss-navbar-font-family: var(--ss-font-family-body);
  --ss-navbar-font-size: var(--ss-body-font-size);
  --ss-navbar-icon-size: 1.1rem;
  
  /* Navbar Link Padding */
  --ss-navbar-link-padding-mobile: var(--ss-spacer-2) var(--ss-spacer-3);
  --ss-navbar-link-padding-desktop: var(--ss-spacer-3) var(--ss-spacer-2);
  
  /* Navbar Logo Styles */
  --ss-navbar-logo-font-color: var(--ss-navbar-font-color);
  --ss-navbar-logo-font-color-hover: var(--ss-navbar-font-color-hover);
  --ss-navbar-logo-font-size: var(--ss-navbar-font-size);
  --ss-navbar-logo-padding: var(--ss-spacer-1) var(--ss-spacer-3);

  /* Navbar Border Styles */
  --ss-navbar-border-width: 4px 0 6px;
  --ss-navbar-border-style: solid;
  --ss-navbar-border-color: rgba(62, 36, 24, 0.5);

  /* Navbar Container Width on Desktop */
  --ss-navbar-container-width: var(--ss-container-width);
  --ss-navbar-container-padding: calc(var(--ss-grid-gutter) + 1.5rem);

  /* Navbar Dropdown Styles */
  --ss-navbar-dropdown-background-color: #5c3727;
  --ss-navbar-dropdown-background-color-hover: #75432e;

  --ss-navbar-dropdown-link-padding-mobile: var(--ss-spacer-1) var(--ss-spacer-3);
  --ss-navbar-dropdown-link-padding-desktop: var(--ss-spacer-1) var(--ss-spacer-3);

  --ss-navbar-dropdown-divider-width: 1px;
  --ss-navbar-dropdown-divider-style: solid;
  --ss-navbar-dropdown-divider-color: rgba(255, 255, 255, .12);
  
  --ss-navbar-dropdown-icon-size: .5rem;
  --ss-navbar-dropdown-border-radius: .5rem;

    
  /* Footer
  ================================================================ */

  /* Footer Background Styles */
  --ss-footer-background-color: var(--ss-navbar-background-color);

  /* Footer Font Styles */
  --ss-footer-font-color: var(--ss-navbar-font-color);
  --ss-footer-font-family: var(--ss-font-family-body);
  --ss-footer-font-size: 1rem;

  /* Footer Padding Styles */
  --ss-footer-padding: var(--ss-spacer-5) var(--ss-spacer-4) var(--ss-spacer-4);

  /* Footer Link Styles */
  --ss-footer-link-color: var(--ss-navbar-font-color);
  --ss-footer-link-color-hover: var(--ss-navbar-font-color-hover);
  --ss-footer-link-padding: var(--ss-spacer-3) var(--ss-spacer-2);

    
  /* Inputs
  ================================================================ */
  
  /* Input Background Styles */
  --ss-input-background-color: var(--ss-secondary-color);

  /* Input Font Styles */
  --ss-input-font-color: var(--ss-font-color);
  --ss-input-placeholder-font-color: var(--ss-font-color-faded);
  --ss-input-font-size: var(--ss-font-size);
  --ss-input-font-weight: var(--ss-font-weight-bold);
  --ss-input-font-family: var(--ss-font-family-body);

  /* Input Border Styles */
  --ss-input-border-width: 1px;
  --ss-input-border-style: solid;
  --ss-input-border-color: transparent;
  --ss-input-border-hover: var(--ss-primary-color);
  --ss-input-border-radius: var(--ss-border-radius-sm);

  /* Input Spacing Styles */
  --ss-input-padding: .3rem var(--ss-spacer-3) .4rem;
  --ss-input-margin-bottom: 0;

  /* Input Label Styles */
  --ss-input-label-font-size: var(--ss-body-font-size);
  --ss-input-label-margin-bottom: var(--ss-spacer-1);

    
  /* Button
  ================================================================ */

  /* Button Font Styles */
  --ss-btn-font-family: var(--ss-font-family-body);
  --ss-btn-font-weight: var(--ss-font-weight-bold);
  --ss-btn-font-size: var(--ss-font-size);
  --ss-btn-text-transform: unset;

  /* Button Border Styles */
  --ss-btn-border-radius: var(--ss-border-radius);
  --ss-btn-border-width: var(--ss-border-width);
  --ss-btn-border-style: var(--ss-border-style);

  /* Button Spacing Styles */
  --ss-btn-padding: var(--ss-spacer-2) var(--ss-spacer-3);

  /* Button Small Styles */
  --ss-btn-sm-padding: calc(var(--ss-spacer-2) * .8) calc(var(--ss-spacer-3) * .8);
  --ss-btn-sm-font-size: var(--ss-font-size-sm);
  --ss-btn-sm-border-radius: var(--ss-border-radius-sm);

  /* Button Large Styles */
  --ss-btn-lg-padding: calc(var(--ss-spacer-2) * 1.5) calc(var(--ss-spacer-4) * 1.5);
  --ss-btn-lg-font-size: var(--ss-font-size-lg);
  --ss-btn-lg-border-radius: var(--ss-border-radius-lg);

  /* Button Badge Styles */
  --ss-btn-badge-padding: calc(var(--ss-spacer-1) / 2) var(--ss-spacer-3);
  --ss-btn-badge-font-size: var(--ss-font-size-sm);

    
  /* Card
  ================================================================ */

  /* Card Background Styles */
  --ss-card-background-color: var(--ss-background-color);

  /* Card Border Styles */
  --ss-card-border-width: var(--ss-border-width);
  --ss-card-border-style: var(--ss-border-style);
  --ss-card-border-color: var(--ss-border-color);
  --ss-card-border-radius: var(--ss-border-radius);
  
  /* Card Content Spacing Styles */
  --ss-card-content-padding: var(--ss-spacer-4);


  /* Card Header Styles ========================================== */

  /* Card Header Background Styles */
  --ss-card-header-background-color: var(--ss-primary-color);

  /* Card Header Font Styles */
  --ss-card-header-font-size: var(--ss-h4-font-size);
  --ss-card-header-font-color: var(--ss-primary-font-color);

  /* Card Header Border Styles */
  --ss-card-header-border-radius: var(--ss-card-border-radius);

  /* Card Header Spacing Styles */
  --ss-card-header-padding: var(--ss-spacer-3) var(--ss-spacer-4);


  /* Card Footer Styles ========================================== */

  /* Card Footer Font Styles */
  --ss-card-footer-font-color: var(--ss-font-color-faded);
  --ss-card-footer-font-size: var(--ss-font-size-sm);

  /* Card Footer Border Styles */
  --ss-card-footer-border-top-width: var(--ss-border-width);
  --ss-card-footer-border-top-style: var(--ss-border-style);
  --ss-card-footer-border-top-color: var(--ss-border-color);
  --ss-card-footer-border-radius: var(--ss-border-radius-sm);

  /* Card Footer Spacing Styles */
  --ss-card-footer-padding: var(--ss-spacer-2) var(--ss-spacer-4);

  
  /* Tooltips
  ================================================================ */
  --ss-tooltip-background-color: var(--ss-background-color-faded);
  --ss-tooltip-font-color: var(--ss-font-color);
  --ss-tooltip-border-radius: var(--ss-border-radius-sm);

  --ss-tooltip-padding: var(--ss-spacer-1) var(--ss-spacer-2);
  --ss-tooltip-arrow-size: 5px;
  --ss-tooltip-max-width: 150px;

    
  /* Modal
  ================================================================ */

  /* Modal Background Styles */
  --ss-modal-background-color: var(--ss-card-background-color);

  /* Modal Border Styles */
  --ss-modal-border-width: var(--ss-card-border-width);
  --ss-modal-border-style: var(--ss-card-border-style);
  --ss-modal-border-color: var(--ss-card-border-color);
  --ss-modal-border-radius: var(--ss-card-border-radius);

  /* Modal Content Spacing Styles */
  --ss-modal-outer-padding: var(--ss-spacer-3);
  --ss-modal-content-padding: var(--ss-card-content-padding);
  --ss-modal-width: 600px;

  /* Modal Header Styles ========================================= */

  /* Modal Header Background Styles */
  --ss-modal-header-background-color: var(--ss-card-header-background-color);

  /* Modal Header Font Styles */
  --ss-modal-header-font-size: var(--ss-card-header-font-size);
  --ss-modal-header-font-color: var(--ss-card-header-font-color);

  /* Modal Header Border Styles */
  --ss-modal-header-border-radius: var(--ss-card-header-border-radius);

  /* Modal Header Spacing Styles */
  --ss-modal-header-padding: var(--ss-card-header-padding);


  /* Modal Footer Styles ========================================= */

  /* Modal Footer Font Styles */
  --ss-modal-footer-font-size: var(--ss-card-footer-font-size);
  --ss-modal-footer-font-color: var(--ss-card-footer-font-color);

  /* Modal Footer Border Styles */
  --ss-modal-footer-border-top-width: var(--ss-card-footer-border-top-width);
  --ss-modal-footer-border-top-style: var(--ss-card-footer-border-top-style);
  --ss-modal-footer-border-top-color: var(--ss-card-footer-border-top-color);
  --ss-modal-footer-border-radius: var(--ss-card-footer-border-radius);

  /* Modal Footer Spacing Styles */
  --ss-modal-footer-padding: var(--ss-card-footer-padding);

    
  /* Pagination
  ================================================================ */

  /* Pagination Background Styles */
  --ss-pagination-background-color: transparent;

  /* Pagination Font Styles */
  --ss-pagination-font-color: var(--ss-link-color);
  --ss-pagination-hover-font-color: var(--ss-link-color-hover);
  --ss-pagination-hover-background-color: transparent;
  --ss-pagination-hover-border-color: var(--ss-primary-color);

  /* Pagination Border Styles */
  --ss-pagination-border-width: var(--ss-border-width);
  --ss-pagination-border-style: var(--ss-border-style);
  --ss-pagination-border-color: var(--ss-border-color);
  --ss-pagination-border-radius: var(--ss-border-radius-sm);

  /* Pagination Spacing Styles */
  --ss-pagination-padding: var(--ss-spacer-1) var(--ss-spacer-2);


  /* Spacing
  ================================================================ */

  /* Padding & Margin Sizes */
  --ss-spacer-1: .25rem;
  --ss-spacer-2: .5rem;
  --ss-spacer-3: 1rem;
  --ss-spacer-4: 1.5rem;
  --ss-spacer-5: 3rem;

  /* Bottom margin of blockquotes, lists, tables, etc. */
  --ss-element-spacer: var(--ss-spacer-4); 

  /* Grid spacing */
  --ss-grid-gutter: var(--ss-spacer-3);


  /* Other Utility 
  ================================================================ */
  --ss-container-width: calc(900px + (var(--ss-grid-gutter) * 2));

  /* Transition time of links, buttons, etc. */
  --ss-transition-time: .3s;

}