/*
  DIAGNOSTIC STYLING
*/

@import url('https://fonts.googleapis.com/css?family=Catamaran');
@import url('https://fonts.googleapis.com/css?family=Rock+Salt');

body {
  background-color: rgb(16, 16, 16);
  color: white;
  font-family: 'Catamaran', sans-serif;
}

img:hover {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}

img {
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}

#home{
  background-image: url("/img/homepage.JPG");
  background-size:100% auto;
}

/* Nav Bar */

#navbar{
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  list-style-type: none;
  width: auto;
  height:50px;
  background-color: rgb(16, 16, 16);
}

li{
  margin: 1em;
}

a{
  text-decoration: none;
  color:white;
}

a:hover{
  background-color: rgb(29, 29, 29);
  font-size: 18px;
  padding: .55em;
}

a.current {
  background-color: black;
  padding: .75em
}

/* Headers */
#header{
  text-align: center;
  margin-top: 100px;
  animation: bounceIn 2s;
}

#aboutHeader{
  text-align: center;
  animation: zoomInDown 2s;
}

#portfolioHeader{
  text-align: center;
  animation:bounceInLeft 2s;
  }

#contactHeader{
  text-align: center;
  animation: flipInY 1s;
}

/* Home Styling */

#enterPortfolio{
display: flex;
justify-content: center;
margin-top: 60px;
opacity: .75;
}

#enterPortfolio:hover{
  animation: heartBeat 3s;
  opacity: .99;

}

#nikky{
  text-align: center;
  margin-top: 320px;
  font-size: 54px;
  font-family: 'Rock Salt', cursive;
  animation: rollIn 2s ;
}

input{
  background-color: rgb(0, 0, 0);
  opacity: .9;
  color: white;
  padding: .75em;
  border: none;
  border-radius: 2px;
  padding-left: 70px;
  padding-right:70px;
  padding-top: 15px;
  padding-bottom:15px;
  font-size: 18px;
}

/* About Styling */
#me3{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#abouth2{
text-align: center;
}

#pOne{
  display: flex;
  align-items: center;
}

.pOne{
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 30px;
  font-size: 20px;
}

#pTwo{
  display: flex;
  align-items: center; 
}

.pTwo{
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 30px;
  font-size: 20px;
}
/* Portfolio Styling */

.lg-backdrop{
  background-color:black;
}

#portfolio{
  display: block;
  margin-left: 7%;
}

#sketch{
  margin-top: 25px;
}

/* Contact Styling */


fieldset{
  border: 2px solid rgb(46, 46, 46);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  
}


label, #input{
  height:10px;
  padding: 15px;
  align-content: auto;
}

#email, #comments{
  margin-top: 15px;
}

textarea, #input{
  margin-top:10px;
  width: 500px;
  color:white;
  border: none;
  border-radius: 10px;
  background-color: rgb(48, 48, 48);
}
#input{
  width: 300px;
}

.send{
  padding-left: 20px;
  padding-right: 20px;
  margin: 15px;
  border-radius: 10px;
}

/* Footer */
footer{
  text-align: center;
  font-size: 10px;
}