/*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;
}

section {
	width:85vw;
	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;
}

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

/*Don't want desktop screen items (signified in the HTML with the class name "desktop-screen" to show up on smaller mobile screens*/
.desktop-screen {
display: none;
}

.mobile-screen {
	display: block;
	}
	
	/*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 85% of the width of the mobile screen for appearance's sake.*/
.container {
	width: 85vw; /*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: 600px; /*I gave the container a max-width of 600px. What this does is for mobile screens, width my container width is normally 85% of the viewport - 
	hence the "width:85vw" assignment above - EXCEPT when the image is beyond 600px wide, whereupon css limits the size to 600px. 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:0 auto; /*a margin of "0 auto" essentially means that the top and bottom margins are 0 and left and right margins are "auto." "Auto" left and right margins
	essentially work to center the element (or box). Another way to do this is to have separet statments for margin-right and margin-left with both set to "auto".*/
}

.mobile-container {
	width:85vw;
	margin:0 auto; /*a margin of "0 auto" essentially means that the top and bottom margins are 0 and left and right margins are "auto." "Auto" left and right margins
	essentially work to center the element (or box). Another way to do this is to have separate statments for margin-right and margin-left with both set to "auto".*/
}

#mobile-logo {
	width:15vw;
	border-radius: 2%;
	padding-top: 0%;
	padding-bottom: 0%;
	padding-bottom:0%;
	margin-top:3vw;
	margin-bottom:4vw;
	margin-right:0vw;
}

#mobile-title {
	font-size:5vw;
	display: inline-block;/*Inline-block display takes this heading out of its default block display, which permits you to position it side-by-side next to the logo and hamburger*/
	float: right;
	margin-right:40vw;
	margin-left:0vw;
	margin-top: 4vw;
}

#hamburger {
	position:absolute; /*Absolute positioning removes an element from the normal document flow (which is the default setting for all HTML pages, wherein the default position
	property is set to "static." Absolute positioining, in contrast, allows you to position the element based on the edges of the viewport, which is what we want to do 
	with both the hamburger and X element below.*/
	right:9vw;
	top:1vh;
	width: 10vw;
	max-width:75px;
	padding: 1%;
	margin-top: 7%;
	margin-bottom: 7%;
	margin-left:15%;
}

#theX {
	position:absolute;
	right:9vw;
	top:1.1vh;
	width:7vw;
	padding: 1%;
	margin-top: 7%;
	margin-bottom: 7%;
	margin-left:15%;
	display:none;
}

#mobilemenu {
	margin: auto; /*Have found leaving left and right margins to auto helps center the target element*/
	padding: 1.5%;
	background-color: transparent;
	padding-top:0%;
}

.mobilemenu-links {
	text-decoration: none;
	list-style-type: none;
	text-align: center;
	color: #D3D3D3;
	font-size:.8rem;
}


.article-icon { /*To center this image, I had to set left and right margins to auto - per instructions in W3 Schools, but that wasn't enough so I removed the float.*/
	width: 70%;
	margin-top: 2%;
	margin-bottom: 4%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	float: none; /*Apparently, setting float to "none" helps center the image...go figure.*/
	border: 1px solid #DCDCDC;
}

.video-icon { /*Want the video icons to take up the full width of the container (which itself takes up 85% of the width of the screen) on mobile screens*/
	width:100%;
	border: 1px solid #A9A9A9;
	margin-top: 5%;
	display: block;
	margin-left:auto;
	margin-right: auto;
	float: none;
}

/*Want video captions to display underneat the videos with the video titles on small screens, so I set the display for that class of elements to "block"*/

.video-caption {
	display: block;
	text-align: center;
	float: none;
	margin-left: auto;
	margin-right: auto;
}

nav {
	display:none;
}

nav a {
	display:none;
}
	
#desktop-logo {
	display:none;
}

#desktop-footer {
	display:none;
}

#mobile-footer {
	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*/
	padding-top:2%;
}