// Lucky generates 3 folders to help you organize your CSS:
//
//    - static/css/variables # Files for colors, spacing, etc.
//    - static/css/mixins # Put your mixin functions in files here
//    - static/css/components # CSS for your components
//
// Remember to import your new CSS files or they won't be loaded:
//
//    @import "./variables/colors" # Imports the file in static/css/variables/_colors.scss
//
// Note: importing with `~` tells webpack to look in the installed npm packages
// https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do

@import "~normalize-scss/sass/normalize/import-now";
// Add your own components and import them like this:
//
// @import "components/my_new_component";

// Default Lucky styles.
// Delete these when you're ready to bring in your own CSS.
body {
  font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
    Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    sans-serif;
  margin: 0 auto;
  max-width: 800px;
  padding: 20px 40px;
}

label, input {
  display: flex;
}

label {
  font-weight: 500;
}

[type='color'],
[type='date'],
[type='datetime'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'],
input:not([type]),
textarea {
  border-radius: 3px;
  border: 1px solid #bbb;
  margin: 7px 0 14px 0;
  max-width: 400px;
  padding: 8px 6px;
  width: 100%;
}

[type='submit'] {
  font-weight: 900;
  margin: 9px 0;
  padding: 6px 9px;
}