@import url("https://fonts.googleapis.com/css?family=Roboto");
* {
  margin: 0;
  padding: 0;
}

body {
  background: -webkit-linear-gradient(
    top,
    rgba(2, 36, 60, 0.75),
    rgba(2, 36, 60, 0.9),
    rgba(2, 36, 60, 0.98),
    rgba(2, 36, 60, 0.99),
    rgba(2, 36, 60, 1),
    rgba(2, 36, 60, 0.95),
    rgba(2, 36, 60, 0.6)
  );
  background: -moz-linear-gradient(
    top,
    rgba(2, 36, 60, 0.75),
    rgba(2, 36, 60, 0.9),
    rgba(2, 36, 60, 0.98),
    rgba(2, 36, 60, 0.99),
    rgba(2, 36, 60, 1),
    rgba(2, 36, 60, 0.95),
    rgba(2, 36, 60, 0.6)
  );
  background-attachment: fixed;
  
}

div.sidebar,
div.middle {
  /*background: -moz-linear-gradient(
    -60deg,
    rgba(0, 93, 179, 1),
    rgba(81, 149, 206, 0.8)
  );
  background: -webkit-linear-gradient(
    150deg,
    rgba(0, 93, 179, 1),
    rgba(81, 149, 206, 0.8)
  );
  background: linear-gradient(
    150deg,
    rgba(0, 93, 179, 1),
    rgba(81, 149, 206, 0.8)
  );*/
  /*border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;*/
}
div.sidebar {
  height: 200px;
  position: relative;
  -webkit-perspective: 200px;
}
/*common style for Menu and InfoQuiz bar*/
div.menu,
div.infoquiz {
  position: absolute;
  height: 70%;
  width: 70%;
  color: #F9F9F9;  
  font-size: 1.16667em;
 }

/*style for Menu*/
div.menu
{
  display: block;
  background: -moz-linear-gradient(
    240deg,
    rgba(0, 93, 179, 1),
    rgba(81, 149, 206, 0.4)
  );
  background: -webkit-linear-gradient(
    240deg,
    rgba(0, 93, 179, 1),
    rgba(81, 149, 206, 0.4)
  );
  -webkit-transform: rotateY(10deg);
  animation-name: menubar;
  animation-duration: 5s;
  -webkit-perspective: 100px;
  
}
@-webkit-keyframes menubar
{
 0%
  {
    opacity: 0;
  }
80%
  {
    opacity: 0;
  }
  100%
  {
    opacity: 1;
  }
}
/*style for Infor and Quiz bar*/
div#infoquiz {
  background: -moz-linear-gradient(
    -60deg,
    rgba(0, 93, 179, 1),
    rgba(81, 149, 206, 0.4)
  );
  background: -webkit-linear-gradient(
    -60deg,
    rgba(0, 93, 179, 1),
    rgba(81, 149, 206, 0.4)
  );
  -webkit-transform: rotateY(-10deg);
  margin-left: -0.8em;
}
div.middle {
  height: 220px;
}
div#content {
  height: 200px;
}
/*LESA headline, logo caption*/
p {
  font-family: "Roboto", sans-serif;
  text-align: center;
}
#headline,
#logocaption {
  font-weight: bold;
  color: #f9f9f9;
   text-shadow: 1px 2px #02243c, 
               2px 3px #02243c, 
               3px 4px #02243c,
               4px 5px #02243c,
               5px 6px #02243c;

}

#headline {
  font-size: 3em;
}

#logocaption {
  font-size: 1.16667em;
 
}
div.head {
  margin-top: 3%;
}

img.img-responsive {

  width: 65%;
  height: auto;
  margin: 0 auto;
  margin-top: 3%;
  margin-bottom: 2%;
  filter: contrast(300%);
  
}
div#computerlogo
{
  animation-name: logo;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes logo
{
  0%
  {opacity: 1;
  }
  60%
  {
    opacity: 0.5;
  }
  100%
  {
    opacity: 0;
    
  }
}
@-moz-keyframes logo
{
  to {opacity: 0;}
}
@keyframes logo
{
  to {opacity: 0;}
}


.computer
{
  display: block;
  margin: 0 auto;
  margin-top: 4%;
  width: 80%;
  filter: brightness(120%);
  filter: contrast(200%);
}

img.left
{
  display: block;
  width: 40%;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

div.lesson2
{
  margin-top: 15rem;
}
div.lesson3
{
  margin-top: 30rem;
}