// Lucky generates 3 folders to help you organize your CSS:
//
//    - src/css/variables # Files for colors, spacing, etc.
//    - src/css/mixins # Put your mixin functions in files here
//    - src/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 src/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;
}