body {

  text-align: center

}

nav.wrapper {

  display: inline-flex;

  justify-content: center

}

nav.wrapper i {

  padding: 10px;

  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);

  transition: all ease-in-out 150ms

}

nav.wrapper a:nth-child(1) {

  color: gainsboro;

  cursor: default

}

nav.wrapper a:nth-child(2) {

  color: black;

  cursor: default

}

nav.wrapper i:hover {

  margin-top: -3px;

  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4)

}





@font-face {

  font-family: "monotype corsiva";

  src: url("fonts/mtcorsva.ttf")

}





section.Sec {

  position: absolute;

  top: 80px;

  left: 100px;

  width: 300px;

  height: 130px

/*  border: 1px dotted green */

}



table.Tab {

  width: 100%;

  border: 1px solid black;

  padding: 5px;

  caption.top {caption-side: top};

  cursor: default;

  a:link {color: black; text-decoration: none};

  a:visited {color: black};

  a:active {color: black};

  td {text-align: center; font-size: small}

}



div.trg {

  position: absolute;

  left: -15px;

  width: 10px;

  height: 10px;

  border: 0px solid black;

  display: none

}



div.sqr {

  position: absolute;

  left: 310px;

  width: 3px;

  height: 3px;

  border: 1px solid black;

  display: none

}





section#prog {

  position: absolute;

  top: 75px;

  right: 320px;

  font-size: small

}



.progGroup-div {

  position: absolute;

  width: 80px;

  height: 80px;

  border: 0px solid gold

}



canvas.progGroup-can {

  position: absolute;

  top: 0px;

  left: 0px;

  border: 0px solid red

}

      

.progElem-div:hover {text-decoration: underline}



.progElem-div {

  position: absolute;

  top: 0px;

  left: 0px;

  width: 80px;

  height: 40px;

  border: 0px solid silver

}



canvas.progElem-can {

  position: absolute;

  top: 0px;

  left: 20px;

  border: 0px solid green

}