body {
  background:white;
  background-image: url(../imgs/ptrn.png);
  height:100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
.flexcontainer{
  max-width:100%;
  height:100%;
}
.main{
  width:100%;
}
.mat{background-color: #202847;
height:90%}
li{
  text-decoration: none;
  list-style-type: none;
  margin:auto;
  color:#202847;
  background-color: aliceblue;
  border-radius:0.2em;
  padding: 0.2em;
  margin:0.2em;
}
li:hover{
background-color: #92eb78;
}
ul{padding-left: 2px;}
iframe {
  border-radius:0.2em;
  border:none;
  width:100%;
  height: 100%;
}


@media (max-width: 760px) {
  html, body {margin: 0; height: 100%; overflow:auto}
  .main{height:fit-content}
  .flexcontainer {
       flex-direction: column;
       height:100%;
     }
     iframe{height:1200px}
     ul{
      text-align: center;
     }
     .mat{
      height:auto;
     }
  
    }