body {
  background:#212529;;
  color:aliceblue;  
  height:100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
html{
  min-height: 100%
}
.header{
  text-align:center;
  margin:auto;
  background-color: #444;
  padding:0.4em;
  width:fit-content;
}
.flexcontainer{
  display:flex;
  height:100%;
}
.main{
  width:100%;
  min-height: 50em;
}
.mat{
  background-color:#FAFAFC;
  border: 1px solid #6E7179;
  padding: 0px;
  margin: 0.6em;
  border-radius: 10px;
  background-color: #444;}
  
.nav{
  text-align:center;
  flex-grow: 1;
}
  li{
    display: inline-block;
  text-decoration: none;
  list-style-type: none;
  margin:auto;
  color:#202847;
  font-size: larger;
  background-color: aliceblue;
  border-radius:0.2em;
  padding: 0.3em;
  margin:0em;
}
li:hover{
background-color: #92eb78;
}
ul{padding-left: 2px;}
iframe {
  border-radius:0.2em;
  border:none;
  width:100%;
  height: 100%;

}


@media (max-width: 760px) {
  .main{height:1300px}
  .flexcontainer {
       flex-direction: column;
       height:100%;
     }
     iframe{height:1000px}
     ul{
      text-align: center;
     }
  
    }