/*
============================================================
Trainer css for:
https://aws.landfx.com/web-dialogs/trainer.html
*/ 
 
body {
	background-image: url('../img/2/chalkboard.jpg'); /* no-repeat center center fixed; */
	background-size: cover;
}
main {
	position:relative;
}
a {
	color: orange;
    text-decoration: underline;
}
#content {
	height:100vh;
}

@font-face {
    font-family: 'Anime Ace Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Anime Ace Regular'), url('../fonts/anime-ace.regular.woff') format('woff');
}
@font-face {
    font-family: 'Anime Ace Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Anime Ace Italic'), url('../fonts/anime-ace.italic.woff') format('woff');
}
@font-face {
    font-family: 'Anime Ace Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Anime Ace Bold'), url('../fonts/anime-ace.bold.woff') format('woff');
}




.flex-frontpage {
    display: flex;
    flex-direction: column;
    height: 100vh;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;	 
}
.flex-trainer-frontpage {
	height:95vh;
}
.txt-hdr {
	height:100px;
	width:80%;
}
.txt-hdr img {
	height:100%;
	width:auto;
} 
.txt-resource-hdr {  /* h3 */
	font-family: 'Cabin Sketch';
	font-size: 2.5em;
	font-display: swap;
	color:white;
	margin:40px 0 30px 0px
}
.txt-footer {
	position: absolute;
    bottom: 10px;
    font-family: 'Cabin Sketch';
    color: white;
    font-size: 1.3em;
	width: 100%;
    text-align: right;
    padding-right: 40px;
}
.txt-footer p:hover, .txt-resources h4:hover {
	text-decoration: underline;
	color:yellow;
	cursor:pointer;
}
.txt-options {
    height: 160px;
    width: 100%; 
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.txt-options img {
	width:200px;
	height:129px;
} 
.txt-subhdr img {
	height: 100px;
}
.txt-img:hover {
	cursor: pointer;
}
.resource-guy img {
	width: 290px;
}
.txt-resources {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    color: white; 
	font-size:1.1em;
	padding: 0 40px;
	margin-top:-50px;
}
.txt-resources h4 {
	font-family: 'Cabin Sketch';
	font-size: 1.6em;
	font-display: swap;
}
.txt-resources p {
	font-family: 'Comic Neue';
	font-size: 1.2em;
	font-display: swap;
}
.resource-div {
	padding:10px 20px;
	width: 90%;   
}
.txt-hdrs {
	height:180px;
	width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
	
}
.icon:hover { cursor:pointer}
.txt-hdrs img {
	width:200px;
	height:200px;
}
.categoryPage {
	height:100vh;
	width:100%;
	max-width:1300px;
	margin:0 auto;
	border-left: 1px solid grey;
	border-right: 1px solid grey;
	margin-top:0px;
}
.categoryPage h1 {
	font-family: 'Cabin Sketch';
	font-size: 2.5em;
	font-display: swap;
}
#sidebar {
	height:100vh;
	width:30%;
	float:left;
	border-right: 1px solid grey;	
	/* background-image: url(../img/2/chalkboard.jpg); */
    background-size: cover;
	position:relative; 
}
.sidebar-itemWrap {
	overflow-y: auto;
	height: calc(100% - 110px);
	padding:0 8px;
}
.sidebar-item p, .sidebar-itemWrap p, #cadTrainingBody p, #cadTrainingHdr p {
	color:white;
	font-family: 'Comic Neue'; 
	font-size: .9em;
	font-display: swap;
	margin-bottom:0;
	text-align:left;
}
#cadTrainingHdr {
	margin-top:-50px;
}
#cadTrainingHdr p { 
	text-align: center;
}
.sidebar-item p, .sidebar-itemWrap p {
	/* padding-left:10px; */
	padding-left: 2em;
	text-indent: -2em;
}
.sidebar-itemHdr h1, .sidebar-last h1{
	color:white;
	font-family: 'Cabin Sketch';
	font-size: 1.5em;
    margin-top: 20px;
	font-display: swap;
}
#cadTrainingHdr h1 {
	color:white;
	font-family: 'Cabin Sketch';
	font-size: 2em;
    margin-top: 10px;
	font-display: swap;
	color:yellow;
}
#cadTrainingBody h2 {
	color:white;
	font-family: 'Cabin Sketch';
	font-size: 1.5em;
    margin-top: 20px;
	font-display: swap;
}
.sidebar-item p:hover, .sidebar-last:hover, .sidebar-itemWrap p:hover {
	cursor:pointer;
	text-decoration: underline;
	color:white;
}
.complete  p {
	text-decoration: line-through;
	color:lightgray!important;
}
.sidebar-item-selected p, .sidebar-item p:active, .sidebar-item-selected p:hover, .sidebar-itemWrap p:active, .sidebar-itemWrap p:hover {
	color:yellow!important; 
}
.sidebar-last {
	position: absolute;
    bottom: 10px;
    margin-left: 10px;
} 
.complete { 
	text-decoration: line-through; 
	text-decoration-color: lightgray;
	color:lightgray!important;
}
#mainpage {
    height: 100vh;
    width: 70%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #ffffffd9;
    align-content: center;
    flex-wrap: nowrap;
	position:relative;
}
#button-row {
	padding:10px;
}
#lesson-hdr {
	height:50px;	 
	display: flex;
    flex-wrap: nowrap;
    align-content: center;
    flex-direction: column;
    justify-content: flex-end;
	color:white;
} 
#lesson-txt {
	height:40%;	  	 
	flex: 1;
	position: relative;
	padding:5px 20px 5px 20px;
	display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}
#lesson-txt h2 {
	font-family: 'Cabin Sketch';
	color:#4b4b4b;
}
#lesson-txt p {
	font-family: 'Comic Neue';
	font-size: 0.9em;
	font-display: swap;
	color:#4b4b4b;
	margin: 0px!important;
}
.button-row {
    position: absolute;
    bottom: 10px;
    width: 100%;
}
.button-row button {
	margin: 0 20px 10px 20px;
}

/* PAGE SIZES */
@media  screen and (max-height: 800px) {
	#lesson-txt { 
		width: 100%;   	 
	}	 
}


/*
============================================================
cad training specific styles 
*/


.cadTrainingIcon {
	width: 200px;
	height: 200px;
}
#cadTrainingBody {
	width: 80%;
	margin:0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	align-content: center;
	flex-wrap: nowrap;
}
#cadTrainingBody img {
	width: 200px;
}
.cadBasics1Div, .cadBasics2Div {
	width: 45%;
}
.cadHomeButton {
	text-align: left;
    width: 98%;
}




/*
============================================================
non-cad specific styles when viewed in a browser:
*/
@media  screen and (min-height: 950px) {	
	body {
		background-image: url('../img/2/classroom-bg.jpg'); /* no-repeat center center fixed; */
		background-size: cover;
	}
	.cover {
		background-image: url('../img/2/chalkboard.jpg'); /* no-repeat center center fixed; */
		background-size: cover;
	}
	.flex-frontpage {
		height:800px
	}
	.categoryPage {
		height:800px;		
		overflow:hidden;
	} 
	#sidebar, #mainpage {
		height:800px;
	}
	.outerBevel {
		height: 844px;
		max-width:1344px;
		margin-top:0px;
		margin-left:auto;
		margin-right: auto;
	}
	#content { padding-top:50px }
	/* FRAME */
	.outerBevel { /* of frame */
		box-shadow: 0px 7px 12px 0 #00000080;
		border-width: 5px;
		border-style: solid;
		border-color: rgb(98 74 46) rgb(98 74 46) rgb(98 74 46) rgb(98 74 46);
		/* border-color:			rgb(109, 84, 58) rgb(24, 19, 13) rgb(24, 19, 13) rgb(109, 84, 58);    108 83 59  */
	}
	.flatSurface { /* of frame */
		border:					12px solid rgb(109, 84, 58) 
	}
	.innerBevel { /* of frame */
		border-width:			5px;
		border-style:			solid;
		border-color:			rgb(98 74 46)	rgb(98 74 46) rgb(98 74 46) rgb(98 74 46);
	}
	#sidebar { 
		background-image: url(../img/2/chalkboard.jpg);
	}
	#mainpage {
		background-color: #e9e9e9;
	}

}



#canvas {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 130px);
	z-index:-1;
}

#fw { 
	position: absolute;
	top:0;
	width: 100vw;
	height: 100vh;
	z-index:-1;
}

#fw::shadow {
	width:100vw;
	height:100vh;	
}

 



/* button overrides */
.btn-info {
	background-color: #355768!important;
	border-color: #355768!important;
}
.btn-info:hover {
	background-color: #4f96a1!important;
	border-color: #4f96a1!important;
} 
#screen {
	display:none;
	height:100vh;
	width:100vw;
	background-color: rgba(0,0,0,0.7);
	position:absolute;
	top:0;
	left:0;
	z-index:0;		
} 
#popup {
	display:none;
	width:100%;
	height:100%; 
	position: absolute;
	z-index: 4000;
	top:0%;
	left: 0%;
	padding:40px;
	z-index:9999999; 
}
#popupClose {
	color:white!important;
}



/*
lets set a few specific sizes for the popup depending on screen size
small
medium
large
*/
@media screen and (max-width: 600px) {
	#popup {
		width: 90%;
		height: 90%;
		top: 5%;
		left: 5%;
	}
}


#speechBubbleWrap {
	width: 80vw;
    height: 80vh; 
    background-size: contain;
    background-repeat: no-repeat;
	background-position: center;
    position: fixed;
    left: 10vw;
    top: 10vh;
} 
.popup-prompt {
	background: url(../img/2/lfx-guy-regular.png);
}
.popup-success {
	background: url(../img/2/lfx-guy-success.png);
}
.popup-fail {
	background: url(../img/2/lfx-guy-tryagain.png);
} 
#speechBubbleText {	
	font-family: 'Anime Ace Regular';
	font-size:1.2em;
}
#speechBubbleTextWrap { 
    position: fixed;
    width: 22vw;
    height: 21vh; 
	min-width:245px;
	max-width:460px;
    left: 48vw;
    top: 17vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#lfxGuy {
    height: 780px;
    position: fixed;
    left: 0px;	
} 
.popupFlex {
	display: flex!important;
	flex-direction: column;
	align-content: center;
	justify-content: space-around;
	align-items: center;
	text-align: center;
} 
#verifyLesson, #popupClose {
	position:fixed;
	bottom:30vh;
	color:white!important;
}
#verifyLesson { 
	left: 50vw;
}
#popupClose {
	left:60vw;
	margin-left:40px;	
}
#nextLessonButton {
	position: absolute;
    bottom: 10px;
    right: 10px;
}



/* 
============================================================
my poor attempt at trying to line up text inside cartoon bubble for the popups.
it's bad tho. it barely works
*/
@media screen and (max-width:1800px) {
	#speechBubbleText { 
		font-size: 1em;
	}
}
@media screen and (max-width:1600px) {
	#speechBubbleText { 
		font-size: 0.9em;
	}
}
@media screen and (max-width:1400px) {
	#speechBubbleText { 
		font-size: 0.8em;
	}
}
@media screen and (max-width:1200px) {
	#speechBubbleText { 
		font-size: 0.7em;
	}
}
@media screen and (max-width:1100px) {
	#speechBubbleText { 
		font-size: 0.6em;
	}
}




@media screen and (min-width:900px) and (max-height:770px) {
	#speechBubbleTextWrap { 		 
		/* width: 19vw;
		height: 18vh;
		left: 48vw;
		top: 19vh; */
	}
}

@media screen and (min-width:1300px) and (max-height:770px) {
	#speechBubbleTextWrap { 		 
		/* width: 11vw;
		height: 18vh;
		left: 49vw;
		top: 19vh; */
	}
}


@media screen and (max-width:2300px) and (max-height:1250px) and (min-width:1401px) and (min-height:771px) {
	#speechBubbleTextWrap { 	
		width:28vw;	 
		/* width: 29vw;
		height: 18vh;
		left: 49vw;
		top: 19vh; */
	}
}