/*THIS IS THE UNIVERSAL PORTION OF THE STYLE SHEET*/

*{ 
box-sizing: border-box; 
}

/* ^ "*" is a universal selector, meaning it applies to the whole document (and all elements therein)*/
/* ^ Setting box-sizing to border box forces every element in the document to include the padding and border in whatever size (i.e width or height)
you assign to that element in css. By default, padding and border are not included in the width or height you assign an element, which can frustratingly lead to your elements
not rendering correctly despite you assigning a size you think ought to work because the padding and border cause the boxes to visibly protrude beyond the size you assign.
Setting box-sizing to "border-box" prevents that annoyance. Watch the short Treehouse video on box-sizing for a better explanation (teamtreehouse.com/library/css-layout/boxsizing)*/

body {
	font-family: 'Gothic A1', sans-serif;
}

header {
background: url(Images/MountainHaze1.jpg) center / cover; /*This is background property shorthand; the long-hand way is commented out immediately below*/
/*background-image: url(Images/MountainHaze.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;*/
color:#FF0000;
text-align: center;
margin:-8px -8px 0 -8px;/*The margin of the entire body (to include the header) of each page is 8px; meaning there's a white, 8px margin all around the page.
This means the black header doesn't touch the top, left, or right of each screen but instead has a white margin around it. I don't like that. So, to get rid of
that annoying white margin around my header, I made the margin -8px, effectively canceling it out, so now my black header touches the top/left/right of my screen. 
The rest of the body retains the 8px margin.*/
}

/* BEGIN slideshow carousel styling */

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  border: gray 1px solid;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: red;
  background-color: rgba(255,0,0,0.2);
  font-weight: bold;
  font-size: 3vw;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a red background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(255,0,0,0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: red;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* END slideshow carousel styling */

#tenets {
	color: #DC143C;
	background-color: #DCDCDC;
	padding-bottom: 1%;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 0%;
}

.section-heading {
	text-align: center;
	left:50vw;
}

/*THIS IS THE DESKTOP-ONLY PORTION OF THE STYLE SHEET. DO
NOT REPLICATE IN THE MOBILE STYLE SHEET (NMRMOBILESTYE.CSS).*/

.mobile-screen { /*This ensures the mobile-only elements I created like the drop-down hamburger menu, etc. (all of which have the "mobile-screen" class name)
don't render on large desktop-style monitors*/
	display: none;
	}

.container { /*The container class pretty much encapsulates almost the entire HTML page, to include, header, body, and footer. I didn't want the page content
to take up more than 70% of the width of the screen for appearance's sake.*/
	width:70vw; /*Notice I didn't have to worry about adjusting height because if you adjust width, css automatically adjusts the height so the aspect ratio of the 
	element stays the same.*/
	max-width: 800px; /*I gave the container a max-width of 800px. What this does is for desktop screens, where my container width is normally 70% of the viewport - 
	hence the "width:70vw" assignment above - EXCEPT when the image is beyond 800px wide, whereupon css limits the size to 800px. This prevents the eyesore of an unusually 
	huge image on the screen. For better explanation, view the Treehouse video at teamtreehouse.com/library/css-layout/maxwidth.*/
	margin-left:auto; /*best way to "center" elements (to include blocks, images, etc.) is to set both right and left margins to "auto"*/
	margin-right: auto;
}
	
nav {
	padding-top: 0.2%;
	padding-bottom: 0.4%;
	margin-bottom: 0.0%;
}
	
#desktop-logo {
	width:12%;
	height:20%;
	padding-top: 0.4%;
	padding-bottom: 0.4%;
	margin-bottom:0%;
	padding-bottom:0%;
}


nav a {
margin-left: 2%;
margin-right:2%;
color: #D3D3D3;
text-decoration: none;
font-size: 1.15rem;
}

nav a:hover {
text-decoration:overline;
}


#headerstatement {
	margin: 0.3%;
	font-size:1rem;
}

/*Since I want two columns of clickable, hyperlinked article icons on my ARTICLES page when the user is viewing through
a large, desktop-style monitor, I gave each icon either an "article-icon-left" or "article-icon-right" class name in the ARTICLES HTML page. 
Below I ensure that on big screens, "article-icon-left"-class labeled icons float to the left of the monitor while "article-icon-right"-class
labeled icons float to the right.*/

.article-icon-left { 
	width: 40%;
	float: left;
	border-style: solid;
	border-color: #DCDCDC;
	margin-right:5%;
	margin-top: 2%;
	margin-bottom: 2%;
}

.article-icon-right {
	width: 40%;
	float: right;
	border-style: solid;
	border-color: #DCDCDC;
	margin-left:5%;
	margin-top: 2%;
	margin-bottom: 2%;
}

/*Since I want two columns of clickable, hyperlinked video icons on my VIDEOS page when the user is viewing through
a large, desktop-style monitor, I gave each icon either an "video-icon-left" or "video-icon-right" class name in the VIDEOS HTML page. 
Below I ensure that on big screens, "video-icon-left"-class labeled icons float to the left of the monitor while "video-icon-right"-class
labeled icons float to the right.*/

.video-icon-left {
	width: 45%;
	border: 1px solid #A9A9A9;
	float: left;
	margin-top: 2%;
	margin-bottom: 2%;
}

.video-icon-right {
	width: 45%;
	border: 1px solid #A9A9A9;
	float: right;
	margin-top: 2%;
	margin-bottom: 2%;
}

/*No video caption underneath the icons on the large desktop screen*/

.video-caption {
	display: none;
}

#mobilemenu {
	display:none;
}

.mobilemenu-links {
	display:none;
}

#mobile-footer {
	display:none;
}

#desktop-footer {
	color:#FF0000;
	text-align: center;
	font-size:1.5rem; /* "rem" represents the standard font pitch on an html page, which is 16 I believe. So 1 rem = 1 16-pitch-font character. So here I made my font
	six 1.5 times the standard font, so 24 pitch (16 x 1.5 = 24)*/
	clear: both; /*The "clear: both" attribute ensures that the footer is a stand-alone element that doesn't intrude into other elements on the HTML page*/
}