text: import sizes from "./mediaBreakPoints";
  
  const styles = {
      Palette: {
          height: "100vh",
          display: "flex",
          flexDirection: "column",
      },
      colors: {
          height: "90%",
      },
      goBack: {
          width: "20%",
          height: "50%",
          display: "inline-block",
          position: "relative",
          cursor: "pointer",
          margin: "0 auto -3.5px",
          opacity: 1,
          backgroundColor: "black",
          "& a": {
              color: "white",
              width: "100px",
              height: "30px",
              position: "absolute",
              display: "inline-block",
              top: "50%",
              left: "50%",
              marginLeft: "-50px",
              marginTop: "-15px",
              textAlign: "center",
              outline: "none",
              backgroundColor: "rgba(255, 255, 255, 0.3)",
              fontSize: "1rem",
              lineHeight: "30px",
              textTransform: "uppercase",
              textDecoration: "none",
              border: "none",
          },
          [sizes.down('lg')]: {
              width: '25%',
              height: "33.3333%",
          },
          [sizes.down('md')]: {
              width: '50%',
              height: "20%",
          },
          [sizes.down('xs')]: {
              width: '100%',
              height: "10%",
          }
      }
  };
  
  export default styles;