/* * * START CSS TIPS * * *
  * Great places to learn about CSS
  * * https://css-tricks.com
  * * https://www.w3schools.com/
  * * https://www.google.com/
  * List of available CSS properties: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  * List of shorthand properties: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
  * Directory paths: https://css-tricks.com/quick-reminder-about-file-paths/
  * To know which browsers support what property: https://caniuse.com/
  * Alphabetizing your CSS properties makes for easier reading
  * Indenting by 2 spaces helps for readability
  * When developing with CSS use classes as much as possible leave id(s) for Javascript
  * Give everything a meaningful name
  * By default all elements are set to position:static: Default value. Elements render in order, as they appear in the document flow
  * Single property items can be on the same line as enclosing bracket { } saves on whitespace while developing
  * Whitespace is ignored, will not render in HTML file
  * Every property should end with a semi colon
  * Remember to compress your imagery: https://enviragallery.com/9-best-free-image-optimization-tools-for-image-compression/ no one want to wait and download a 1 MB image on a mobile device
  * Fonts - web safe fonts will give you the most speed when someone is trying to view your site at an airport, museum, in a canyon - somewhere there is a slow connection, not everyone travels at the same speed
 * * * END CSS TIPS * * */

 *{
  box-sizing: border-box;
 }

 :any-link{
  color: rgb(88, 136, 122);
 }

 div{
  color: rgb(141, 216, 194);
 }


 html, body {
  height: 100%;
  margin: 0;
 }

.container {
  padding: 0;
  min-height: 100%;
  margin-top: 0px;
  margin-bottom: -70px;
  margin-right: auto;
  margin-left: auto
 }

 img {
  width: 35%;
  height: auto;
 }

 header{
  background-color: rgb(77, 138, 119);
 }

 header div{
  width: 80%;
  padding-top: 30px;
  padding-right: 0;
  padding-bottom: 30px;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: auto;
  margin-left: auto;
 }

.main-logo{
  color: rgb(60, 134, 158);
  background-color: rgb(51, 72, 119);
  font-family: 'arial black', Arial, Helvetica, sans-serif;
  font-size: 6vh;
  margin-left: 5%;
  text-decoration: none;
  position: relative
}

.page-title{
  color: rgb(75, 169, 201);
  font-family: 'Cambria', times,serif;
  font-size: 5vh;
  padding-left: 1%;
  position: relative;
}

section{
 background-image: url(https://static.vecteezy.com/system/resources/thumbnails/046/140/426/small_2x/dark-blue-pixilated-gradient-background-mosaic-pixel-art-texture-horizontal-pixel-gradient-backdrop-photo.jpg);

 background-position: center center;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 min-height: 800px;
 padding-top: 50px;

}

 .content{
  background-color: rgba(0, 0, 0, 0.348);

  margin: 0 auto;
  min-height: 700px;
  padding: 50px;
  width:80%
 }