@-webkit-keyframes bgChange {
	0% {
		background: #ef2121;
	}

	50% {
		background: #f4ff35;
	}

	100% {
		background: #3cfc2a;
	}
}

.bgChange {
	-webkit-animation: bgChange 2s 2s alternate infinite;
	transition: all 2s ease;
}

body {
	margin: auto;
	padding: 12px;
	margin-top:30px;
}

.buttonsStuff {
	height: 75px;
	width: 85%;
	text-align: center;
	justify-content: center;
}

.font {
	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco,
		"Bitstream Vera Sans Mono";
	font-size: 1.1em;
	font-weight: bold;
}

.resultFont {
	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco,
		"Bitstream Vera Sans Mono";
	font-size: 1em;
}

.stylesForPara {
	text-align: left;
	margin: 20px;
}

/* begin grid settings */

@supports (display: grid) {
	.wrapper {
		display: grid;
		grid-template-columns: repeat(2, 250px);
		grid-gap: 3px;
		grid-auto-rows: repeat(4, 200px);
		width: 500px;
		height: 600px;
		justify-content: center;
		margin: auto;
		text-align: center;
		border-style: solid;
		border-radius: 3px;
		border-color: green;
	}
}

@supports not (display: grid) {
	.internetEdge {
		display: -ms-grid;
		-ms-grid-template-columns: repeat(2, 250px);
		-ms-grid-gap: 3px;
		-ms-grid-auto-rows: repeat(4, 200px);
		-ms-display: grid;
		width: 330px;
		justify-content: center;
	}
}

.one {
	grid-column: 1 / 3;
	grid-row: 1;
	-ms-grid-column: 1 / 3;
	-ms-grid-row: 1;
}

.two {
	grid-column: 1;
	grid-row: 2;
	-ms-grid-column: 1;
	-ms-grid-row: 2;
	align-self: center;
	justify-self: center;
}

.three {
	grid-column: 2;
	grid-row: 2;
	-ms-grid-column: 2;
	-ms-grid-row: 2;
	align-self: center;
	justify-self: center;
}

.four {
	grid-column: 1 / 3;
	grid-row: 3;
	-ms-grid-column: 1 / 3;
	-ms-grid-row: 3;
}

.five {
	grid-column: 1 / 3;
	grid-row: 4;
	-ms-grid-column: 1 / 3;
	-ms-grid-row: 4;
}
/* end grid settings */


.article {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding: 5% 10% 1%;
}