/*
    This is the custom font used across the entire site.
*/

font-face {
    font-family: "VT323";
    src: url("assets/fonts/VT323/VT323-Regular.ttf");
}


/*
    This is the Text Formatiing.
*/

body {
    background-color: #093a68;
    color: #ffffff;
    font-family: "VT323";
    text-align: center;
    font-size: large;
}

body>div {
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 3%;
    margin-bottom: 2%;
}

body>div>h1 {
    font-size: xx-large;
    font-style: italic;
}

body>div>p {
    font-size: normal;
}


  
  .grid-container {
    display: grid;
    grid-template-columns: 500px auto;
    grid-gap: 10px;
    padding: 10px;
    width: 100%;
  }
  
  .item1 {
    grid-row: 1 / span 2;
  }
  .item2 {
    grid-row: 1 / span 2;
  } 
/*
    This is the Home Page Header.
*/
header h1 {
     font-style: italic;
     font-style: bold;
     color: #000000;
}
.navbar {
    display: flex;
    background-color: #000000;
    position: relative;
    overflow: auto;
    width: 100%;
    text-align: center;
  }
.navbar a {
    float: left;
    padding: 10px;
    font-size: normal;
    color: #b22222;
    text-align: center;
    text-decoration: none;
    width: 100%;
  }
  
  .navbar a:hover {
    background-color: #ddd;
    color: #000000;
  }
  
  .navbar a.active {
    background-color: #0ddceb;
    color: white;
  }

.Screenshot {
    width: 105%;
    image-rendering: crisp-edges;
}

/*
    This is the Footer
*/

#footerTarget
font-face {
    font-family: "VT323";
    src: url("assets/fonts/VT323/VT323-Regular.ttf");
}

footer {
    background-color: #000000;
    color: #ffffff;
    font-family: "VT323";
    text-align: center;
    font-size: small;
}

footer>hr {
    color: #ffffff;
    text-align: center;
    width: 100%;
}

.sm_icon{
 
    width: 50px;
    /* the height is adjusted automatically*/
  }
/*
    This is for the Contact.HTML
*/

.form-style-1 {
	margin:10px auto;
	max-width: 400px;
	padding: 20px 12px 10px 20px;
	font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
	padding: 0;
	display: block;
	list-style: none;
	margin: 10px 0 0 0;
}
.form-style-1 label{
	margin:0 0 3px 0;
	padding:0px;
	display:block;
	font-weight: bold;
}
.form-style-1 input[type=text], 
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea, 
select{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border:1px solid #BEBEBE;
	padding: 7px;
	margin:0px;
}
.form-style-1 input[type=text]:focus, 
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus, 
.form-style-1 select:focus{
	-moz-box-shadow: 0 0 8px #88D5E9;
	-webkit-box-shadow: 0 0 8px #88D5E9;
	box-shadow: 0 0 8px #88D5E9;
	border: 1px solid #88D5E9;
}
.form-style-1 .field-divided{
	width: 49%;
}

.form-style-1 .field-long{
	width: 100%;
}
.form-style-1 .field-select{
	width: 100%;
}
.form-style-1 .field-textarea{
	height: 100px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
	background: #4B99AD;
	padding: 8px 15px 8px 15px;
	border: none;
	color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
	background: #4691A4;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
}
.form-style-1 .required{
	color:red;
}

@media screen and (max-width: 500px) {
    .navbar {
      float: none;
      display: block;
      width: 100%;
      text-align: left;
    }
  }