@font-face {
    font-family: 'Terminal';
    src: url('font.ttf')  format('truetype')
  }





form{
    display:inline;
}
input{
    display:inline;
    -webkit-appearance: none;
    border-radius: 0;
}

.inline{
  padding:3px;
}

  input, .inline, .contact-option {
	background: none;
	color:white;
    text-decoration:none;
	border: none;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

input:focus, .inline:focus{
    color:black;
    background-color:white;
}

input:hover, .inline:hover{
    color:black;
    background-color:white;
}

  ::selection {
    background: white;
    color:black; /* WebKit/Blink Browsers */
  }
  ::-moz-selection {
    background: white;
    color:black; /* Gecko Browsers */
  }

body{
    font-family:'Terminal','Consolas','Courier',monospace;
    color:white;
    background-color:black;
}

.blinky {
    animation: blink-animation 1s steps(2, start) infinite;
    -webkit-animation: blink-animation 1s steps(2, start) infinite;
  }
  @keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }

.nav div{
    float:left;
    text-align:center;
    font-size:18pt;
    width:25%
}


.tagline{
    color:rgb(58, 209, 58);
    text-shadow:4px 4px green;
    font-size:75pt;
    text-align:center;
}

.tagline::selection, .tagline::-moz-selection {
    color:rgb(58, 209, 58)
}

.output{
    padding-left:3em;
}

.garbage div{
    float:left;
    border:5px dashed white;
    padding:10px;
    margin:10px;
    width:40%
}

.contact-option{
  float:left;
  padding:10px;
  border:5px dashed transparent;
  margin-right:20px;
}

.contact-option:hover, .contact-option:focus{
  border:5px dashed white;
}

@media screen and (max-width: 800px) {
  .tagline{
    font-size:11vw;
  }
}

@media screen and (max-width: 600px) {
  .nav div{
    font-size:4vw;
  }
}