/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px)
{
	body {
		font-family: Roboto, sans-serif;
		text-align: center;
		align-content: center;
		align-items: center;
		overflow: hidden;
		background-color: #212529;
		display: block;
		margin: 0;
	}

	h1 {
		color: white;
		font-size: 500%;
		margin: 10px 0;
		font-weight: bold;
		display: block;
	}

	hr {
		color: #C8C8C8;
		width: 60%;
	}
	
	div {
		display: flex; flex-direction: column; align-items: center;
	}

	p {
		font-size: 300%;
		font-weight: bold;
		padding: 25px 45px;
		background-color: #61892f;
		width: max-content;
		color: white;
		border-radius: 15px;
		cursor: pointer
	}
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px)
{
	body {
		font-family: Roboto, sans-serif;
		text-align: center;
		overflow: hidden;
		background-color: #212529;
		display: block;
		margin: 0;
	}

	h1 {
		color: white;
		font-size: 400%;
		margin: 10px 0;
		font-weight: bold;
		display: block;
	}

	hr {
		color: #C8C8C8;
		width: 98%;
	}
	
	div {
		display: flex; flex-direction: column; align-items: center;
	}

	p {
		font-size: 250%;
		font-weight: bold;
		padding: 20px 40px;
		width: max-content;
		margin: 50px auto;
		background-color: #61892f;
		color: white;
		border: none;
		border-radius: 15px;
		cursor: pointer
	}
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px)
{
	body {
		font-family: Roboto, sans-serif;
		text-align: center;
		overflow: hidden;
		background-color: #212529;
		display: block;
		margin: 0;
	}

	h1 {
		color: white;
		font-size: 300%;
		margin: 10px 0;
		font-weight: bold;
		display: block;
	}

	hr {
		color: #C8C8C8;
		width: 90%;
	}
	
	div {
		display: flex; flex-direction: column; align-items: center;
	}

	p {
		font-size: 200%;
		font-weight: bold;
		padding: 10px 20px;
		width: max-content;
		margin: 50px auto;
		background-color: #61892f;
		color: white;
		border: none;
		border-radius: 15px;
		cursor: pointer
	}

	#ttsBtn {
		width: 70%;
	}
}