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

/* globals */
*{box-sizing: border-box;}
img {max-width: 100%;}
video {max-width: 100%;}
#student-info {float: left; width: 100%; height: auto; background: linear-gradient(90deg, #6a11cb, #2575fc); color: #f0f8ff; padding: 0.5em 1em; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
#student-name, #student-school, #student-year {display: inline-block; border-left: solid 1px rgba(255, 255, 255, 0.5); padding: 0px 1em; font-weight: 600; font-size: 1.1em;}
.container {float: left; width: 100%; height: auto; background-color: #fefefe; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);}

/*default syles*/
body {background-color: #e0f7fa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #222;}
#application {max-width: 360px; margin: 1.5em auto; background: #ffffff; border-radius: 10px; box-shadow: 0 6px 15px rgba(0,0,50,0.1); padding: 0.5em 1em 1.5em 1em;}
#app-title {float: left; width: 80%; text-align: center; color: #3f51b5; font-weight: 700; font-size: 1.8em; text-shadow: 0 1px 1px #bbdefb;}
#nav-toggle {float: right; width: 35px; height: 35px; transform: rotate(90deg); text-align: center; cursor: pointer; color: #3f51b5; background: #e8eaf6; border-radius: 6px; box-shadow: 0 2px 4px rgba(63,81,181,0.3); font-weight: bold; user-select: none;}
#controls {width: 100%; display: none; margin-top: 0.8em;}
#controls button {width: 100%; padding: 12px 10%; text-align: center; background: linear-gradient(90deg, #42a5f5, #478ed1); border: none; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; box-shadow: 0 4px 8px rgba(66,165,245,0.4); transition: background 0.3s ease; margin-bottom: 0.6em;}
#controls button:hover {background: linear-gradient(90deg, #478ed1, #42a5f5);}
#display-area {float: left; width: 100%; min-height: 50vh; margin: 2em 0px; padding: 2%; background-color: #ffffff; border-radius: 8px; box-shadow: 0 3px 8px rgba(0,0,0,0.1);}
.section-title {text-align: center; color: #3f51b5; font-weight: 700; margin-bottom: 0.5em;}



/*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%; border: solid 2px #3f51b5; border-radius: 6px; background: #e3f2fd;}

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

.full-width {float: left; width: 100%; margin: 0; padding: 3%; background: #bbdefb; border-radius: 6px;}
.left {float: left; width: 46%; /*50% - 4%*/ margin: 2%; padding: 3%; background: #90caf9; border-radius: 6px; box-shadow: 0 2px 6px rgba(21,101,192,0.3); color: #1a237e;}
.right {float: right; width: 46%; /*50% - 4%*/ margin: 2%; padding: 3%; background: #64b5f6; border-radius: 6px; box-shadow: 0 2px 6px rgba(21,101,192,0.3); color: #1a237e;}
.thirds {float: left; width: 29.33%; /*33.33% - 4%*/ margin: 2%; padding: 3%; background: #42a5f5; border-radius: 6px; box-shadow: 0 3px 8px rgba(30,136,229,0.3); color: white; font-weight: 600;}
.quarter {float: left; width: 21%; /*25% - 4%*/ margin: 2%; padding: 3%; background: #1e88e5; border-radius: 6px; box-shadow: 0 3px 8px rgba(13,71,161,0.3); color: white; font-weight: 600;}

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