/* Imports */
@import url('./header.css');
@import url('./search.css');
@import url('./site-main.css');
@import url('./page.css');
@import url('./single.css');
@import url('./footer.css');


/* GLOBAL STYLES (mobile-first) */

/* remove padding and margin from primary container
   consider padding and margin as a part of the element's size */

:root {
  --color-primary: #375e95FF;
  --color-accent: #fb6542FF;
  --color-warning: #ffbb00;
  --color-success: #3f681c;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-title: #333333;
  --color-required: #bf0000;
  
  --color-primary-transparent: #375e95cc;
  --color-accent-transparent: #fb6542cc;
  --color-warning-transparent: #ffbb00cc;
  --color-success-transparent: #3f681ccc;  
  --color-background-transparent: #ffffffcc;

  --font-primary: 'Roboto', sans-serif;
}

* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* body styles*/
  body {

    font-family: system-ui, sans-serif;
    background-color: var(--color-background);
    color: var(--color-primary);
    font-size: 16px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  /* remove text decoration and inherit text color to avoid specify link's text color */
  a {
    color: inherit;
    text-decoration: none;
  }
  
  /* Image and media global styles */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  ul {
    list-style: none;
  }

  .hidden {
    display: none !important;
  }



  @media (min-width: 1280) {
    body {
      padding: 0;
    }
  }