@media (max-width: 840px) {
 #etu {
   margin-left:-40px;
   width: 100%;
   margin-top:50px;
   padding:20px;
   font-size:20px;
 }
 #framediv {
   margin-top:40px; 
 }
 #matdiv, #aikdiv, #ympdiv, #engdiv {margin-top:40px;}
 #footer > .folink {
  color:#333;
  font-size:16px;
  padding-right:20px;
  padding-bottom:20px;
 }

}
@media (max-width: 600px) {
 #etu {
   margin-top:75px;
   padding:20px;
   font-size:20px;
 }
 #framediv {
   margin-top:75px; 
 }
 #footer > .folink {
  color:#333;
  font-size:16px;
  padding-right:20px;
  padding-bottom:20px;
 }

}
body {
  font-family: Arial;
  xbackground: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  xbackground-repeat: no-repeat;
  xbackground-color:#f0f0f0;
  color:#333;
}
.folink {
  color:#333;
  font-size:14px;
  padding-right:30px;
  padding-top:0px;
  padding-bottom:10px;
  float:left;
}

#viiva {
  position: absolute;
  top:83px;
  left:10px;
  width:900px;
  z-index:10px;
  display:none;
}
#tausta {
  width:100%;
  height:100%;
  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
}
#logo {
  float: left;
  width:100px;
}
#logotxt {
  padding:5px;
  font-size:26px;
  font-family: Arial
  font-weight:bold;
}
#valikko {
  position: absolute;
  left:100px;
  top:40px;
  height:100px;
  margin-top:9px;
  float: left;
  z-index:20;
}
.etue {
  padding-right:20px;
}
#mat, #ai, #ymp, #eng, #valitunti {
  float:left;
  padding:10px;
  color: #fff;
  font-weight: bold;
  margin-right:4px;
  z-index:8;
}
#etusivu {
  float:left;
  padding:10px;
  color: #fff;
  font-weight: bold;
  margin-right:4px;
  z-index:2;
}
#mat:after, #ai:after, #ymp:after, #eng:after, #valitunti:after {
  font-family: "Font Awesome 5 Free";
  content: " \f078";
}
#etusivu:before {
  font-family: "Font Awesome 5 Free";
  content: "\f015\ ";
}
#mat:before {
  font-family: "Font Awesome 5 Free";
  content: "\f534\ ";
}
#ai:before {
  font-family: "Font Awesome 5 Free";
  content: "\f044\ ";
}
#ymp:before {
  font-family: "Font Awesome 5 Free";
  content: "\f7a2\ ";
}
#eng:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1ab\ ";
}
#valitunti:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1ae\ ";
}
#etusivu {
  background-color: #4d908e;
}
#mat {
  background-color: #f3722c;
}
#ai {
  background-color: #f94144;
}
#ymp {
  background-color: #43aa8b;
}
#eng {
  background-color: #577590;
}
#valitunti {
  background-color: #277da1;
}
.valikko:hover {
  background-color:#ccc;
  color:#fff;
  cursor: pointer;
}
#matdiv, #aikdiv, #ympdiv, #engdiv, #valdiv {
  position:absolute;
  padding:10px;
  z-index:8;
}
#matdiv > h1, #aikdiv > h1, #ympdiv > h1, #engdiv > h1, #valdiv > h1 {margin-bottom:0px;}
ul {
  list-style-type: none;
  font-family: Arial;
  font-size:16px;
  padding-left:5px;
}
ul > li {
  margin-left:0px;
  padding-left:0px;
  padding-bottom:15px;
  font-size:20px;
}
a {
  color: #fff;
  text-decoration: none;
}
#mat12, #mat34, #mat56, #aik12, #aik34, #aik56, #ymp12, #ymp34, #ymp56,
#eng12, #eng34, #eng56, #val16  {
  float:left;
  width:250px;
  padding:5px;
  margin-right:10px;
  margin-top:0px;
}
#matdiv {
  top:90px;
  left:8px;
  width:870px;
  height:500px;
  background-color: #f9844a;
  text-align:left;
  color: #fff;
  display: none;
}
#aikdiv {
  position: absolute;
  top:90px;
  left:8px;
  width:870px;
  height:500px;
  background-color: #f94144;
  text-align:left;
  color: #fff;
  display: none;
}
#ympdiv {
  position: absolute;
  top:90px;
  left:8px;
  width:870px;
  height:500px;
  background-color: #43aa8b;
  text-align:left;
  color: #fff;
  display: none;
}
#engdiv {
  position: absolute;
  top:90px;
  left:8px;
  width:870px;
  height:500px;
  background-color: #577590;
  text-align:left;
  color: #fff;
  display: none;
}
#valdiv {
  position: absolute;
  top:90px;
  left:8px;
  width:870px;
  height:400px;
  background-color: #277da1;
  text-align:left;
  color: #fff;
  display: none;
}
#etu {
  position: absolute;
  top:105px;
  left:50px;
  width:100%;
  max-width:800px;
  height:700px;
  z-index:0;
}
.line {
  border:0px;
  height:1px;
  background:#555;
  background-image: linear-gradient(to right, #ccc, #277da1, #ccc);
}
#framediv {
  position: absolute;
  left:10px;
  top:100px;
  width:800px;
  height: 830px;
  z-index:1;
}
#tehtava {
  margin-top:20px;
  width:800px;
  height:830px;
  border:solid #000 0px;
}
#container {
  position: relative;
  font-size:24px;
  margin-left:8px;
}

#nested {
  position: absolute;
  top: -3px;
  left: -7px;
  font-size: 32px;
  color: #d66;
  opacity:90%;
}
#footer {
  position: absolute;
  padding-top:0px;
  clear:left;
  width:80%;
  height:100px;
  z-index:7;
}