body {
  padding-left: 11em;
  background-color:white;}
h1 {
  font-size: 1.7em;
  text-align: center;
  height:100%;
}
a.ok, a.ko{
  /* display: inline-block; */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px 0 5px;
  border-radius:50px;
  background-color: rgb(221, 23, 69);
  color: white;
  text-align:center;
  opacity: 0.6;
  transition: 0.3s;
  text-decoration: none;
  cursor: pointer;
}
  a.ok {
  justify-content: center;
  width: 100%;
  background: rgb(221, 23, 69);
  color:#fff;
  opacity: 1;

  border :none;
}
a.ko {
  color:#fff;
  width:100%;
  height: 50px;
  border: 1px solid rgb(107, 107, 107);
}
a.ko>svg{
  display: none;
}
a.ok>svg{
  display: block;
}

a:link {
  color: rgb(73,73,73) }
a:visited {
  color: #f51149; }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

#main{
  border-radius: 4px;
  -webkit-box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.7); 
box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.7);
z-index : 2;
}

canvas{
  position : absolute;
  width: 80%;
  height: 80%;
  top : 15vh;
  left: 20vw;
}

 .buttonHelp{
  width : 50px;
  height: 50px;
}
.panel{
  position : absolute;
  top: 20vh;
  left : 3vw;
}
.controlPanel{
  position : relative;
}
.controlPanel a{
  text-decoration: none;
  
}
.controlPanel li{
  list-style-type: none;
  width:15vw;
  margin: 0.5em 0;
  border-radius : 4px;
}
.controlPanel li a svg{
  text-align: right;
}

.modifyPanel {
  position: relative;
  top: 5vh;
  left: 0vw;
}
.modifyPanel li {
  list-style-type: none;
  padding-right: 0.4em;
  padding-bottom: 0.3em;
  width: 10vw;
}
#result{
  position: relative;
  top: 10vh;
  left: 0.4vw;
}

.footer{
  position :relative;
  top :85vh;
  left: 0vw;
}

/*mobile version*/

@media all and (max-device-width: 479px)  {

  .panel {
    position: absolute;
    top: 0vh;
    left: 3vw;
}
  .controlPanel {
    position: relative;
    top: 65vh;
    left: 0em;
    display: flex;
}
.controlPanel li {
  list-style-type: none;
  border-radius: 4px;
}
.modifyPanel {
  position: absolute;
  top: 78vh;
  left: 48vw;
  display: flex;
}
.modifyPanel li {
  list-style-type: none;
}
.modifyPanel li,.controlPanel li{
      width : initial;
      padding: 0em 1.6em 0em 0em;
    }
canvas {
  position: absolute;
  width: 101%;
  height: 80%;
  top: 15vh;
  left: 0vw;
}
a.ko, a.ok{
  font-size: 1.7em;
  width: 21vw;
  height: 9vh;
}
a.ok{
  height: 9vh;
  box-shadow: 6px 6px 8px -4px #888888;
}
a.ko{
  height: 6.7vh;
}

a.ok>svg, a.ko>svg{
  display:none;
}




#result{
  position: absolute;
  top:85vh;
}
.footer {
  position: absolute;
  font-size: 0.7em;
  top: 98vh;
  left: 1vw;
}
}

@media (min-device-width: 480px) and (max-device-width: 1024px) {
  canvas {
    position: absolute;
    width: 95%;
    height: 70%;
    top: 15vh;
    left: 0vw;
}
  .panel {
    position: absolute;
    top: 0vh;
    left: 3vw;
}
  .controlPanel {
    position: relative;
    top: 55vh;
    left: 0em;
}
.controlPanel li {
  list-style-type: none;
  border-radius: 4px;
  width : initial;
  padding: 0em 1.6em 0em 0em;
}
.modifyPanel{
    position: relative;
    top: 40vh;
    left: 75vw;
}
.modifyPanel li {
  list-style-type: none;
  padding-top: 5px;
}
a.ko, a.ok{
  font-size: 1.7em;
  width: 21vw;
  height: 9vh;
}
a.ok{
  height: 9vh;
  box-shadow: 6px 6px 8px -4px #888888;
}
a.ko{
  height: 6.7vh;
}

a.ok>svg, a.ko>svg{
  display:none;
}
#result{
  position: absolute;
    top: 57vh;
    left: 29vw;
}
.footer {
  position: absolute;
  font-size: 0.7em;
  top: 98vh;
  left: 1vw;
}
}