canvas {
  position: absolute;
  /* z-index:1; */
/* margin-right: 800px; */

}

body {

  /* pointer-events:  */
/* background-color:#fcfcf5 ; */
/* background-color: #bdbdbb; */
background-color: white;
/* background-color: black; */
/* margin-left: auto; */
margin-left: auto;
margin-right: auto;
width: 50em;


}



h2 {

  overflow: scroll;

  /* z-index: -1; */
  border-bottom: : 3px solid black;
  padding-bottom: 15px;
  /* padding: 20px; */
  /* background-color: white; */
  /* font-style: oblique; */
  color: black;
  font-size: 18px;
  font-weight: normal;
  text-indent: 3em ;
  font-family: 'IBM Plex Mono', monospace;


/* border-left:  */
  /* height: 120px; */


}

h1 {
  word-break: normal;
  position: relative;
  z-index:2;
  /* font-style: oblique; */
  color: black;
  font-size: 22px;
  margin-top: -16px;
  margin-bottom: -16px;
  /* font-style: italic; */
  font-family: 'IBM Plex Mono', monospace;

  /* background: #bdbdbb; */
  background: white;
  /* border: 3px solid black; */
  padding: 20px;


}

.line {
  border-bottom: 3px solid #2bff00;
  /* height: 5px; */
  width: 1200px;
  height: 130px;
  /* right: 5%; */
  left: 5%;
  z-index:3;
  /* background: white; */
  /* margin-left: -3px; */

  position:fixed;
}

/* h2:hover {
  z-index: 1;
  border: 3px solid black;
  padding: 20px;
  font-style: oblique;
    background-color: white;
  color: black;
  font-size: 20px
  /* position: absolute; */
/* }  */

button {

}



button.button_1 {
  width: 40%;
  margin-left: 30%;
  margin-right: 30%;

  background-color: white;
  color: black;
  border: 1px solid black;
  text-align: center;
  padding: 6px;

  font-family: 'Space Mono', monospace;
  font-weight: lighter;

  margin-top: 60px;


}

button.button_1:hover {
  background-color: #2bff00;
  color: black;
  border: 1px solid #2bff00;
  text-align: center;
  padding: 6px;

  font-family: 'Space Mono', monospace;
  font-weight: lighter;

}

button.button_2 {
  width: 40%;
  margin-left: 30%;
  margin-right: 30%


  color: black;
  border: 1px solid black;
  background-color: white;
  text-align: center;
  padding: 6px;

  font-family: 'Space Mono', monospace;
  font-weight: lighter;

  margin-top: 60px;
  margin-bottom: 600px;

}

button.button_2:hover {
  background-color: red;
  color: white;
  border: 1px solid red;
  text-align: center;
  padding: 6px;
  font-family: 'Space Mono', monospace;
  font-weight: lighter;


}

h4 {
  position: fixed;
  margin-left: -250px;
  /* margin-top: 0px; */
  color: #2bff00;
  font-size: 60px;
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 60px;
  z-index:3;
}

@media screen and (max-width: 900px) {
  button {

    width: 60%;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 15px;

  }

  body {

    /* pointer-events:  */
  /* background-color:#fcfcf5 ; */
  /* background-color: #bdbdbb; */
  background-color: white;
  /* background-color: black; */
  /* margin-left: auto; */
  margin-left: auto;
  margin-right: auto;
  width: 30em;


  }

  defaultCanvas0. {
  /* position: absolute; */
    margin-left: auto;
    margin-right: 600px;
    width: 30em;
    /* z-index:1; */


  }

  h4 {
    position: fixed;

    margin-left: -140px;

    /* margin-top: 0px; */
    color: #2bff00;

    font-family: 'IBM Plex Mono', monospace;
    margin-top: 60px;
    z-index:3;
    font-size: 40px;
  }


}

button.button_3 {
  width: 40%;
  margin-left: 30%;
  margin-right: 30%


  color: black;
  border: 1px solid black;
  text-align: center;
  padding: 6px;
    background-color: white;

  font-family: 'Space Mono', monospace;
  font-weight: lighter;

  margin-top: 60px;
  margin-bottom: 600px;

}

button.button_3:hover {
  background-color: blue;
  color: white;
  border: 1px solid blue;
  text-align: center;
  padding: 6px;
  font-family: 'Space Mono', monospace;
  font-weight: lighter;


}

#live-capture {
position:fixed;
top: 40%;
left: 36%;
  /* filter: grayscale(100%); */
z-index:3;
/* border: 3px solid #e600ff; */




margin-top: auto;
margin-bottom: auto;
}




  /* .line {
  border-left: 6px solid green;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;

    /* position:fixed;
  margin-left: -250px;
  margin-top: 0px;
  border-bottom: 6px solid #2bff00 ;
  border-left: -250px; */
/* height: 500px;
position: absolute;
left: 50%;
margin-left: -3px;
top: 0; */




h5 {

  font-family: 'IBM Plex Mono', monospace;
  text-align: center;
  margin-top: -10px;
    font-size: 20px;
}

h6 {
  color: black;
  /* font-size: 40px; */
  text-align: center;


  font-size: 30px;
  margin-top: -16px;
  margin-bottom: -16px;
  /* font-style: italic; */
  font-family: 'IBM Plex Mono', monospace;

  /* background: #bdbdbb; */
  background: white;
  /* border: 3px solid black; */
  padding: 20px;
}

.footnote {
  position:relative;
  color: black;
  font-size: 10px;
  margin-top: 8px;
  /* margin-left: 30%; */
  font-style: italic;
  text-align: center;
  margin-top: 400px;
  /* width: 100bw; */
  /* text-align: center; */

}

.divje
{

  margin-top: 180px;

}



/* .outline{
    border: 3px solid red;
    padding: 20px;


} */
/*
/* #minutes {
position:fixed;
margin-left: -250px;
margin-top: 0px;
color: red;
font-size: 30px;
}

#seconds{
position:fixed;
margin-left: -250px;
margin-top: 0px;
color: red;
font-size: 30px;
} */