:root{
  --thisoe: #178577;
  --bst:#999 solid thin;
}



html,body{margin:0;padding:0}
i,button,a{all:unset}
i{display:block}
button{cursor:pointer}

::-webkit-scrollbar{width:8pt;height:8pt}
::-webkit-scrollbar-track{background-color:#222}
::-webkit-scrollbar-thumb{background-color:var(--thisoe);transition:background-color .2s ease;border-radius:9pt}
::-webkit-scrollbar-thumb:hover{background-color:#399}
*::selection{
  background:var(--thisoe);
  color:#cef;
  text-shadow: 1px 1px #335;
}



header{
  width:100%;
  margin:0;
  padding:9pt 0;
  font-size:18pt;
  font-weight:bold;
  line-height:1;
  text-align:center;
  border-bottom:var(--bst);
}
nav{
  width:100%;
  margin:7pt 0;
  display:flex;justify-content:center;
  overflow-x:auto;
}
nav i{
  display:flex;flex-direction:row;
  align-items:center;
  gap:9pt;
}
nav a{
  text-align:center;
  font-size:11pt;
  line-height:1;
  padding:5pt 7pt;
  cursor:pointer;
  border-radius:3pt;
  transition:.2s ease-in-out;
}nav a:hover{
  text-decoration:underline;
  color:#003931;
}
nav hr{
  margin:auto 0;
  width:0;
  height:72%;
  border-top:var(--bst);
  border-left:var(--bst);
}

#iframe{
  position:relative;
  width:90%;
  margin:0 5%;
  height:calc(100vh - 189pt);
  height:calc(100svh - 189pt);
}
iframe,#loading{
  width:100%;height:100%;
  margin:0;padding:0;border:0;
}
#loading{
  display:flex;
  background:#fff;
  position:absolute;
  left:0;top:0;
}#loading p{
  margin:auto;
  font-size:16pt;
  font-weight:bold;
}

footer{
  position:fixed; bottom:0;left:0;
  display:flex;flex-direction:row;
  width:100%;
  margin:0;
  padding:7pt 0;
  background-color:#333;
  justify-content:center;
  text-align:center;
  color:#ccc;
  font-family:serif;
  font-size:11pt;
  line-height:16pt;
}
footer p{margin:7pt auto;}
footer a{
  cursor: pointer;
  transition:.2s ease;
}footer a:hover{
  color:aquamarine;
  text-decoration:underline;
}



@media only screen and (max-width: 500px) {
  #iframe{margin:0;width:100%}
  #admin,nav i hr:nth-last-of-type(1){display:none}
}