/* ********SITE WIDE SETTINGS******** */

/*Custom variables*/
:root {
  --orange: #ffce1d;
  --pink: #ff1d83;
  --blue: #1de8ff;
  --black: #000;
  --white: #fff;
  --lightgrey: #eee;
  --border-grey: #ddd;
  --mid-grey: #aaa;
  --grey-text: #777;
  --darkgrey: #555;
  --grey-blue: #45567d;
}

/*Ensure padding and border are included in the total width and height of the elements*/
* {
  box-sizing: border-box;
}

/*Declare preloaded local copy of google font styles */
@font-face {
  font-family: 'Major Mono Display';
  font-style: normal;
  font-weight: 400;
  src: 
  url('fonts/major-mono-display-v5-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('fonts/major-mono-display-v5-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: 'Nova Mono';
  font-style: normal;
  font-weight: 400;
  src: 
  url('fonts/nova-mono-v11-latin-regular.woff2') format('woff2'),
  url('fonts/nova-mono-v11-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: 
       url('fonts/open-sans-v18-latin-regular.woff2') format('woff2'),
       url('fonts/open-sans-v18-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 800;
  src: 
  url('fonts/orbitron-v16-latin-800.woff2') format('woff2'),
  url('fonts/orbitron-v16-latin-800.woff') format('woff');
}

/*Set all Font families and sizes to selectors, excluding modals (see their own parent sections)*/

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
}

header {
  font-family: 'Major Mono Display', monospace;
}

header h1 {
  font-size: 25px;
}

header h2 {
  font-size: 18px;
}

nav h2 {
  font-family: 'Nova Mono', monospace;
  font-size: 20px;
}

button {
  font-family: 'Nova Mono', monospace;
}

section h2, #glossSearchTxt {
  font-family: 'Nova Mono', monospace;
  font-size: 20px;
}

section, button, #popup, #googleSearchTxt {
  font-size: 16px;
}

input[type=submit] {
  font-size: 14px;
}

#emptyGoogleBtn, #emptyGlossBtn {
  font-size: 10px;
}

input[type=submit] {
  font-family: Arial, Helvetica, sans-serif;
}

@media (min-width: 350px) {
  header h1 {
    font-size: 30px;
  }
}

@media (min-width: 600px) {
  header h1 {
    font-size: 40px;
  }
  header h2 {
    font-size: 20px;
  }
}

@media (min-width: 750px) {
  header h1 {
    font-size: 70px;
  }
  header h2 {
    font-size: 30px;
  }
  nav h2 {
    font-size: 30px;
  }
  section, button, #popup, #googleSearchTxt {
  font-size: 20px;
  }
  #input[type=submit] {
    font-size: 18px;
  }
  #emptyGoogleBtn, #emptyGlossBtn {
    font-size: 14px;
  }
  section h2, #glossSearchTxt {
    font-size: 30px;
  }
}

@media (orientation: portrait) {
  .carousel__arrows {
    font-size: 4vh;
  }
  #play-pause {
    font-size: 4vw;
  }
}

@media (orientation: landscape) {
  .carousel__arrows {
    font-size: 4vw;
  }
  #play-pause {
    font-size: 3vh;
  }
}


/* ********WEBPAGE HEADER******** */

header {
  background-color: var(--orange);
  text-align: center;
  padding: 0.25em;
}

header h1 {
  margin-top: 0em;
  margin-bottom: 0em;
}

header h2 {
  margin-top: 0em;
  margin-bottom: 0em;
  padding: 0.3em;
}



/* ********WEBPAGE NAVIGATION BAR******** */

nav {
  background-color: var(--pink);
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

nav h2 {
  margin: 0;
}

.contents {
  color: black;
}

.contents:hover {
  color: var(--orange);
}

#desktop {
  display: none;
}

#mobile {
  display: inline-block;
}

@media (min-width: 875px) {
  #desktop {
    display: inline-block;
  }
  #mobile {
    display: none;
  }
}



/* ********ALL SECTIONS ON THE WEBPAGE******** */

/*Alternate the background coloring of individual webpage sections identified in the navigation bar*/

#home, #fandc, #prereqs, #robot {
  background-color: var(--blue);
}

#coding, #me, #bytesized {
  background-color: var(--white);
}

/*Sizing of the webpage sections identified in navigation bar, text alignment etc*/

section {
  line-height: 2;
  vertical-align: center;
}

section h2 {
  text-align: center;
  margin: 0;
}

section p {
  padding-left: 5vw;
  padding-right: 5vw;
}

@media (min-width: 875px) {
  #coding p, #fandc p, #me p {
    padding-left: 12.5vw;
    padding-right: 12.5vw;
  }
}


/* ********CROSS SECTION SETTING FOR BUTTONS - including 'Home'(carousel) and 'Robot Prototype' sections******** */

button {
  background-color: var(--pink);
  height: 2em;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

/* On hover, for carousel and tetris in play buttons*/
@media(hover: hover) and (pointer: fine) {
  .carousel__arrows:hover, .tetris__arrows:hover {
  background-color: black;
  color: var(--orange);
  transition: 1s;
  }
  button:hover {
    background-color: var(--orange);
    transition: 0.6s;
  }
}

/* ********ALL MODALS ON WEBPAGE******** */

.modal {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0, 0.5);
  position: fixed;
  z-index: 2;
  display: none;
}
.closeModal {
  font-weight: bold;
}
.closeModal:hover {
  color: var(--pink);
  cursor: pointer;
}



/* ********ALL IMAGES ON WEBPAGE******** */

/*Added to center images  - incl lego piece and Buzz*/
img {
  vertical-align: middle;
}



/* ********HOME (CAROUSEL) SECTION OF WEBPAGE******** */

/*Sizing and positioning of 'carousel' div (containing the viewer and arrow buttons)*/
#carousel {
  padding-top: 5vw;
  padding-bottom: 5vw;
  position: relative;
}

/*Shared sizing and positioning of the arrow buttons for the carousel*/
.carousel__arrows {
  height: 3em;
  padding: 1vw 1vh;
  margin: 1vw 1vh;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/*Positioning arrow buttons*/
#carouselPrevArrow {
  left: 5vw;
}
#carouselNextArrow {
  right: 5vw;
}
/*Hidden class, to be called on prev/next arrows at start/end of carousel*/
.hidden {
  display: none;
}

/*Sizing and positioning of carousel viewing window, as well as the border*/
#carousel__viewer {
  margin: 0 auto;
  position: relative;
  border-style: solid;
  border-width: medium;
  border-color: black;
  overflow: hidden;
}

/*Decks(lists) of slides for the viewer (Portrait and Landscape)*/
.carousel__deck {
  list-style: none;
  margin: 0;
  transition: transform 500ms ease-out;
}

@media (orientation: portrait) {
  #carousel__deck-landscape{display:none; visibility: hidden;}
  #carousel__deck-portrait{display:block; visibility: visible;}
  #carousel__viewer{
    height: 67vh; width: 36vh;
    box-shadow: 0 2vw 4vw 0 var(--darkgrey), 0 3vw 10vw 0 var(--grey-blue);
  }
  .carousel__slide{height: 67.5vh; width: 36vh;}
}

@media (orientation: landscape) {
  #carousel__deck-landscape{display:block; visibility: visible;}
  #carousel__deck-portrait{display:none; visibility: hidden;}
  #carousel__viewer{
    height: 25vw; width: 75vw;
    box-shadow: 0 2vh 4vh 0 var(--darkgrey), 0 3vh 10vh 0 var(--grey-blue);
  }
  .carousel__slide{height: 25vw; width: 75vw;}
}

/*Size and positioning of individual slides within the deck(list)*/
.carousel__slide {
  position: absolute;
  left:0;
}
.image{
  height: inherit;
  width: inherit;
}

/* Div for the Carousel control button(s)*/
#play-panel{
  position: relative;
  text-align: center;
}

/* Positioning of the slide dots div */
#dots{
  padding-top: 3vh;
  text-align: center;
}

/*Positioning etc of individual dots*/
.dot {
  border-radius: 50%;
  margin: 1vw 0.2vw;
  background-color: var(--pink);
  display: inline-block;
  cursor: pointer;
  transition: 0.6s;
}
.dot:hover {
  background-color: var(--orange);
}
.current-dot  {
  background-color: var(--orange);
}

@media all and (orientation:portrait) {
  .dot{
    height: 1.5vh;
    width: 1.5vh;
  }
  #popup {
    width: 30vw;
    }
}

@media all and (orientation:landscape) {
  .dot{
    height: 1.5vw;
    width: 1.5vw;
  }
  #popup {
    width: 20vw;
  }
}

/* Slide 3 popup prompt - absolute to parent (#play-panel div)*/
#popup {
  visibility: hidden;
  background-color: var(--lightgrey);
  color: var(--grey-text);
  text-align: center;
  border-radius: 6px;
  height: auto;
  padding: 1vh 1vw;
  position: absolute;
  right: 25vw;
  transform: translateX(50%);
  top: -5vw;
  z-index: 1;
}
/* Slide 3 popup prompt arrow */
#popup::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 1vw;
  border-style: solid;
  border-color: transparent transparent var(--lightgrey) transparent;
}
#popup:hover {
  color: black;
  border: 1px solid var(--mid-grey);
  box-shadow: 0 1px 5px var(--box-grey);
}



/* ******** WHY CODING SECTION ******** */

/*Google Search Form*/

#googleSearch {
  width: 80vw;
  margin: auto;
  position: relative;
}
@media (min-width: 750px) {
  #googleSearch {
    width: 40vw;
  }
}

#googleSearchTxt {
  width: 100%;
  border: 1px solid var(--border-grey);
  border-radius: 25px;
  background-image: url('images/Magnifying_glass_icon.svg');
  background-size: auto 35%;
  background-position: 15px 12px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}

#googleSearchTxt:hover {
  box-shadow: 0 0 10px var(--border-grey);
}

#googleSearchTxt:focus {
  outline: none;
}

#googleSubmit {
  text-align: center;
}

input[type=submit] {
  margin-top: 2vw;
  background-color: var(--lightgrey);
  border: none;
  border-radius: 5px;
  padding: 0.75vw 1.5vw;
  color: var(--grey-text);
  cursor: pointer;
}
input[type=submit]:hover {
  color: black;
  border: 1px solid var(--mid-grey);
  box-shadow: 0 1px 5px var(--border-grey);
}


/*  ******** Both WHY CODING? && WHY FAC? search forms  ******** */
#emptyGoogleBtn, #emptyGlossBtn{
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 0px;
  right: 0px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 15px 12px;
  visibility: hidden;
}


/* ******** WHY F&C SECTION ******** */

#glossSearch {
  margin: 5vw auto;
  max-width: 75vw;
  position: relative;
}

#glossSearchTxt {
  width: 100%;
  border-radius: 5px;
  padding: 1vw 0;
  color: var(--grey-text);
  text-align: center;
  outline: 0;
  border: 5px solid var(--lightgrey);
  box-shadow: 0 0 10px var(--border-grey);
}

#glossSuggestions {
  width: 100%;
  margin: auto;
  padding: 0;
}
#glossSuggestions li {
  padding: 1vw;
  color: var(--grey-text);
  list-style: none;
  border-bottom-style: dashed;
  border-bottom-color: var(--blue);
  word-wrap:break-word;
}
#glossSuggestions li:nth-child(odd) {
  background: linear-gradient(var(--lightgrey), var(--white));
}
#glossSuggestions li:nth-child(even) {
  background: linear-gradient(var(--white),var(--lightgrey));
}

/*Classes to highlight search text within suggestions*/
.highlight1 {
  background: var(--pink);
  font-weight: bold;
}
.highlight2 {
  background: var(--orange);
  font-weight: bold;
}



/* ******** WHY ME? SECTION OF WEBSITE ******** */

#calculator, #calculation__value, #output__value, .operator, .number, .blank {
  touch-action: manipulation;
}

#calculator {
  background-color: var(--blue);
  margin: 0 auto;
  border-radius: 5%;
  box-shadow: 0 4vw 8vw 0 var(--darkgrey), 0 6vw 20vw 0 var(--grey-blue);
}

#calculation__value {
  color: var(--darkgrey);
}
#output__value {
  color: var(--grey-blue);
}
#calculation__value, #output__value {
  text-align: right;
}

.operator, .number, .blank {
  float: left;
  border-radius: 50%;
  font-weight: bold;
}

.blank, .blank:hover {
  background-color: var(--blue);
}

@media all and (orientation:portrait) {
  #cModal {
    padding-top: 12vw;
  }
  #calculator {
    height: 120vw;
    width: 75vw;
    padding-top: 2.25vw;
  }
  #closeCalc {
    font-size: 3vw;
    padding-left: 2.25vw;
  }
  #calculation__value {
    height: 6vw;
    padding-top: 3vw;
    font-size: 4.5vw;
  }
  #output__value {
    height: 15vw;
    font-size: 9vw;
  }
  #calculation__value, #output__value {
    padding: 0vw 9vw;
  }
  #keyboard {
    height: 90vw;
    padding: 0 1.5vw;
  }
  .operator, .number, .blank {
    height: 12vw;
    width: 12vw;
    margin: 3vw;
    font-size: 4.5vw;
  }
}

@media all and (orientation:landscape) {
  #cModal {
    padding-top: 10vh;
  }
  #calculator {
    height: 80vh;
    width: 50vh;
    padding-top: 1.5vh;
  }
  #closeCalc {
    font-size: 2vh;
    padding-left: 1.5vh;
  }
  #calculation__value {
    height: 4vh;
    font-size: 3vh;
  }
  #output__value {
    height: 10vh;
    font-size: 6vh;
  }
  #calculation__value, #output__value {
    padding: 0vh 6vh;
  }
  #keyboard {
    height: 60vh;
    padding: 0 1vh;
  }
  .operator, .number, .blank {
    height: 8vh;
    width: 8vh;
    margin: 2vh;
    font-size: 3vh;
  }
}


/*  ******** PREREQUISITES SECTION ******** */

#prereqs__intro ul {
  padding-left: 7vw;
}

figure {
  margin: 0;
  padding: 0;
}

.prereqs__item {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*Name all prereqs items, ready for grid container*/
#prereqs__intro {grid-area: intro;}
#prereqs__item1 {grid-area: codeCamp;}
#prereqs__item2 {grid-area: codeCampSquare;}
#prereqs__item3 {grid-area: codeWarsSquare;}
#prereqs__item4 {grid-area: codecademy; display: none;}
#prereqs__item5 {grid-area: codecademySquare;}
#prereqs__item6 {grid-area: CS50;}
#prereqs__item7 {grid-area: git; display: grid;}
#prereqs__item8 {grid-area: gitSquare;display: none;}
#prereqs__item9 {grid-area: founders; display: none;}
#prereqs__item10 {grid-area: foundersSquare;}
#prereqs__item11 {grid-area: codeWars;}

/*Default grid container - Small Mobile Devices, e.g. mobile phones*/
#prereqs__grid-container {
  display: grid;
  grid-gap: 2vw;
  padding: 2vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: (3, auto);
  grid-template-areas:
  "intro intro intro intro intro intro"
  "codeCamp codeCamp codeWarsSquare CS50 CS50 codecademySquare"
  "foundersSquare git git codeCampSquare codeWars codeWars"
}

@media (min-width: 480px) {
  #prereqs__item2 {display: none;}
  #prereqs__item7 {display: none;}
  #prereqs__item10 {display: none;}
  #prereqs__item11 {display: none;}
  #prereqs__grid-container {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows:  (2, auto);
    grid-template-areas:
    "intro intro intro intro intro intro"
    "codeCamp codeCamp codeWarsSquare CS50 CS50 codecademySquare "
  }
}

@media (min-width: 830px) {
  #prereqs__item2 {display: none;}
  #prereqs__item3 {display: none;}
  #prereqs__item5 {display: none;}
  #prereqs__item1 {display: grid;}
  #prereqs__item4 {display: grid;}
  #prereqs__item7 {display: grid;}
  #prereqs__item9 {display: grid;}
  #prereqs__item11 {display: grid;}
  #prereqs__grid-container {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: (6, auto);
  grid-template-areas:
  "intro intro intro intro intro founders founders"
  "intro intro intro intro intro codecademy codecademy"
  "intro intro intro intro intro codeCamp codeCamp"
  "intro intro intro intro intro CS50 CS50"
  "intro intro intro intro intro git git"
  "intro intro intro intro intro codeWars codeWars"
  }
}

@media (min-width: 900px) {
  #prereqs__item6 {display: none;}
  #prereqs__grid-container {
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-template-areas:
  "intro intro intro intro intro founders founders"
  "intro intro intro intro intro codecademy codecademy"
  "intro intro intro intro intro codeCamp codeCamp"
  "intro intro intro intro intro git git"
  "intro intro intro intro intro codeWars codeWars"
  }
}

@media (min-width: 1000px) {
  #prereqs__item4 {display: none;}
  #prereqs__item2 {display: grid;}
  #prereqs__item3 {display: grid;}
  #prereqs__item5 {display: grid;}
  #prereqs__item6 {display: grid;}
  #prereqs__item8 {display: grid;}
  #prereqs__item10 {display: grid;}
  #prereqs__grid-container {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-template-areas:
  "intro intro intro intro intro codeCampSquare founders founders"
  "intro intro intro intro intro git git codeWarsSquare"
  "intro intro intro intro intro codecademySquare CS50 CS50"
  "intro intro intro intro intro codeWars codeWars gitSquare"
  "intro intro intro intro intro foundersSquare codeCamp codeCamp"
  }
}

@media (min-width: 1200px) {
  #prereqs__item1 {display: none;}
  #prereqs__item10 {display: none;}
  #prereqs__grid-container {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
  "intro intro intro intro intro codeCampSquare founders founders"
  "intro intro intro intro intro git git codeWarsSquare"
  "intro intro intro intro intro codecademySquare CS50 CS50"
  "intro intro intro intro intro codeWars codeWars gitSquare"
  }
}

@media (min-width: 1300px) {
  #prereqs__item8 {display: none;}
  #prereqs__item11 {display: none;}
  #prereqs__grid-container {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
  "intro intro intro intro intro codeCampSquare founders founders"
  "intro intro intro intro intro git git codeWarsSquare"
  "intro intro intro intro intro codecademySquare CS50 CS50"
  }
}

/*Lego brick animation*/
#lego {
  top: -20px;
  width: 30px;
  height: auto;
  animation: bouncing 0.8s infinite;
  animation-direction: alternate-reverse;
  cursor: pointer;
}

@keyframes bouncing {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50px); }
}

/*credit for the original Noun Project lego image */
#credit {
  font-family: arial, sans-serif;
  font-size: 10px;
}

#tModal, #tetris-container, #grid, .square, .next-square, .tetrimino, .tetris__arrows {
  touch-action: manipulation;
}

/*size/centre/colour tetris container*/
#tetris-container {
  height: 95vh;
  width: 40vh;
  margin: auto auto;
  background-color: var(--lightgrey);
}

/*Name all prereqs items, ready for grid container*/
#closeTetris {grid-area: close;}
#high-display {grid-area: high;}
#score-display {grid-area: score;}
#start-button {grid-area: startbtn;}
#next-grid {grid-area: next;}

#dash {
  display: grid;
  margin: 0 1vh;
  grid-column-gap: 2vh;
  align-items: center;
  grid-template-columns: repeat(2, 18vh);
  grid-template-rows: repeat(4, 4.5vh);
  grid-template-areas:
  "close next"
  "score next"
  "high next"
  "startbtn next"
}

#closeTet {
  font-size: 1.5vh;
  padding-top: .25vh;
}

#score-display, #high-display, #start-button {
  font-size: 2vh;
}

#score-display, #high-display {
  padding-bottom: 3vh;
}

#start-button {
  margin-bottom: 2vh;
}

#score-display, #high-display, #tetHead, #tetFoot, #gameOver {
  text-align: center;
}

/*Introductory text to Tetris game*/
#tetHead {
  font-size: 4vh;
}
#tetFoot, #tetPara {
  font-size: 2.5vh;
}

/*Default text, including game end*/
#grid p {
  line-height: 2;
  margin: 0;
  padding: 3%;
}

/*Grid for next Tetrimino*/
#next-grid {
  background-color: var(--orange);
  display: flex;
  flex-wrap: wrap;
}

/*Main game grid*/
#grid {
  width: 40vh;
  height: 80vh;
  background-color: var(--blue);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-family: 'Nova Mono', monospace;
  font-size: 3vh;
}

#grid-base {
  width: 40vh;
  height: 4vh;
  background-color: var(--orange);
}

.square, .next-square{
  width: 4vh;
  height: 4vh;
}

.tetrimino {
  background-color: var(--pink);
}

/*Ingame controls, esp for touch screen/mobile*/
.tetris__arrows {
  position: absolute;
  padding: 0;
  height: 10vh;
  width: 10vh;
  opacity: 75%;
  background-color: var(--orange);
  font-size: 5vh;
}
#tetrisSpin {
  font-size: 3vh;
}
#tetrisLeftArrow, #tetrisRightArrow {
  top: 40%;
  transform: translateY(-50%);
}
#tetrisSpin, #tetrisDownArrow {
  top: 60%;
  transform: translateY(-50%);
}
/*Horizontal positioning the tetris buttons*/
#tetrisLeftArrow, #tetrisDownArrow {
  left: 5vw;
}
#tetrisRightArrow, #tetrisSpin {
  right: 5vw;
}


/* ******** BYTESIZEDIT SECTION ******** */

#projects, #feedback {
  padding-left: 5vw;
  padding-right: 5vw;
}
#projects {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.scratch {
  text-align: center;
  justify-content: center;
  margin: 1vw 0vw 0 0vw;
  padding: 1vw;
  height: auto;
}
.scratch a:link {
  color: var(--black);
  text-decoration: none;
}
.scratch a:visited {
  color: var(--black);
}

@media (max-width: 499px) {
  .scratch {
    flex-basis: 100%;
    font-size: 16px;
  }
}
@media (min-width: 500px) {
  .scratch {
    flex-basis: 49%;
    font-size: 16px;
  }
}
@media (min-width: 801px) {
  .scratch {
    flex-basis: 24%;
    font-size: 20px;
  }
}

.review {
  width: 100%;
  height: 3em;
  background-color: var(--mid-grey);
  color: var(--pink);
  margin: 1vw 0vw 0 0vw;
  padding-left: 5vw;
  padding-right: 5vw;
  font-size: 20px;
  text-align: left;
}
.review:after {
  content: '\002B';
  float: right;
}
.active:after {
  content: "\2212";
}
.review:hover, .active {
  background-color: var(--darkgrey);
}

.content {
  max-height: 0;
  width: 100%;
  padding-left: 5vw;
  padding-right: 5vw;
  overflow: hidden; /*i.e the paragraphs inside*/
  transition: max-height 0.2s ease-out;
  background-color: var(--lightgrey);
}


/* ******** ROBOT PROTOTYPE SECTION ******** */

#request {
  display: none;
}

#robot {
  text-align: center;
}

#buzz-icon {
  background-image: url('images/noun_buzz_lightyear_1975668.svg') no-repeat;
  background-color: transparent;
  background-size: cover;
  overflow: hidden;
  transition: 1s;
}

.fade-in {
  animation: fadeIn ease 2s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#robot__player {
  position: relative;
  padding: 0;
  display: none;
}

#robot__vid {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}

@media all and (orientation:landscape) {
  #buzz-icon {
    width: 60vw;
    height: 45vw;
    margin-top: -6vw;
  }
  #robot__player {
    height: 45vw;
  }
  #robot__vid {
    height: 45vw;
  }
}

@media all and (orientation:portrait) {
  #buzz-icon {
    width: 100vw;
    height: 75vw;
    margin-top: -10vw;
  }
  #robot__player {
    height: 75vw;
  }
  #robot__vid {
    height: 75vw;
  }
}

#finalWord {
  margin-top: 8vh;
  display: none;
}

#countdown {
  margin-top: 8vh;
  font-family: 'Orbitron', sans-serif;
  color: var(--pink);
  display: none;
}

#timer {
  margin-top: -2vh;
  margin-bottom: 0;
  font-size: 5vw;
  letter-spacing: 1vw;
  font-weight: bold;
}




/* ******** FOOTER ******** */

footer {
  background-color: var(--orange);
  text-align: center;
  margin-bottom: -1.5em;
  margin-top: -1.5em;
  position: sticky;
  bottom: 0;
  z-index: 1;
}