import { makeStyles } from "@material-ui/styles";

const myStyle = makeStyles(theme => ({
  root: {
    background: "linear-gradient(45deg, #181818 30%, #333333 90%)",
    height: "100%"
  },
  paper: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: theme.spacing(0)
  },
  avatar: {
    marginTop: theme.spacing(8),
    backgroundColor: theme.palette.secondary.main
  },
  form: {
    width: "100%", // Fix IE 11 issue.
    marginTop: theme.spacing(5)
  },
  textField: {
    borderColor: "#ffffff"
  },
  submit: {
    marginTop: theme.spacing(8),
    marginBottom: theme.spacing(3)
  },
  grid_wrap: {
    paddingLeft: theme.spacing(10),
    paddingRight: theme.spacing(10),
    textAlign: "center"
  },
  grid: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  grid_item: {
    padding: theme.spacing(1),
    paddingTop: 0,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    backgroundColor: "#444444",
    color: "#ffffff",
    height: 60
  },
  title: {
    color: "#ffffff",
    marginTop: theme.spacing(4),
    marginBottom: theme.spacing(8)
  },
  titleSmallMargin: {
    color: "#ffffff",
    marginTop: theme.spacing(4),
    marginBottom: theme.spacing(2)
  },
  navigator: {
    color: "#ffffff",
    marginTop: theme.spacing(4),
    marginLeft: theme.spacing(4),
    fontSize: 35,
    flex: 1,
    align: "right"
  },
  instructions: {
    color: "#ffffff",
    fontSize: 18
  },
  dragContainer: {
    paddingLeft: 20,
    paddingRight: 20,
    paddingBottom: 20
  },
  drag: {
    backgroundColor: "#aaaaaa",
    height: 300,
    width: "100%"
  },
  dragText: {
    margin: 0,
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)"
  },
  circle: {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  logo: {
    marginTop: theme.spacing(0),
    marginBottom: theme.spacing(1)
  },
  whiteP: {
    color: "white",
    fontSize: "18px"
  },
  column_three: {
    width: "33%"
  },
  align_right: {
    textAlign: "right"
  },
  align_left: {
    textAlign: "left"
  },
  align_center: {
    textAlign: "center"
  }
}));

export default myStyle;
