/* Remove Color from Links */
a {
    color: inherit;
}


	@font-face {
    font-family: Linoface;
    src: url(http://kaporos.info/linoface.woff);
}

#content{
	font-size:36px;
	font-family:Linoface;
	padding-top:100px;
}
 /* Remove margins and padding from the list, and add a black background color */
ul.topnav {
	max-height:55px;
	transition: max-height 2s ease-out;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:black;
	font-size:27px;
}

ul.topnav li {
	border-right:2px solid grey;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 1em;
	font-family:Linoface;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:580px) {
	ul.topnav li a {font-size:0.8em;}
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
  ul.topnav.responsive {
	  position: relative; 
  max-height:100vh;
  transition: max-height 2s;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
	  border:none;
    float: none;
    display: inline;
	transition:2s;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

#submission{
	border-radius:25px;
	background-color:#AB0002;
	width:calc(100vw - 40px);
	max-width:500px;
	margin:20px auto;
	text-align:center;
	box-shadow: rgba(0, 0, 0, .5) 3px 7px 20px;
	padding: 20px;
	display:block;
	font-size:18px;
}

input,select, textarea{ 
	appearance:none;
	box-sizing: border-box; 
	display: block;
	margin:0 auto 10px;
	border-radius:10px;
	font-family: "Helvetica Neue", Arial, sans-serif;
	border: 2px solid #dedede;
	font-size: 1em;
	padding: 10px 10px;
	width: 90%;
	color: #777; 
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
	transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}


input:focus, textarea:focus{ 
  color: #333;
  border-color: rgba(41, 92, 161, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
  outline: 0 none; 
}

button{
	background-color:white;
	appearance:none;
	box-sizing: border-box; 
	display: block;
	margin:0 auto 10px;
	border-radius:10px;
	font-family: "Helvetica Neue", Arial, sans-serif;
	border: 2px solid #dedede;
	font-size: 1em;
	padding: 10px 40px;
	color: #777; 
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
	transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
	}


#middle{
	position:absolute;
	top:55px;
	height:calc(100vh - 85px);
	width:100vw;
	background-color:white;
	z-index:-1;
	padding:20px;
	font-size:26px;
	font-family:Linoface;
}

.title{
	font-family:Linoface;
	font-size:36px;
	margin-top:20px;
	text-align:center;
}

.question{
	font-family:Linoface;
	font-size:24px;
	margin-top:20px;
	margin-left:30px
}

.answer{
	margin-left:70px;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	margin-right:10px;
}

#logo{
    max-width: 100vh;
    height: 100%;
    max-height: 100%;
    background-image: url('logo.png'); /* Changes when LARGER */
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: center center;
}
#footer{
	position:fixed;
	bottom:0px;
	height:30px;
	width:100%;
	background-color:black;
	color:white;
	font-family:Linoface;
	font-size:22px;
	margin:0;
}