@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

body {
	font-family: 'Oswald', sans-serif;
	background-color: azure;
	color: darkslategray;
}

@media only screen and (max-device-width: 480px) {
	body {
		font-size: 300%;
	}

}


.rules td:first-child {
	border-bottom-color: skyblue;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.flex-container > div {
	border-radius: 15px;
	background-color: antiquewhite;
	padding: 5px;
	padding-left: 20px;
	margin: 5px;

	border-style: solid;
	border-width: thick;
	border-color: bisque;

}

h1 {
	color: chocolate;
	width: 100%;
	text-align: center;
}

.flex-container > h2 {
	text-align: right;
}
.rules > h2 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
}

h2 {
	color: chocolate;
	font-weight: bolder;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

.flex-container {
  	display: flex;
  	flex-wrap: wrap;
	justify-content: center;

}

.instructions {
	font-size: 125%;
	line-height: 90%;
}

h3 {
	color: red;
	width: 100%;
	text-align: right;
	margin-top: 0;
	margin-bottom: 0;
}

a {
	text-decoration: none;
}

a:hover {
	color: yellowgreen;
	transition-duration: .5s;
}

.rules {
	border-style: solid;
	border-width: thin;
	border-color: deepskyblue;
	background-color: paleturquoise;
	border-radius: 10px;
	margin: 2px;
	margin-bottom: 6px;
	padding-right: 3px;
}

.rules table {
	width: 100%;
	padding-left: 20px;
	padding-bottom: 20px;
}

b {
	color: black;
}

.logical_equivalences td {
	background-color: lightyellow;
	padding: 5px;
	text-align: center;
	border-radius: 5px;
}

.logical_equivalences th {
	background-color: yellow;
	padding: 5px;
	text-align: center;
	font-weight: bolder;
	border-radius: 5px;
}

.subproof {
	border-left-style: solid;
	border-left-width: thin;
	border-left-color: black;
	padding-left: 15px;
}