/*@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Sono:wght@200..800&display=swap');

.centered {
	display: flex;
	width: 100%;
	place-content: center;
	align-items: center;
}


.justify-content-center {
	display: flex;
	justify-content: center;
}

.align-items-center {
	display: flex;
	align-items: center;
}

.logo-container img {
	border-radius: 50%;
	width: 150px;
}

.logo-container2 img {
	width: 250px;
	margin: 25px;
}

.curriculum-logo {
	border-style: groove;
	border-color: white;
	border-width: 1px;
	border-radius: 7px;
}

.center-self {
	align-self: center;
	margin: 20px;
}

.place-self-start {
	margin-right: auto;
}

.full-width {
	width: 100%;
}

.full-height {
	height: 100%;
}

.full-iframe {
	width: 100%;
	height: calc(100vh / 1.5);
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-row-reverse {
	display: flex;
	flex-direction: row-reverse;
}

.flex-col-reverse {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
}

.one-tenth-img {
	width: 10vw;
}

.left-margin10 {
	margin-left: 10px;
}

.bottom-margin0 {
	margin-bottom: 0;
}

@keyframes flickerAnimation {

	/* flame pulses */
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes wave {
	0% {

		transform: scale(1) rotate(0deg);
	}

	50% {

		transform: scale(1.1) rotate(-5deg);
	}

	100% {

		transform: scale(1) rotate(0deg);
	}
}

.blinker {
	opacity: 1;
	animation: flickerAnimation 1s infinite;
}

.dotted-underline {
	border-bottom: 4px dotted yellow;
}

.scaled-up {
	transform: scale(1.2);
}

.scalable {
	transition: transform 0.1s ease-in-out 0s;
}

html {
	height: 100%;
}

body {
	display: flex;
	height: 100%;
	margin: 0 auto;
	font-family: 'Sono', sans-serif
		/*'Comfortaa', sans-serif*/
	;
	font-weight: 300;
	line-height: 1.6667;
	font-size: 18px;
	background-color: black;
	color: ghostwhite;

}

.page-body {
	height: fit-content;
	min-height: calc(100% - 60px);
	padding: 30px;
}

.section {
	margin: 40px 200px;
}

.gray {
	color: #E8E8E8 !important;
}

.dark-gray {
	color: #565756 !important;
}

.purple {
	color: #c945c9;
}

.green {
	color: #03C03C;
}

.blue {
	color: #007FFF;
}

.bg-darkgray {
	background-color: #565756;
	/*rgb(148, 145, 145);	*/
}

.padding-20 {
	padding: 0 20px;
}

.round-border {
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}

.circled {
	box-sizing: border-box;
	border-radius: 50%;
}

img {
	flex-shrink: 0;
}

.social-contacts {
	margin-top: 15px;
	align-items: center;
}

.social-icon {
	width: 46px;
	opacity: 0.4;

}

.social-icon-a {
	position: relative;
	width: 40px;
	height: 40px;
	color: black !important;
	font-weight: 800;
}

#content-wrapper {
	width: 800px;
	background-color: #ffffff;
	padding: 0px;
	margin-bottom: 25px;
}

#content {
	width: 800px;
	margin-bottom: 0px;
	padding: 0px;
	background: url('right-constraints.jpg');
	background-repeat: no-repeat;
	background-position: 320px -15px;
}

#header-title {
	font-weight: bold;
	padding: 30px;
}

.header-title-author-decor {
	margin-left: 5px;
}

#header-title-titles {
	margin-bottom: 10px;
}

#header-title h1 {
	color: ghostwhite !important;
}

#header-title .header-title-item {
	color: #03C03C;
	box-shadow: rgba(100, 100, 111, 0.1) 0 4px 2px -2px;
	padding: 0px 0px;
	border-radius: 4px;
}

#header-title h1,
#header-title h3 {
	margin-top: 5px;
	margin-bottom: 5px;
}

.header-pic {
	margin-left: 20px;
	width: 208px;
	align-self: center;
	border-radius: 50% !important;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	/*
	box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
	*/
}

.wave {
	animation: 1s ease-in-out 0.5s 1 wave;
	transition: all 0.5s ease-in-out;
}

.wave:hover {
	transform: scale(1.1) rotate(-5deg);
}


.header-pics {
	align-items: center;
}

.box-header {
	z-index: 1;
	/* border: 1px #333 solid; */
	border: 0px #7e2c1c solid;
	height: fit-content;
	padding: 15px;
	background-color: black;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
}

.box {
	display: flex;
	flex-direction: column;
	border: 0px #7e2c1c solid;
	margin: 0px;
	padding: 30px;
	background-color: black;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}

#myat {
	width: 10px;
	height: 10px;
}

#header {
	position: relative;
	width: 598px;
	height: 120px;
	margin-left: 0px;
	padding: 0px;
	font-weight: bold;
}

.header-table {
	position: relative;
	width: 280px;
	height: 20px;
	margin-top: 0px;
	padding: 0px;
}

.header-baseline {
	width: 280px;
	height: 20px;
	position: relative;
	padding: 8px;
	padding-bottom: 0px;
	border-top: 1px #333 solid;
	border-left: 1px #333 solid;
	border-right: 1px #333 solid;
}

.nav {
	position: relative;
	width: 280px;
	height: 20px;
	margin-top: 0px;
	padding: 0px;
}

.nav td {
	text-align: center;
}

#nav-link a {
	padding: 5px 5px;
	font-weight: bold;
	color: #000;
	border: 1px #FFF solid;
	text-decoration: underline;
}

#nav-link a:hover {
	background-color: #eaeaea;
	cursor: pointer;
	text-decoration: underline;
}

a {
	text-decoration: none;
	color: #007FFF;
}

a:hover {
	cursor: pointer;
	text-decoration: underline;
	color: #007FFF;
}

a:visited {
	cursor: pointer;
	color: #007FFF;
}

a:link,
.highlighted {
	color: #03C03C;
}

.a-no-decoration {
	color: unset;
}

.a-no-decoration:hover {
	color: unset;
	text-decoration: none;
}

.a-no-decoration:visited {
	color: unset;
}

.page-name,
.project-name {
	color: orange !important;
	text-transform: uppercase;
}

.project-name {
	font-size: larger;
}

.hanging-tag {
	background-color: orange;
	position: absolute;
	text-transform: uppercase;
	font-size: 0.9rem;
	line-height: 1.1;
	color: white;
	padding: 0 10px 0 10px;
	transform: rotate(15deg) skew(-20deg, 10deg);
	z-index: -1;
}

.hanging-tag-1 {
	top: 125%;
	left: 10%;
}

.hanging-tag-2 {
	top: 120%;
	left: 10%;
}

.bibtex {
	text-align: right;
}

p {
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

.infinity {
	font-weight: bold;
	font-size: 22px;
}

.math {
	color: white;
}

.invariants {
	text-align: right;
	font-family: Calibri, Monospace;
	padding-right: 30px;
}

.code {
	color: white;
	font-family: Calibri, Monospace;
	padding-left: 20px;
	padding-right: 20px;

}

.bodycodewrap {
	width: 100%;

}

.bodycodewrap td {
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
}

.bodycode {
	border: 1px #aaa dotted;
}

#abstract-people {
	font-weight: bold;
	margin-top: 10px;
}

#abstract-where {
	font-style: italic;
}

.inv {
	display: none;
}

.tab {
	border: 1px #7e2c1c;
}

.banner {
	color: #a40;
	padding-left: 30px;
	padding-right: 30px;
}

#intro-video {
	width: 50%;
}


/* 
	Home page
*/

.home-page h1 {
	font-size: 34px;
	text-align: center;
	margin: 10px;
}

/*
	Writing page
*/

.writing-page .listings img {
	width: 200px !important;
	margin-right: 30px;
}

.writing-page .listings h3 {
	margin-top: 0;
}

.writing-page .listings {
	margin-top: 30px;
}

/* Mobile */
@media only screen and (max-device-width: 1280px) {

	.section {
		margin: 40px;
	}

	#myat {
		width: 20px;
		height: 20px;
	}

	.wave:hover {
		transform: unset;
	}

	.wave:active {
		transform: scale(1.1) rotate(-5deg);
	}

	.left-margin10 {
		margin-left: 20px;
	}

}

/* Landscape */
@media only screen and (max-device-width: 1280px) and (orientation: landscape) {

	body {
		font-size: 22px;
	}

	h3 {
		font-size: 25px;
	}

	.box-header {
		font-size: 16px;
	}

	a {
		font-size: 22px;
	}

	.header-pic {
		max-height: 502px;
		margin-left: 40px;
	}

	.social-icon {
		width: 70px;
	}

	.social-icon-a {
		width: 60px;
		height: 60px;
		font-size: 28px;
	}

	.hanging-tag {
		font-size: 1.2rem;
	}

	.hanging-tag-1 {
		top: 120%;
	}

	.hanging-tag-2 {
		top: 115%;
	}


	.full-iframe {
		height: calc(100vw / 1.5);
	}


	.one-tenth-img {
		width: 20vw;
	}


	.home-page a {
		font-size: 34px;
	}

	.yoga-page .box-header {
		margin-right: unset;
	}

	.yoga-page .header-pic {
		height: unset;
	}

}

/* Portrait */
@media only screen and (max-device-width: 1280px) and (orientation: portrait) {

	body {
		font-size: 38px;
	}

	h3 {
		font-size: 44px;
	}

	a {
		font-size: 38px;
	}

	.box a {
		text-align: center;
	}

	.box-header {
		font-size: 22px;
		margin-right: unset;
	}

	.header-pic {
		margin-left: unset;
		place-self: center;
		width: 50vw;
		max-width: 416px;
		margin-bottom: 80px;
	}

	.home-page .header-pic {
		margin-top: 100px;
	}

	.social-icon {
		width: 140px;
	}

	.social-icon-a {
		width: 120px;
		height: 120px;
		font-size: 52px;
	}


	.home-page h1 {
		font-size: 62px;
	}

	.home-page a {
		font-size: 62px;
	}

	.flex-row {
		flex-direction: column;
	}

	.flex-row-portrait {
		flex-direction: row;
	}

	#header-title .flex-row {
		flex-direction: row;
	}

	.flex-row-reverse {
		flex-direction: column;
		align-items: center;
	}

	.hanging-tag {
		font-size: 2.4rem;
	}

	.hanging-tag-1 {
		top: 120%;
	}

	.hanging-tag-2 {
		top: 115%;
	}


	.one-tenth-img {
		width: 40vw;
	}

	.logo-container img {
		margin-top: 50px;
		width: 250px;
	}

	.logo-container2 img {
		width: 350px;
		margin: 50px;
	}


}