body {
  margin: 0;
  padding: 0;
  background-color: black;
  background-image: url(terminal.png);
  background-size: cover;
  background-repeat:no-repeat;
}

#headline {
  padding: 0.8em;
  font-family: Roboto, helvetica, arial, sans-serif;
}

@media screen and (min-width: 600px) {
          #headline {
            padding: 20px 5%;
          }
  
  #bg {
            padding: 20px 5%;
    box-sizing: border-box;
          }
          
          .container {
            margin: auto;
            max-width: 800px;
          }
  
  .inst_text {
    float: left; 
    width: 50%;
    box-sizing: border-box;
  }
  .buttons {
    float:right;
    width: 50%;
    box-sizing: border-box;
  }
  
  .button {
    max-width: 16em !important;
  }
  .item {
    max-width: 16em !important;
  }
}

.button{
  box-sizing: border-box;
  
}

* {
  font-family:courier;
  color:#00ff00;
}

div.bg{
     
  padding: 0.8em;
}

h2 {
    font-family:courier;
}

form {
    /*display: inline-block;*/
  box-sizing: border-box;
}

.button{
    /*display: inline-block;*/
    width: 100%;
    padding-top : 1em;
  padding-bottom: 1em;
    background-color:#00ff00;
    font-family:courier;
    font-weight:bold;
    color:#000000;
    text-align:center;
    margin-top:2px;
  margin-right: auto;
  margin-left: auto;
  cursor:pointer;
} 

.item{
    /*display: inline-block;*/
    width: 100%;
    /*padding-top : 1em;
  padding-bottom: 1em;
  padding-left: 1em;*/
    /*background-color:#00ff00;*/
    font-family:courier;
    font-weight:bold;
    /*color:#000000;
    text-align:center;*/
    margin-top:2px;
  margin-right: auto;
  margin-left: auto;
  border: 2px solid #00ff00;
} 


#list {
    font-family:courier;
    color:#00ff00;
}

.itemText {
  display: inline-block;
  
}

.removeButton {
  display: inline-block;
  height:20px;
  width:20px;
  background-color:#00ff00;
  font-family:courier;
  font-weight:bold;
  color:#000000;
  text-align:center;
  margin-top:2px;
  margin-bottom: 2px;
  margin-right: 2px;
  margin-left: 2px;
  padding:1em;
  cursor:pointer;
}

input#itemInput {
  border: 2px solid #00ff00;
  background-color: rgba(0, 0, 0, 0);
  margin-top: 1em;
  margin-bottom: 1em;
  margin-right:auto;
  margin-left:auto;
  width: 100%;
  box-sizing: border-box;
}


#section1, #section2, #section3 {
        box-sizing: border-box;
        padding: 20px;
      }

      #section1 h2, #section2 h2, #section3 h2  {
        margin-top: 0;
        font-size: 24px
      }

      #section1 {
        /*background-color: white;*/
        font-family: Roboto, sans-serif;
        font-weight: 100;
        font-size: 18px;
      }

      #section1 h2 {
        font-weight: 300;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
      }

      #section1 h2 + p {
      }

      #section1 video {
        width: 100%;
      }


#section1 #section2, #section3 {
            box-sizing: border-box;
            padding: 10px 20% 80px 20%;
          }
          
          #section1 h2, #section2 h2, #section3 h2  {
            margin-top: 0;
            font-size: 60px
          }
          
          #section1 ul {
            box-sizing: border-box;
            float: left;
            width: 50%;
            padding-right: 1em;
          }
          
          #section1 video {
            box-sizing: border-box;
            width: 50%;
            float: right;
          }

          #section1 br {
            clear: both;
          }

#section2 br {
            clear: both;
          }

#headline br {
            clear: both;
          }