* {box-sizing: border-box; margin: 0; padding: 0; border: none; font-family: system-ui, sans-serif; font-size: 16px; font-weight: 400; cursor: default; user-select: none;}

html, body {height: 100%; width: 100%;}

body {display: grid; grid-template-columns: 100%; grid-template-rows: 100px auto; overflow-y: auto; background-color: #ddd;}

header {display: flex; align-items: center; justify-content: center; background-color: rgba(0,110,50,0.7); z-index: 999; background-color: #ccc;} 
xxxheader h1 {color: white; width: 400px; max-width: 95%; border: solid 2px #fff; border-radius: 8px; text-align: center; padding: 3px; font-size: 1.8rem; background-color: rgba(0,0,0,0.3);}

xxxh1 {font-weight: 300;}

#pageTitle {color: white; width: 400px; max-width: 95%; border: solid 2px #eee; border-radius: 8px; text-align: center; padding: 3px; font-size: 1.6rem; background-color: rgba(0,0,0,0.3); text-decoration: none;}

main {display: flex; align-items: center; justify-content: center;}

form {display: none; z-index: 999; grid-template-columns: 100%; grid-template-rows: 70px 50px 30px; width: 400px; max-width: 95%; height: 200px; padding: 5px 15px; background-color: rgba(30,30,20,0.6); border-radius: 3px; color: black;}
form * {width: 100%; border-radius: 3px;}
form h1 {text-align: center; font-size: 1.2rem; color: white;}
form input[type=text] {height: 40px; border: inset 2px #eee; padding: 3px 10px; outline: none; cursor: text;}
form input[type=submit] {height: 40px; border: outset 2px #ddd; cursor: pointer;}

.frame {border: solid 1px white; max-width: 100%;}

.courses {display: none; flex-wrap: wrap; justify-content: space-around; height: calc(100vh - 120px); width: 100%; xxxmax-width: 1400px; XXXoverflow-y: auto; margin: 0 0px; border: solid 0px rgb(30,30,0);}
.courses>div {max-height: 800px; overflow-y: auto; width: 100%; max-width: 400px; background-color: rgba(0,110,50,0.7); margin: 15px 15px 45px 15px; padding: 0 10px 10px; border: solid 2px #eee; border-radius: 8px; box-shadow: 7px 7px 9px 0px rgba(0,0,0,0.3);}
.courses>div>h1 {color: white; text-align: center; font-size: 1.5rem; margin: 15px 0;}
.courses>div>a {display: block; margin: 3px 0; padding: 4px 10px; width: 100%; background-color: #fff; text-decoration: none; color: black; border-radius: 5px; cursor: pointer; font-size: 1.3rem;}
.courses>div>a:hover {background-color: #0fe; xcolor: white;}

.courses>div>a:hover {background-color: rgba(255,255,255,0.9); xcolor: white;}

ul, ol, li {xxxfont-size: 12px;}

.nok
  {
  color: #ccc;
  pointer-events: none;
  }


dialog 
  {
  margin: 10% auto;
  width: 80%;
  xxxmax-width: 350px;
  background-color: #ddd;
  padding: 34px;
  border: 0;
  border-radius: 5px;

  color: blue;
  font-family: system, arial;
  font-size: 70px;
  font-size: 5vw;
  letter-spacing: 6px;
  text-align: center;
  text-transform: uppercase;
}

dialog::backdrop
  {
  background-color: rgba(40,40,40,0.7);
  }


@media only screen and (max-width: 600px) 
  {
  html, body {height: unset; width: unset;}

  body {grid-template-rows: 70px auto;}
 
  .courses {margin: 0; xheight: calc(100vh - 70px); border: none;}
  .courses>div {margin: 8px;}
  .courses>div>a {padding: 6px 10px;}

  dialog 
    {
    font-size: 20px;
    letter-spacing: 0px;
    }
  }