@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: #f2f2f2;}

h1, h2, span {
  font-family: "Scope One", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2em;
  
}

p {font-family: "Scope One", serif; font-weight: 1000;}

#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;}

#start-btn {background-color: #e6b64d;
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#start-btn img {float: left;}

p {margin-top: 0; margin-bottom: 0;}

.diet-btn {background-color: #6EFA1D7D; vertical-align: middle; display: flex; flex-direction: row;
    align-items: center;
    justify-content: space-between;}
.diet-btn img {float: left;}
.diet-btn h2 {color: #449D44}
#section-1 h2 {margin-right: 100px; color: #449D44}

.exercise-btn {background-color: #2466E87A; display: flex; flex-direction: row;
    align-items: center;
    justify-content: space-between;}
.exercise-btn img {float: left;}
.exercise-btn h2 {color: #2375A2}
#section-2 h2 {margin-right: 100px; color: #2375A2}


.screentime-btn {background-color: #FA1D1D7D; display: flex; flex-direction: row;
    align-items: center;
    justify-content: space-between;}
.screentime-btn img, h2 {float: left;}
.screentime-btn h2 {color: #F34124}
#section-3 h2 {margin-right: 100px; color: #F34124}

.safety-btn {background-color: #E4C7007D; display: flex; flex-direction: row;
    align-items: center;
    justify-content: space-between;}
.safety-btn img {float: left;}
.safety-btn h2 {color: #EA6F15}
#section-4 h2 {margin-right: 100px; color: #EA6F15}

.bed-btn {background-color: #1DC3FA5E; display: flex; flex-direction: row;
    align-items: center;
    justify-content: space-between;}
.bed-btn img {float: left;}
.bed-btn h2 {color: #339DB7}
#section-5 h2 {margin-right: 100px; color: #339DB7}

.diet-section {background-image: url("../Resources-for-application/Diet-page-Images/diet--bg.png"); background-position: center;
background-repeat: no-repeat; background-size: cover; position: relative; min-height: 400px;}

#diet-info {color: #215c21;}

.exercise-section {background-image: url("../Resources-for-application/Exercise-page-Images/exercise--bg.png"); background-position: center;
background-repeat: no-repeat; background-size: cover; position: relative; min-height: 400px;}

#exercise-info {color: #16336c7a;}

.screen-section {background-image: url("../Resources-for-application/Screentime-page-Images/screen--bg.png"); background-position: center;
background-repeat: no-repeat; background-size: cover; position: relative; min-height: 400px;}

.section-data::after {
    content: "";
    display: block;
    clear: both;
}


#screen-info {color: #770f0f7d;}

.safe-section {background-image: url("../Resources-for-application/Outdoorsafety-page-Images/safe--bg.png"); background-position: center;
background-repeat: no-repeat; background-size: cover; position: relative; min-height: 400px;}

#safe-info {color: #6156117d;}

.bed-section {background-image: url("../Resources-for-application/Bedtime-page-Images/bed--bg.png"); background-position: center;
background-repeat: no-repeat; background-size: cover; position: relative; min-height: 400px;}

#bed-info {color: #114a5d5e;}

.hero-info {font-size: 1.5em; 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;}

.hq {background-color: #000;display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;}
.hq h3 {text-align: center; color: #fff; margin: 1;}


/*set section default display properties*/
#section-start {display: block; background-color: #f6c155;}
#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: 0%; border: solid 2px #000;}

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