@font-face {
	font-family: 'robotoblack';
	src: url('fonts/roboto_black/Roboto-Black-webfont.eot');
	src: url('fonts/roboto_black/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/roboto_black/Roboto-Black-webfont.woff') format('woff'),
	     url('fonts/roboto_black/Roboto-Black-webfont.ttf') format('truetype'),
	     url('fonts/roboto_black/Roboto-Black-webfont.svg#robotoblack') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'robotoregular';
	src: url('fonts/roboto_regular/Roboto-Regular-webfont.eot');
	src: url('fonts/roboto_regular/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/roboto_regular/Roboto-Regular-webfont.woff') format('woff'),
	     url('fonts/roboto_regular/Roboto-Regular-webfont.ttf') format('truetype'),
	     url('fonts/roboto_regular/Roboto-Regular-webfont.svg#robotoblack') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'permanent_markerregular';
    src: url('fonts/permanentmarker_regular/PermanentMarker-webfont.eot');
    src: url('fonts/permanentmarker_regular/PermanentMarker-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/permanentmarker_regular/PermanentMarker-webfont.woff') format('woff'),
         url('fonts/permanentmarker_regular/PermanentMarker-webfont.ttf') format('truetype'),
         url('fonts/permanentmarker_regular/PermanentMarker-webfont.svg#permanent_markerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



#menu {
    position:fixed;
    width: 220px;
    height: 100%;
    left:0px;
    top:0px;
    z-index: 9000;
    padding: 30px;
    background-color: rgb(200,100,200);
    margin: 0px;
    border-right: 2px solid silver;
    overflow:auto;
}

#menu #sourcetext{
    height: 60px;
    width: 100%;
    vertical-align: top;
    text-align: top;
}

#menu label {
    font-size: 12px;
}

#menu h3 {
    margin-bottom: 3px;
    font-size: 1em;
}

#menu textarea {
    width: 100%;
}

#menu ul{
margin-top: 0px;
}

#menu {
color: white;
}

#menu a {
color: white;
}

#menu a:hover{
color:white;
}

h2 {
font-size: 3em;
}

h3 {
font-size: 2em;
}

body{
    font-family: 'robotoblack', sans-serif;
    margin: 0;
    padding: 0;
}

p, ul, li, label {
    font-family: 'robotoregular', sans-serif;
}

.shrugexamples{
    font-size: 30px;
}

#htmlpanes
{
	width: 800px;
	height: 400px;
	font-size: 70px;
	border: 0px;
	font-family: robotoblack, sans-serif;
	background-color: transparent;
	z-index: 10;
	position: relative;
	text-align: center;
	vertical-align: center;
	margin-top: 20px;
	top: 200px;
	color: white;
	resize: none;
}

textarea:focus, input:focus{
    outline: none; 
}

li {
    list-style-type:none;
}



#SHA1_flag {
	position: relative;
	z-index: 0;
	width: 100%;
}

.outputcontrol {
	position: relative;
	z-index: 20;
}

#SHA1_flag .flagblock {
    height: 640px;
    min-width:10px;
    width: calc(100%/6);
    display: inline-block;
    text-align:right;
	font-size: 50px;
}

#SHA1_flag .flagcode {
	color: white;
	/* mix-blend-mode: difference; */
	position: relative;
	top: 580px;
	right: 8px;

}


#blockall {
	overflow: hidden;
	height: 400px;
	width: 800px;
}

#logo {
	height: 400px;
	-webkit-transform:rotate(-17deg);
}

#logo .flagblock {
    height: 200px;
    min-width:200px;
    display: inline-block;
    text-align:right;
    padding: 2px;
	font-size: 42px;
	position: relative;
	left: 100px;
	top: -80px;
}

#logo .flagcode {
	color: white;
	position: relative;
	top: 196px;
	right: 4px;
}

#logotext {
	font-size: 260px;
	position: relative;
	top: -400px;
	left: 00px;
	color: black;
	background-color: white;
	mix-blend-mode: screen;
	padding: 80px;
	padding-bottom: 120px;
	padding-top: 150px;
	padding-right: 700px;

}


#textcode {
	font-size: 70px;
	position: relative;
	top: -480px;
	left: 600px;
	color: black;
}

.kvp {
    display: inline-block;
}

.kvp label {
	width: 200px;
	display: block;
	float: left;
	font-size: 20px;
}

.kvp input {
    width: 600px;
    position: relative;
    font-size: 20px;
    margin-bottom: 20px;
}

.hashOutput {
    display: block;
	text-align: center;
}

.codes {
	position: relative;
	z-index: 10;
}

.footer {
    position: relative;
    margin-top: 30px;
    
}

.container {
    width: 800px;
    margin-left: 320px ;
	margin-right: auto ;
    height: 0;
}

.flagbox {
	width: 800px;
	margin-left: auto ;
	margin-right: auto ;
	height: 0;
}


.small {
    font-size: 10px; color: gray;
}