/* * * 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;
   font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

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

.container {
  padding: 0;
  min-height: 100%;

  margin-top: 0px;
  margin-bottom: -70;
  margin-right: auto;
  margin-left: auto;
}


img {
  width: 30%;
  height: auto
}

header{
  background-color: #FF4044;
}

header div{
  width: 80%;

  padding-top: 30px;
  padding-right: 0;
  padding-bottom: 30px;
  padding-left: 0;

  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

.main-logo{
  color: orange;
  background-color: black;

  font-family: monospace, lucida, sans-serif;

  font-size: 8vh;

  margin-left: 5%;
  text-decoration: none;
  position: relative;
}

.page-title{
  font-family: 'Cambria', times, serif;
  font-size: 7vh;
  padding-left: 1%;
  position: relative;
}

section{
  background-image: url("https://th.bing.com/th/id/OIP.0y40Rem2gdOOsDXK70_LxQHaE6?w=286&h=190&c=7&r=0&o=7&pid=1.7&rm=3");

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

}

nav{
  left: 25px;
  position: relative;
  top: 10px;
  margin: 0 auto;
  width: 80%
}

nav a{
  color: #fffff;
  font-family: 'arial black', sans-serif;
  padding: 0.5vh;
  text-decoration: none;

  background-color: plum;
}

.nav-home:hover {
  background-color: black;
}
.nav-allthemiisonmywii:hover {
  background-color: black
}

.nav-everythingaboutdinosours:hover {
  background-color: black;
}

.nav-didieatpizza:hover {
  background-color: black;
}

nav a{
  transition: background-color 0.5 ease;
}

.content {
  background-color: rgba(232, 233, 235, 0.8);

  margin: 0 auto; /*using shorthand*/
  padding: 50px;
  width: 80%;
}

footer{
  position: relative;
  margin: 0 auto;
  width: 80%;
  height: 70px;
}

footer div{
  position:absolute;
  right: 0;
  width: 112px;
  z-index: 1;
}
.roblox-logo{
  background-image: url("https://th.bing.com/th/id/OIP.7HXpSX9ALIf3HVtTzLwmtwAAAA?w=133&h=150&c=7&r=0&o=7&pid=1.7&rm=3https://th.bing.com/th/id/OIP.7HXpSX9ALIf3HVtTzLwmtwAAAA?w=133&h=150&c=7&r=0&o=7&pid=1.7&rm=3");
}

.stepfordcountyrailway-logo{
  background-image: url("https://th.bing.com/th/id/OIP.aS70JX2TyUj3yLG5-6mbtAAAAA?w=67&h=62&c=7&r=0&o=7&pid=1.7&rm=3");
}

footer div a{
  background-size: 100% 100%;
  display: inline-block;
  height: 25px;
  overflow: hidden;
  text-indent: 101%;
  width: 25px;
}