/*CSS for Capstone Project Template*/

body {
  margin: 0;
  padding: 0px;
  font-size: 1.5em;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #38761d;
  box-sizing: border-box;
}

h1 {
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.5em;
  letter-spacing: .02em;
  text-align: center;
}


/*GLOBAL CLASSES*/

hr {
  margin: 0;
}


/*FORMATTING FOR THE MAIN CONTAINER*/

main {
  padding: 20px;
  margin: 0 0 16px 0;
  font-family: verdana;
  font-size: 1.25rem;
}


/*CLASS THAT WILL WORK ONLY WITH <img>*/

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}


/*FORMATTING FOR <a>*/

a {
  text-decoration: none;
}

a:hover, /*affects all <a> that are children of the <footer>*/
a:visited, /*affects all <a> that are children of the <footer>*/
a:active, /*affects all <a> that are children of the <footer>*/
a:link {
  color: #ffffff;
}


/*FORMATTING FOR HEADER*/

header {
  font-family: 'Permanent Marker', cursive;
  font-size: 4rem;
  color: #d9d9d9;
  padding-left: 12px;
  border: 1px solid #000000;
  background-color: #434343;
  z-index: 100;
}


/*FORMATTING FOR TIGERS IN HEADER*/

#brand {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 5%;
}


/*FORMATTING TO MAKE HEADER STICK. USED WITH JAVASCRIPT*/

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 102px;
}


/*FORMATTING FOR CENTERING VIDEO*/

video {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  border: 4px solid tan;
}

/*FORMATTING FOR <footer>*/

footer {
  font-family: verdana;
  font-size: .65rem;
  min-height: 3rem;
  /*this is new for 2017/18; students need to change*/
  border: 1px solid #000000;
  background-color: #434343;
  padding: 12px;
  text-align: left;
  color: #eee;
}

.left {
  float: left;
  padding: 0 6px 0 0;
}


/*FORMATTING FOR ALL <a> BEHAVIOR NESTED INSIDE <footer>*/

footer a:hover,
footer a:visited,
footer a:active,
footer a:link {
  color: #eee;
}

/*****FLEX SECTION********/

/*flex container*/

.flex_parent_container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

/*flex info for all child flex containers*/

.box {
  padding: 10px;
  margin: 10px;
  flex-basis: 3in;
  /*inches vs pixels supports flex on smaller viewports.*/
  /* flex: 1 2 3in; */
  /* shorthand* for flex-grow, flex-shrink, flex-basis */
  min-width: 1px;
  background-color: #c6dc93;
}

/*Flex information specific to a child flex container*/

.box1 {
  order: 1;
  border: 5px solid orange;
  background-color: #1a512e;
  flex-grow: 1;
  color: #ffffff;
}

.box2 {
  flex-grow: 5;
  order: 2;
  border: 5px solid green;
  background-color: orange;
  color: #000000;
}

/* .box3 {
  order: 3;
  border: 5px solid orange;
  background-color: #1a512e;
  color: #ffffff;
  flex-grow: 1;
} */

/*END FLEX SECTION*/


/**********************************/
/******BEGIN CUSTOM STYLES SECTION*/
/**********************************/


/*global*/

.hide-box {
  background-color: transparent;
  border: 0;
}

/*end global*/

/* home screen */
.home-screen {
  min-height: 100vh;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-top: -20px;
  background-image: url(../images/kids-doing-math.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
}

#welcome {
  color: #222;
  font-size: 2em;
  font-weight: bold;
  font-style: italic;
}
/* end home screen */

/* CARD STYLES */
.card {
  padding: 2em;
  border-radius: 3em;
  margin: 2em 0;
  background-color: #eee;
  width: 25em;
  max-width: 100%;
}

.card img {
  border: 4px solid gray;
  width: 100%;
}

.card-text {
  padding: 0.3em;
  padding-top: 0.8em;
}

.paragraph-card {
  display: flex;
  align-items: center;
}
.emphasis {
  font-weight: bold;
}

.slight-emphasis {
  text-decoration: underline;
}


/* END CARD STYLES */

/* GAME STYLES */
/* controlls*/
.game-control-box {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  height: 12em;
  margin-bottom: 1em;
}

#time {
  position: absolute;
  top: 1.2em;
  right: 2em;
  font-size: 2em;
}

.button-box {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-evenly;
}

.button-box button {
  margin: 0.5em 0;
  padding: 0.5em 1em;
  width: 40%;
}

.button-box button,
.canvas-box button {
  font-size: 1em;
  background-color: #ff9900;
  border: 1px solid black;
  cursor: pointer;
  transition: font-weight 0.2s;
}

.canvas-box button:hover,
.button-box button:hover {
  font-weight: bold;
}

.button-box button:active {
  transform: translateY(2px);
}
/* end controlls*/
/* canvas styles */
.canvas-box {
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 5;
  margin: 0;
}

.canvas-box button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 1em;
}

.canvas-box button:active {
  transform: translateY(calc(-50% + 2px)) translateX(-50%);
}

canvas {
  border: 4px solid black;
  max-width: calc(100vw - 4em - 8px);
}
/* end canvas styles */
/* END GAME STYLES */