@import "./styles/image.css";
@import "./styles/button.css";
@import "./styles/layout.css";

:root {
    --headerHeight: 70px;
    --footerHeight: 100px;

    --blue: #0061CE;
    --navy: #002F6C;
    --teal: #00A794;
    --green: #008A1C;
    --green-scouts: #004851;
    --green-dark: #0c381b;
    --cyan: #17a2b8;
    --indigo: #6610f2;
    --purple: #490499;
    --pink: #ffb4e5;
    --red: #CA1A10;
    --orange: #fd7e14;
    --yellow: #ffe627;
    --gray-light: #f1f1f1;
    --gray: #6e6e6e;
    --gray-dark: #333;
    --gray-alt: #999;
    --white: #fff;
    --black: #000;
    --transparent: rgba(0,0,0,0);

    --viewport-all: 0;
    --viewport-xxs: 320px;
    --viewport-xs: 450px;
    --viewport-sm: 600px;
    --viewport-md: 850px;
    --viewport-lg: 1150px;
    --viewport-xl: 1250px;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    font-family: Nunito, sans-serif;
}

body {
    padding-top: var(--headerHeight);
}

main {
    min-height: calc(100vh - (var(--headerHeight) + var(--footerHeight)));
}

section {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 1rem;
}

ul li {
    list-style: none;
}