/* Generated by less 2.5.1 */
/*

File Name: style.less
Date: 11/18/18
Programmer: Illya King

*/
/* Parametric mixin for headings */
/* End parametric mixin for headings */
.boldiBoi {
  font-weight: bold;
  text-transform: uppercase;
}
.background {
  background-image: linear-gradient(#ffd30d, #ffe673 10%);
}
.codeRules {
  border: 1px solid #000000;
  color: #000000;
  background-color: #ffffff;
}
.musicalChairs {
  background-color: #ffe673;
  padding: 2px 5px;
}
.shortRound {
  font-style: italic;
  text-decoration: underline;
}
.transparent {
  opacity: 0.5;
}
.flipper {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
/* colors from https://color.adobe.com/create/color-wheel */
/*
CHANGES DONE:
- Added .gradient Mixin code to mixins.less
- Added .gradient() to bode element on css.less
- Adjusted .gradient Mixin code with slight color change rathe than hide the code. 
- Moved original Nav code to Tablet Section
- Adjust Mobile Navigation with a reduction margin space
- Adjusted base font size to 18px
- Added jQuery script from another class
- Added respond element for hamburger menu
- Added display: none command for respond element
- Added jQuery that adds the class "menu" to the nav element when the screen is less than 481px
- Added jQuery to show menu if else statement for window size 
*/
/* MOBILE STYLESHEET */
body {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  line-height: 1.5em;
  background-color: #ffffff;
  color: #7a7a7a;
  background: #eeeeee;
  /* For browsers that do not support gradients */
  background: -o-linear-gradient(left, #eeeeee, #ffffff);
  background: -moz-linear-gradient(left, #eeeeee, #ffffff);
  background: linear-gradient(to left, #eeeeee, #ffffff);
}
a:link {
  color: #ff0000;
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  color: #ffd30d;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  color: #163fff;
  text-decoration: underline;
}
img[alt~="computer"] {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
main,
header,
footer,
nav {
  padding: 1em;
}
header {
  background-image: linear-gradient(#ffd30d, #ffe673 10%);
}
header h1 {
  padding-bottom: 10px;
}
header img {
  border: 2px solid #000000;
}
.respond {
  background-color: #000000;
}
.hamburger {
  background: #000000;
  line-height: 45px;
  color: #ffffff;
  border: 0;
  font-size: 1.4em;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  z-index: 10;
  padding: 5px 15px 0;
}
.cross {
  background: #000000;
  top: 0;
  right: 0;
  color: #ffffff;
  border: 0;
  font-size: 3em;
  line-height: 65px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  z-index: 10;
  padding: 7px 15px 0;
}
.menu {
  z-index: 10;
  font-weight: 700;
  text-align: left;
}
nav {
  background: #000000;
}
nav a:link {
  color: #ffffff;
  background-color: #8b8b8b;
  padding: 5px;
  border-radius: 5px;
  box-shadow: inset 2px -2px 5px rgba(0, 0, 0, 0.5);
}
nav a:hover {
  color: #a20ce8;
  text-decoration: underline;
  background-color: #000000;
  padding: 5px;
  border-radius: 5px;
}
nav a:active {
  color: #a20ce8;
}
nav ul {
  margin-left: 1em;
}
nav ul li {
  display: block;
  margin: 0 0 .75em 0;
}
section:nth-of-type(2) {
  background-color: #ffe673;
  padding: 2px 5px;
}
h1 {
  color: #163fff;
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1.8em;
  margin-top: 0.45em;
  margin-bottom: 0.45em;
  text-transform: uppercase;
}
h2 {
  color: #163fff;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.4em;
  margin-top: 0.35em;
  margin-bottom: 0.35em;
  text-transform: uppercase;
}
h3 {
  color: #eb720c;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.1em;
  margin-top: 0.275em;
  margin-bottom: 0.275em;
  text-transform: uppercase;
}
h4 {
  color: #ff0000;
  font-size: 0.9em;
  font-weight: bold;
  line-height: 0.9em;
  margin-top: 0.225em;
  margin-bottom: 0.225em;
  text-transform: uppercase;
}
h5 {
  color: #a20ce8;
  font-size: 0.85em;
  font-weight: bold;
  line-height: 0.85em;
  margin-top: 0.2125em;
  margin-bottom: 0.2125em;
  text-transform: uppercase;
}
h6 {
  color: #eb720c;
  font-size: 0.75em;
  font-weight: bold;
  line-height: 0.75em;
  margin-top: 0.1875em;
  margin-bottom: 0.1875em;
  text-transform: uppercase;
}
ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1em;
  text-indent: -1em;
}
li {
  line-height: 1.5em;
}
em {
  font-style: italic;
  text-decoration: underline;
}
pre {
  font-family: "Courier New", monospace;
  white-space: pre-wrap;
  border: 1px solid #000000;
  color: #000000;
  background-color: #ffffff;
  opacity: 0.5;
}
footer {
  background-image: linear-gradient(#000000, #868686);
}
footer h2,
footer h3 {
  color: #f7a866;
}
footer li {
  color: #ffffff;
}
footer li a:link {
  color: #ffffff;
  text-decoration: underline;
}
footer li a:visited {
  color: #ffe673;
  text-decoration: underline;
}
footer li a:hover {
  color: #c863f7;
  text-decoration: none;
}
footer li a:active {
  color: #ffffff;
}
/*

TABLET STYLESHEET

The following CSS affects all screen sizes larger than 480 pixels wide.

*/
@media only screen and (min-width: 481px) {
  body {
    font-size: 14px;
  }
  nav {
    background: #000000;
  }
  nav a:link {
    color: #ffffff;
    background-color: #8b8b8b;
    padding: 5px;
    border-radius: 5px;
    box-shadow: inset 2px -2px 5px rgba(0, 0, 0, 0.5);
  }
  nav a:hover {
    color: #a20ce8;
    text-decoration: underline;
    background-color: #000000;
    padding: 5px;
    border-radius: 5px;
  }
  nav a:active {
    color: #a20ce8;
  }
  nav ul {
    margin-left: 1.250em;
  }
  nav ul li {
    display: inline-block;
    margin-right: 1.75em;
  }
  .respond {
    display: none;
  }
}
/*

DESKTOP STYLESHEET

The following CSS affects all screen sizes larger than 1024 pixels wide.

*/
@media only screen and (min-width: 1025px) {
  header,
  main,
  footer {
    padding: 2em;
  }
}