header {
	background-color: #add8e6 ;
	padding: 25px ;
}
header h2 {
	display: flex ;
	align-items: center ;
	justify-content: center ;
	text-align: center ;
	font-size: 35px ;
}

body {
	display: flex ;
	flex-direction: column ;
	font-size: 15px ;
	background-color: #312c38 ;
}
footer {
	width: 100% ;
	padding: 2px ;
	display: flex ;
	align-items: center ;
	justify-content: center ;
	background-color: #1c1e21 ;
}

/* Text CSS*/
h2 {
	font-family: "Open Sans" ;
	color: #000000 ;
	}
	
h1 , h3 , p , table{
	font-family: "Open Sans" ;
	color: #FFFFFF ;
	}

h4 {
	font-family: "Open Sans" ;
	color: #e2fffb ; 
}

td {
	padding-right: 25px ;
}

a {
	font-family: "Open Sans" ;
}

a:link {
	color: #c0c0c0 ;
}

a:visited {
	color: #b69ddd
}

a:hover {
	color: #add8e6 ;
}

span.code-line {
	background-color: #1e1e2e ;
	border-radius: 5px ;
	font-family: monospace ;
	color: #cdd6f4 ;
	padding: 2px 5px 2px 5px ;
}

p.italics {
	font-family: "Open Sans" ;
	font-style: italic ;
	color: #a6adc8 ;
}

/* Image CSS */
img {
	color: #0000ff ;
	font-family: monospace ;
	padding-right: 15px ;
}

header img {
	padding-right: 5px ;
	height: 45px ;
	width: 45px ;
}

img.screenshot {
	display: block ;
	margin-left: auto ;
	margin-right: auto ;
	padding: 10px ;
	height: 55% ;
	width: 55% ;
}

.wrap img {
	width: 300px ;
	max-width: 40% ;
	height: auto ;
}

table img {
	height: 50px ;
	width: 50px ;
}

img.img-diego {
	border-radius: 50% ;
	height: 15% ;
	width: 15% ;
	padding: 10px ;
}

/* Tablet CSS */
@media only screen and (max-width: 820px) {
	img.screenshot {
		display: block ;
		margin-left: auto ;
		margin-right: auto ;
		padding: 10px ;
		height: 80% ;
		width: 80% ;
	}

	.wrap img {
		width: 200px ;
		max-width: 60% ;
		height: auto ;
	}

	img.img-diego {
		padding: 10px ;
		border-radius: 100% ;
		height: 25%;
		width: 25%;
	}
}

/* Phone CSS */
@media only screen and (max-width: 428px) {
	header h2 {
		text-align: center ;
		font-size: 30px ;
	}

	footer {
		font-size: 12px ;
	}

	img.screenshot {
		display: block ;
		margin-left: auto ;
		margin-right: auto ;
		padding: 10px ;
		height: 85% ;
		width: 85% ;
	}

	.wrap img {
		width: 150px ;
		max-width: 65% ;
		height: auto ;
	}

	img.img-diego {
		padding: 10px ;
		border-radius: 100% ;
		height: 35%;
		width: 35%;
	}

	div.social a {
		height: 20% ;
		width: 20% ;
	}
}

/* div CSS */
div {
	padding: 2px ;
    margin-bottom: 5px ;
}

.center {
	text-align: center ;
}

.prog {
	display: flex ;
	align-items: center ;
	justify-content: center ;
}

.prog img {
	height: 45px ;
	width: 45px ;
	padding: 10px ;
}

.social {
	display: flex ;
	justify-content: center ;
	align-items: center ;
	gap: 10px ;
}

.specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 2px;
	grid-row-gap: 2px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }

.wrap {
	display: flex ;
	gap: 10px ;
	align-items: flex-start ;
}

.wrap-left {
	flex-direction: row ;
}

.wrap-right {
	flex-direction: row-reverse ;
}

/* Code Block CSS */
pre {
	background-color: #181825 ;
	border: 1px solid #89b4fa ;
	padding: 10px ;
	overflow-x: auto ;
}

code {
	font-family: monospace ;
	color: #cdd6f4
}

/* Font CSS */
.open-sans{
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}