/* @group Main and Header */


html {
	height: inherit;
	width: inherit;
	
	background: inherit;
	background-color: hsl(22, 20%, 15%);
	
	background-image: linear-gradient(to bottom, hsla(22, 35%, 20%, 0) 0%, hsl(22, 28%, 15%) 100%);
}
body#blog {
	display: inherit;
	text-align: left;
	height: inherit;
	width: inherit;
}
main.fullSize {
	//height: 100vh;
}
a {
	display: block;
}
ul {
	list-style-position: inside;
}
p a {
	display: inline;
}
.pushButton {
	width: fit-content;
	padding: 10px 20px;
	margin-right: 20px;
	border-radius: 8px;
	//margin-top: 20px;
	//margin-bottom: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: bold;
	color: #ac7e45 !important;
	text-decoration: none !important;
	
	background: linear-gradient(to bottom, hsl(33, 88%, 96%) 0%, hsl(38, 68%, 90%) 17.9%, hsl(33, 47%, 77%) 100%) transparent;
	box-shadow: -1px -1px 4px #c3a886, 0 1px 2px #fdeed8;
	text-shadow: 0 1px 2px #ffffff;
}
.pushButton:hover {
	
	
	color: #d0aa7c !important;
	text-decoration: none !important;
	
	background: linear-gradient(to top, #fef7ee 0%, rgba(254, 247, 237, 0) 17.9%, rgba(224, 200, 171, 0.84) 100%) transparent;
	box-shadow: 0 -1px 2px #d1b791, 0 1px 3px #b37933;
	text-shadow: 0 -1px 2px #ffffff;
}
.pushButton:last-child {
	margin-right: 0;
}

header, nav{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 80%;
	margin: 0 auto;
	/*border: 1px solid red;*/
	margin-top: 30px;
	padding-top: 0px;
}
header {
	margin-bottom: 30px;
}
header #appIcon {
	margin-bottom: 0;
	width: 85px;
}
body#blog > main > header{
	/*font-feature-settings: "ss07" on;*/
	cursor: pointer;
}
header > * {
	margin-right: 10px;
	
}
header * {
	//outline: 1px solid red;
}
header > .wrapper {
	white-space: nowrap;
	display: flex;
	align-items: center;
}
header img {
	margin: 0;
	margin-right: 20px;
	filter: drop-shadow(0 1px 6px #2e1513);
	//padding-top: 23px;
}
header :is(h1, h2) {
	//filter: drop-shadow(0 1px 4px #2e1513);
}
main > header > a.roundButton {
	margin: 0;
	box-shadow: 0 0 10px rgba(189, 161, 120, 0.86);
	display: block;
	padding: 10px 30px;
}
header #blogTitle {
	font-family: Noteworthy-Bold, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	margin-left: 20px;
	padding-left: 20px;
	font-size: 2.5em;

	border-left: 1px solid hsl(34, 26%, 48%);
	color: hsl(34, 23%, 48%);
	filter: none;
}

/* @end */

/* @group Join Beta */

#joinBeta {
	margin-top: 40px;
	margin-bottom: 65px;
	display: block;
}
#joinBeta .wrapper {
	width: fit-content;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	margin-top: 20px;
	background-image: linear-gradient(to top, #534541 0%, #282023 100%);
	color: #cdb797;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: inset 1px 2px 2px #51423e, 0 1px 3px #221a1f;
}
#joinBeta .wrapper img {
	-webkit-filter: drop-shadow(0 1px 22px #2e1513);
	filter: drop-shadow(0 1px 5px #2e1513);
}
#joinBeta .wrapper > * {
	margin-right: 20px;
}
#joinBeta .wrapper > :last-child {
	margin: 0;
}

/* @end */

/* @group Nav */

nav {
	margin-top: 40px;
	padding: 0;
	max-width: 1366px;
}
nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	
}
nav :is(ul, li) {
	list-style-type: none;
	//display: block;
	//border: 1px solid red;
}
nav li {	
	/* Flex is shorthand for grow, shrink and basis */
	flex: 1 1 532px;
	padding: 1px;
	
}
nav li:first-child, nav li.wide{
	flex-basis: 1000px;
}

nav li:first-child a, nav li.wide a{
	min-height: 320px;
}

nav li:first-child img{
	object-position: 70%;
}

nav li:last-child{
	//flex-grow: 0;
}
/*.linkContainer {
	container-type: linkContainer / inline-size;
}


@container linkContainer (max-width: 700px) {
	.articleLink {
		text-decoration: underline;
		border: 1px solid red;
	}
}*/

nav li a{
	/*padding: 20px;*/
	
	display: flex;

	color: #7F5746;
	text-decoration: none;
	font-size: 25px;
	font-family: Marker Felt, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	letter-spacing: .5px;
	
	margin-bottom: 40px;
	
	border-radius: 35px 15px 15px 35px;
	overflow: hidden;

	background-image: linear-gradient(180deg, hsl(59, 48%, 90%) 0%, hsl(58, 100%, 89%) 100%);
	
	box-shadow: 3px 5px 8px rgb(18, 16, 17), inset 0 1px 3px #FFFFFF;	
}
nav li a .wrapper {
	margin: 10px;
	margin-left: 25px;
}
nav li a .wrapper > * {
	margin-top: 15px;
	margin-right: 15px;
}
nav li a h1, nav li a .date{
	color: #725730;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: 800;
	letter-spacing: -.5px;
}
nav li a h1 {
	 margin-top: 5px !important;
	 background-color: hsl(34, 49%, 37%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 3px 3px 2px rgba(255, 255, 255, 0.22);
}
nav li a .date {
	font-weight: 600;
	font-size: 22px;
	text-shadow: 1px 1px 2px #ffffff;
}
nav li a p{
	font-family: Noteworthy-Bold, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 20px;
	max-height: 10em;
	overflow: hidden;
}
nav li a p.readMore {
	color: #e78d1f;
	font-size: 22px;
	margin-bottom: 10px;
}
nav li a .imageWrapper {
	/*width: clamp(800px, 20vw, 800px);*/
	width: clamp(800px, 1100%, 1000px);
	position:relative;
	background-image: radial-gradient(ellipse farthest-corner, #8f6d5f 0%, #392e2a 100%);
}
nav li.widerImage a .imageWrapper {
	width: 300%;
}
nav li a .imageWrapper img {
	position: absolute;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* @end */

/* @group Article Section */

section.article {
	width: 80%;
	font-family: Noteworthy-Bold, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	max-width: 1084px;
	margin: 20px auto 40px auto;
	padding-top: 40px;
	padding-bottom: 55px;
	padding-top: 0;
	
	background-image: linear-gradient(180deg, hsl(59, 48%, 90%) 0%, hsl(58, 61%, 89%) 100%);
	//background-size: 100%;
	
	box-shadow: 0 0 4px 0 rgba(139,87,42,0.60), inset 0 1px 3px 0 #FFFFFF;
	border-radius: 17px 17px 5px 5px;
	//font-family: Noteworthy-Bold;
	font-size: 23px;
	color: #7F5746;
	line-height: 1.8;
	overflow: hidden;
}
section.article > *  {
	padding-left: 40px;
	padding-right: 40px;
}
section.article > *:nth-child(2) {
	margin-top: 35px;
}

section.article > :is(img, .imageWrapper)  {
	padding: 0;
}

section.article header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	
	width: calc(100% - 40px);
	padding: 14px 20px;
	
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: #ddd8d0;
	
	background: linear-gradient(180deg, rgba(196,174,155,0.28) 0%, rgba(98,62,46,0.74) 100%), url(images/leather.png);
	
	background-size: 140px;
	box-shadow: 0 3px 7px 0 rgba(104,76,64,0.61), inset 0 -1px 4px 0 #392F29, inset 0 2px 1px 0 rgba(224,195,185,0.75);
	border-radius: 10px 10px 0 0;
	margin: 0;
	text-shadow: 0 1px 3px black;
	
}

.article header .wrapper {
	white-space: inherit;
}
.article header h2 {
	text-decoration: none;
	
}
section.article header h1{
	color: #ddd8d0;
	line-height: 1.2;
	font-size: 30px;
}
section.article header .date{
	font-size: 22px;
}
section.article p {
	margin-bottom: 20px;
}
section.article h1 {
	color: #7e5746;
}
section.article h2 {
	margin-top: 35px;
	margin-bottom: 5px;
	//font-family: Noteworthy, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
	font-weight: 600;
	color: hsl(34, 50%, 41%);
	text-decoration: none;
}
section.article a {
	color: #e78d1f;
	text-decoration: none;
}
section.article a:hover {
	text-decoration: underline;
}
section.article ul {
	padding-left: 23px;
}
section.article .iPhoneFrame {
	width: clamp(100px, 100%, 350px) !important;
	margin-top: 28px;
	margin-left: auto;
	margin-right: auto;
	/*border: 1px solid red;*/
	display: flex;
	
}

section.article .iPhoneFrame img {
		z-index: 1;
		width: 100%;
		height: auto;
}
section.article .iPhoneFrame video {
		//width: clamp(48px, calc(100% - 10px) , 308px);
		width: 88.9%;
		margin-left: -94.2%;
	border-radius: 40px;
		//outline: 1px solid red;
	box-shadow: 0 9px 16px rgba(72, 57, 35, 0.7);
	background: black;
}

section.article .twoColumns {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	margin-bottom: 20px;
}
section.article .twoColumns.center {
	align-items: center;
}
section.article .twoColumns .wrapper{
	width: 45%;
}

section.article img.right {
	float: right;
	margin-left: 20px;
	margin-right: 40px;
}
section.article img.left {
	float: left;
	margin-right: 30px;
	margin-bottom: 10px;
}
section.article img.frame {
	border: 10px solid #f3f0eb;
	box-shadow: 0 1px 6px #593c21;
}
section.article #appHeroImg {
	margin: 0;
	padding: 0;	
	width: 100%;
	padding: 30px 5px;
	background-image: radial-gradient(ellipse farthest-corner, #8f6d5f 0%, #392e2a 100%);
}
section.article #appHeroImg .shadow {	
	display: block;
	width: 92%;
	
	height: 10px;
	margin-top: -27px;
	
	border-radius: 50%;
	filter: blur(5px);
	background: black;
}

section.article footer {
	margin-top: 40px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border-top: 1px groove #e7d1b6;
	//border: 1px solid #333;
	padding-top: 40px;
}
/* @end */

#copyright {
		padding: 20px;
		text-align: center;
}

/* @group Media Queries */

/*One pixel less than iPad 12.9 landscape*/
@media screen and (max-width: 1365px) {
	nav li a {
		border-radius: 35px;
	}
}
/*Normal iPad size landscape*/
@media screen and (max-width: 1112px) {
	nav, header {
		width: 92%;
	}
	
	section.article {
		width: 100%;
		border-radius: 5px;
		margin: 0;
		max-width: inherit;
	}
	
	section.article header{
		border-radius: 0;
	}
	section.article #appHeroImg img{
		width: 100%;
	}
	
	nav li.widerImage a .imageWrapper {
		width: 160%;
	}
}
/* One pixel less than iPhone 8 Plus Landscape */
@media screen and (max-width: 735px) {
	nav, header {
		width: 100%;
	}
	main > header {
		flex-direction: column;
		gap: 2rem;
	}
	nav li a {
		flex-direction: column;
		border-radius: 5px;
	}
	nav li a .imageWrapper {
		height: 250px;
	}
	
	nav li a .imageWrapper img {
		object-fit: inhert !important;
		width: 75%;
	}
	nav li:first-child .imageWrapper img {
		object-position: bottom 0px right 40vmin;
	}
	section.article {
		font-size: 21px;
		line-height: 1.7;
	}
	section.article .twoColumns {
		display: block;
	}
	
	section.article .twoColumns#withUIVideo {
		display: flex;
		flex-direction: column-reverse;
	}
	
	section.article .twoColumns#withUIVideo > div h2 {
		margin-top: inherit;
	}
	
	section.article .twoColumns#withUIVideo > div:first-child > div{
		margin: 10px auto;
	}
	
	section.article .twoColumns > *:not(img) {
		width: inherit !important;
	}
	section.article #appHeroImg {
		display: none;
	}
	section.article > *  {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	
	section.article #appHeroImg .shadow{
		display: none;
	}
}
/* Point at which the header breaks on mobiles */
@media screen and (max-width: 512px) {
	nav, header {
		width: 100%;
	}
	nav li:first-child .imageWrapper img {
		object-position: -50vmin bottom;
	}
	
	nav li a .imageWrapper img {
		width: 50%;
	}
	
	main > header {
		align-items: center;
		margin-top: 0;
		margin-right: 0;
		padding: 0;
		gap: 1.4rem !important;
	}
	main > header > * {
		margin: 0;
	}
	
	main > header h1 {
		font-size: calc(6vmin + 3px);
	}
	
	main > header h2 {
		font-size: calc(4vmin + 3px);
	}
	
	main > header > .wrapper {
		padding: 15px 30px;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		-around;
		width: calc(100% - 60px);
		gap: 1rem;
		background: -webkit-linear-gradient(top, #675559 0%, #2a2324 100%) #534447;
		background: -moz-linear-gradient(top, #675559 0%, #2a2324 100%) #534447;
		background: -ms-linear-gradient(top, #675559 0%, #2a2324 100%) #534447;
		background: linear-gradient(to bottom, #675559 0%, #2a2324 100%) #534447;
	}
	
	main > header .wrapper > * {
		padding: 0 !important;
		margin: 0 !important;
		text-align: left;
	}
	header #appIcon {
		width: calc(8vmin + 20px);
		filter: inherit;
	}
	header #blogTitle {
		/*border-left: none;*/
		//display: none;
		font-size: calc(7.5vmin + 3px) !important;
		padding-left: 3vmin !important;
	}
	main > header > .roundButton {
		font-size: calc(5.5vmin + 3px) !important;
		border-radius: 10%/50% !important;
	}
}

/* @end */