/*** WEB FONT ***/
@font-face {
  font-family: 'Nobile';
  src: url('Nobile/Nobile-Regular.ttf');
  font-weight:normal;
  font-style:normal;
}
@font-face {
  font-family: 'Nobile';
  src: url('Nobile/Nobile-Medium.ttf');
  font-weight:medium;
  font-style:normal;
}
@font-face {
  font-family: 'Nobile';
  src: url('Nobile/Nobile-Bold.ttf');
  font-weight:bold;
  font-style:normal;
}
@font-face {
  font-family: 'Nobile';
  src: url('Nobile/Nobile-Italic.ttf');
  font-weight:normal;
  font-style:italic;
}
@font-face {
  font-family: 'Nobile';
  src: url('Nobile/Nobile-MediumItalic.ttf');
  font-weight:medium;
  font-style:italic;
}
@font-face {
  font-family: 'Nobile';
  src: url('Nobile/Nobile-BoldItalic.ttf');
  font-weight:bold;
  font-style:italic;
}

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');

/*** Font Application ***/
body {
  font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

/*** NAVBAR ***/
nav {
  width: 100%;
}

nav ul {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

nav ul li {
  display: inline-block;
  padding: 1em 5%;
}

/* Navbar links */

nav a {
  padding: 5px 20px;
  text-decoration: none;
  outline: none;
  color: black;
  border: 1.5px solid black;
  border-radius: 5px;
  transition: 0.25s;
}
nav a:link {
  padding: 5px 20px;
  text-decoration: none;
  outline: none;
  color: black;
  border: 1.5px solid black;
  border-radius: 5px;
}
nav a:focus {
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #191919;
  color: #e8e8e8;
}
nav a:hover {
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #191919;
  color: #e8e8e8;
}
nav a:active {
  background-color:#FF0000;
  transition: 0.1s;
}

#photos {
  text-align: center;
}

/*** FOOTER ***/
footer {
  width: 100%;
/*  background-color: #2a2a2a;*/
  height: 3em;
/*  position: absolute;*/
  margin-top: 2em;
}
footer ul {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

footer ul li {
  display: inline-block;
  padding: 1em 5%;
  
}

/* Footer Links */
footer a {
  padding: 5px 20px;
  text-decoration: none;
  outline: none;
  color: #FCFCFC;
  background-color: lightgrey;
  border: none;
  transition: 0.25s;
}
footer a:link {
  border-radius: 5px;
/*
  padding: 5px 20px;
  text-decoration: none;
  outline: none;
  color: black;
  border: 1.5px solid black;
  border-radius: 5px;
*/
}
footer a:focus {
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #d9d9d9;
  color: #2a2a2a;
}
footer a:hover {
  transition: 0.5s;
  transition-timing-function: ease;
  background-color: #d9d9d9;
  color: #2a2a2a;

}
footer a:active {
  background-color:#FF0000;
  transition: 0.1s;
  border-radius: 0px
}


p > a {
  text-decoration: none;
  outline: none;
  color: inherit;
}
p > a:link {
  color: #d10000;
}
p > a:visited {
  text-decoration: none;
  color: grey;
}
p > a:focus {
  background: #050505;
  border: none;
  color: white;
}
p > a:hover {
  background: #050505;
  border: none;
  color: white;
}
p > a:active {
  background: #f0f0f0;
  border: none;
  color: black;
}