@charset "utf-8";
/* CSS - Computing: Applications Development — H6S9 46 - v2 */

/* globals */
*{box-sizing: border-box;}
img {max-width: 100%;}
#student-info {float: left; width: 100%; height: auto;}
#student-name, #student-school, #student-year {display: inline-block; border-left: solid 1px #bbb; padding: 0px 1em;}
.container {float: left; width: 100%; height: auto;}

/*default syles*/
body {background-color: #535353;}

#application {max-width: 360px; margin: 1em auto;}
#app-title {float: left; width: 80%; text-align: center;}
#nav-toggle {float: right; width: 35px; height: 35px; transform: rotate(90deg); text-align: center; cursor: pointer;}
#controls {width: 100%; display: none;}
#controls button {width: 100%; padding: 10px 10%; text-align: center;}
#display-area {float: left; width: 100%; min-height: 50vh; margin: 2em 0px; padding: 2%; background-color: #fff;}

.section-title {text-align: center;}


/*set section default display properties*/
#section-start {display: block;}
#section-1, #section-2, #section-3, #section-4, #section-5 {display: none;}
.content-area {display: none;}

/* global style for content-area*/
.content-area {float: left; width: 100%; min-height: 200px; padding: 1%;}


/*------------------------------| RESPONSIVE CLASSES |------------------------------*/

.full-width {float: left; width: 100%; margin: 0; padding: 3%;}
.left {float: left; width: 46%; /*50% - 4%*/ margin: 2%; padding: 3%;}
.right {float: right; width: 46%; /*50% - 4%*/ margin: 2%; padding: 3%;}
.thirds {float: left; width: 29.33%; /*33.33% - 4%*/ margin: 2%; padding: 3%;}
.quarter {float: left; width: 21%; /*25% - 4%*/ margin: 2%; padding: 3%;}


/*------------------------------| BREAKPOINTS |------------------------------*/

/* x-large */
@media only screen and (max-width: 1200px) {

}

/* large */
@media only screen and (max-width: 1080px) {
    .quarter {float: left; width: 46%; /*50% - 4%*/}
	.thirds {float: left; width: 96%; /*33.33% - 4%*/}
	nav li {float: left; display: block; width: 100%;}
}

/* x-small */
@media only screen and (max-width: 576px) {
    .quarter {width: 96%; /*100% - 4%*/}
	.left, .right {width: 96%;}
    #controls, .content-area {width: 100%;}
}
body {
  margin: 0;
  font-family: roboto-mono, sans-serif;
}

/* background */
#display-area {
  background-image: url("../assets/grass.jpg");
  background-size: cover;
  min-height: 100vh;
  padding: 20px;
}

/* background - healthy tips */
#display-area2 {
  background-image: url("../assets/Repeat\ Sky.jpg");
  background-size: cover;
  min-height: 180vh;
  padding: 20px;
}

/* background - exercises */
#display-area3 {
  background-image: url("../assets/repeatrain.jpg");
  background-size: cover;
  min-height: 315vh;
  padding: 20px;
}

/* background - meditation guides */
#display-area4 {
  background-image: url("../assets/sunset-repeat.jpg");
  background-size: cover;
  min-height: 355vh;
  padding: 20px;
}

/* background - your food plate */
#display-area5 {
  background-image: url("../assets/Ocean\ Background.jpg");
  background-size: cover;
  min-height: 200vh;
  padding: 20px;
}

/* background - what are vitamins */
#display-area6 {
  background-image: url("../assets/sunset-repeat.jpg");
  background-size: cover;
  min-height: 145vh;
  padding: 20px;
}

.image-center {
  display: flex;
  justify-content: center;   /* horizontal center */
  margin: 15px 0;
}

.image-center img {
  max-width: 100%;
}

.button-container {
  text-align: center;
}

/* title */
#app-header {
  background: linear-gradient(#eee, #999);
  color: black;
  text-align: center;
  font-size: 32px;
  padding: 10px;
  border: 3px solid black;
  margin-bottom: 15px;
}

/* welcome text box */
#welcome-box {
  background: #ddd;
  border: 3px solid black;
  padding: 15px;
  margin-bottom: 15px;
  text-align: center;
}

/* links heading */
#links-box {
  background: linear-gradient(#eee, #999);
  border: 3px solid black;
  text-align: center;
  font-size: 24px;
  padding: 10px;
  margin-bottom: 10px;
}

/* buttons */
.app-button {
  display: block;
  width: 80%;
  margin: 10px auto;
  padding: 12px;
  background: black;
  color: white;
  border: none;
  font-size: 18px;
  border-radius: 5px;
}