@charset 'utf-8';

/* Font and background changes */
h2 {
  color: #3BC1F6;
  font-family: Arial;
  font-size: 16pt;
}

body {
  background-color: #C0EDFF;
}

.redFont {
  color: red;
}

.uppercase {
  text-transform: uppercase;
}

#habitatsHeading {
  color: pink;
}

/* hyperlinks */
a:link {
  /* Link is not clicked */
  text-decoration: none;
}

a:hover {
  /* mouse is hovering over the link  */
  text-decoration: none;
  text-transform: uppercase;
  color: #FFFFFF;
}

a:visited {
  /* Link has already been clicked */
  text-decoration: none;
}

/* Layouting */
nav, header, article  {
  //border: 5px red solid;
  background-color: #5BCEFC;
  padding-top: 15px;
  /*margin-top: 50px; */
  padding-bottom: 15px;
  padding-left: 15px;
  /*text-align: center; */
  margin-left: 15%;
  margin-right: 15%;
  border-radius: 10px;
  margin-bottom: 5px;
}
/*
Add header, article after then add margin-bottom: 5px;
*/

nav {
  background-color: white;
  height: 30px;
}

aside {
  //border: 5px red solid;
  max-width: 20%;
  float: right;
  margin-right: 15%;
  padding-right: 10px;
}

/* ---- Buttons ----*/

.button {
  border: 5px #3BC1F6 solid;
  width: 65px;
  text-align: center;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #C0EDFF;
  border-radius: 10px;
  float: left;
  margin-right: 3px;
}

a:link .button {
  text-transform: uppercase;
}

a:visited .button {
  text-transform: uppercase;
}

a:hover .button {
  text-transform: uppercase;
  border-color: #C0EDFF;
  background-color: #3BC1F6;
}

/* ---- Center and Image ----
Would center all images, use classes to center the images with that class like .center-image*/
img {
  display: block;
  margin-left:auto;
  margin-right:auto;
}