import { makeStyles } from '@mui/styles'

export const useStylesMobile = makeStyles({
	'informationContainer': {
		width: '100%',
		display: 'flex',
		flexDirection: 'column',
		backgroundColor: '#282a35 !important',
		height: '38vh',
		minHeight: '14.3rem',
		fontFamily: '"Source Sans Pro", sans-serif',
		marginTop: 'auto',
		'& .topLane': {
			width: '100%',
			height: '20%',
			display: 'flex',
			justifyContent: 'center',
			alignItems: 'center',
			'& button': {
				padding: '0.3rem',
				borderRadius: '5px',
				border: '1px solid white',
				backgroundColor: 'transparent',
				fontWeight: 500,
				'& a': {
					textDecoration: 'none',
					color: 'white'
				},
				'&:hover': {
					backgroundColor: 'white',
					'& a': {
						color: 'black'
					}
				}
			}
		},
		'& .midLane': {
			width: '100%',
			height: '20%',
			display: 'flex',
			justifyContent: 'center',
			alignItems: 'center',
			'& button': {
				backgroundColor: '#282a35',
				border: '1px solid white',
				borderRadius: '5px',
				padding: '0.4rem',
				marginLeft: '0.2rem',
				marginRight: '0.2rem',
				'& i': {
					color: 'white',
					fontSize: '2rem'
				},
				'&:hover': {
					backgroundColor: 'white',
					'& i': {
						color: 'black'
					}
				}
			}
		},
		'& .botLane': {
			width: '100%',
			height: '60%',
			display: 'flex',
			justifyContent: 'center',
			alignItems: 'center',
			'& .introText': {
				color: 'white !important',
				display: 'flex',
				flexDirection: 'column',
				alignItems: 'center',
				width: '90%',
				'& div': {
					margin: '0.5rem',
					textAlign: 'center',
					'& a': {
						color: 'white',
						'& span': {
							textDecoration: 'underline',
							'&:hover': {
								color: '#4caf50'
							}
						}
					}

				}
			}
		}
	},
	'@media only screen and (max-width: 379px)': {
		'informationContainer': {
			height: '47vh',
			'& .topLane': {
				height: '12%'
			},
			'& .midLane': {
				height: '10%',
			},
			'& .botLane': {
				height: '78%',
				marginBottom: '0.5rem'
			}
		}
	},
	'@media only screen and (max-width: 425px) and (min-width: 380px)': {
		'informationContainer': {
			height: '40vh',
			'& .topLane': {
				height: '17%',
			},
			'& .midLane': {
				height: '13%',
			},
			'& .botLane': {
				height: '70%',
				marginBottom: '0.5rem'
			}
		}
	},
	'@media only screen and (max-width: 768px) and (min-width: 426px)': {
		'informationContainer': {
			height: '25vh'
		}
	}
})
