@import url(https://fonts.googleapis.com/css?family=Aref+Ruqaa);
@import url(https://fonts.googleapis.com/css?family=Mystery+Quest);
@import url(https://fonts.googleapis.com/css?family=Gabriela);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background-color: black;
  color: #00cccc;
  font-size: 2rem;
  font-family: "Aref Ruqaa", helvetica;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*-------------------navbar rightside---------------------*/
.open2 {
  position: fixed;
  top: 2px;
  right: 7px;
  width: 3rem;
}

.navbar2 {
  display: none;
  height: 100%;
  width: 3rem;
  position: fixed;
  z-index: 1;
  top: 2px;
  right: 7px;
  display: flex;
  flex-direction: column;
  transition: .5s ease;
}

a, .navbar2 a, .open a {
  text-decoration: none;
  font-size: 0.8rem;
  color: aliceblue;
  display: block;
  outline: none;
}
a:hover, .navbar2 a:hover, .open a:hover {
  color: plum;
}

.fa {
  border: 2px solid burlywood;
  -webkit-box-shadow: 0 0 0.4rem burlywood, 0 0 1.2rem tomato inset;
  -moz-box-shadow: 0 0 0.4rem burlywood, 0 0 1.2rem tomato inset;
  box-shadow: 0 0 0.4rem burlywood, 0 0 1.2rem tomato inset;
  color: burlywood;
  border-radius: 1px 15px;
  background-color: transparent;
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
}
.fa:hover {
  border: 2px solid cyan;
  color: cyan;
  transform: translate(0, -2.5%);
  -webkit-box-shadow: 0 0 0.4rem cyan;
  -moz-box-shadow: 0 0 0.4rem cyan;
  box-shadow: 0 0 0.4rem cyan;
}

.fa-desktop, .fa-envelope, .fa-home, .fa-about {
  font-size: 1.5rem;
}

.topfa {
  border: 2px solid burlywood;
  -webkit-box-shadow: 0 0 0.4rem burlywood;
  -moz-box-shadow: 0 0 0.4rem burlywood;
  box-shadow: 0 0 0.4rem burlywood;
  color: tomato;
  width: 3.5rem;
  padding: 0.5rem;
  margin: 0.5rem;
}
.topfa:hover {
  border: 2px solid cyan;
  color: cyan;
  transform: translate(0, -2.5%);
  -webkit-box-shadow: 0 0 0.4rem cyan;
  -moz-box-shadow: 0 0 0.4rem cyan;
  box-shadow: 0 0 0.4rem cyan;
}

.bottomfa {
  border: 2px solid lime;
  -webkit-box-shadow: 0 0 0.4rem lime;
  -moz-box-shadow: 0 0 0.4rem lime;
  box-shadow: 0 0 0.4rem lime;
  color: #4da6ff;
  width: 3.5rem;
  padding: 0.5rem;
  margin: 0.5rem;
}
.bottomfa:hover {
  border: 2px solid #ff5050;
  color: #ff5050;
  transform: translate(0, -2.5%);
  -webkit-box-shadow: 0 0 0.4rem cyan;
  -moz-box-shadow: 0 0 0.4rem cyan;
  box-shadow: 0 0 0.4rem cyan;
}

/*-------------------Main content begins---------------------*/
.main {
  margin-left: 0;
  margin-right: 0;
  /*-------------------HOME subtype----------------*/
  /*-------------------ABOUT subtype----------------*/
  /*-------------------PORTFOLIO subtype----------------*/
  /*-------------------CONTACT subtype----------------*/
  /*-------------------FOOTER subtype----------------*/
  /*-------------------FOOTER ends----------------*/
}
.main .home {
  background: url("https://github.com/rkm09/FCC/blob/master/home.png?raw=true") no-repeat center fixed;
  background-size: cover;
  background-color: #73264d;
  width: 100%;
  height: 40rem;
}
.main .home .home-content {
  background-color: #73264d;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 50rem;
  height: auto;
  border: 3px solid burlywood;
  border-radius: 5px 85px;
  transition: .3s ease;
  padding: 2rem;
  -webkit-box-shadow: 0 0 0.4rem #d3a15f, 0 0 0.4rem #d3a15f inset;
  -moz-box-shadow: 0 0 0.4rem #d3a15f, 0 0 0.4rem #d3a15f inset;
  box-shadow: 0 0 0.4rem #d3a15f, 0 0 0.4rem #d3a15f inset;
}
.main .home .home-content:hover {
  transform: translate(0, -2%);
  -webkit-box-shadow: 0 0 1.1rem #d3a15f, 0 0 0.4rem #d3a15f inset;
  -moz-box-shadow: 0 0 1.1rem #d3a15f, 0 0 0.4rem #d3a15f inset;
  box-shadow: 0 0 1.1rem #d3a15f, 0 0 0.4rem #d3a15f inset;
}
.main .home .home-content #intro {
  color: tomato;
}
.main .home .home-content .head {
  font-size: 3rem;
  color: burlywood;
}
.main .home .home-content #idtypes {
  font-size: 1.3rem;
  color: burlywood;
}
.main .home .home-content .social {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.main .about {
  background: url("https://github.com/rkm09/FCC/blob/master/about.png?raw=true") no-repeat center fixed;
  background-size: cover;
  background-color: #476b6b;
  width: 100%;
  height: 55rem;
}
.main .about .abt-outer {
  background-color: #476b6b;
  border: 3px solid #4d194d;
  border-radius: 5px 115px;
  width: 70%;
  height: 48rem;
  display: flex;
  flex-direction: column;
  transition: .3s ease;
  padding: 2rem;
  -webkit-box-shadow: 0 0 0.8rem #ffcccc, 0 0 0.4rem #2eb8b8 inset;
  -moz-box-shadow: 0 0 0.8rem #ffcccc, 0 0 0.4rem #2eb8b8 inset;
  box-shadow: 0 0 0.8rem #ffcccc, 0 0 0.4rem #2eb8b8 inset;
}
.main .about .abt-outer:hover {
  transform: translate(0, -2%);
  -webkit-box-shadow: 0 0 1.8rem #ffcccc, 0 0 0.4rem #2eb8b8 inset;
  -moz-box-shadow: 0 0 1.8rem #ffcccc, 0 0 0.4rem #2eb8b8 inset;
  box-shadow: 0 0 1.8rem #ffcccc, 0 0 0.4rem #2eb8b8 inset;
}
.main .about .abt-outer .abt-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  color: #262626;
  font-size: 1.8rem;
}
.main .about .abt-outer .abt-inner .abt-head {
  font-size: 3rem;
  font-family: "Mystery Quest", helvetica;
  color: #73264d;
  text-align: center;
  letter-spacing: 0.1rem;
}
.main .about .abt-outer .abt-inner .photo #imphoto {
  display: block;
  -webkit-box-shadow: 0 0 0.4rem #ffcccc;
  -moz-box-shadow: 0 0 0.4rem #ffcccc;
  box-shadow: 0 0 0.4rem #ffcccc;
  transition: .2s ease;
  border: 3px solid #4d194d;
  border-radius: 50%;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #666666;
}
.main .about .abt-outer .abt-inner .photo #imphoto:hover {
  transform: translate(0, -3%);
  -webkit-box-shadow: 0 0 1.4rem #ffcccc;
  -moz-box-shadow: 0 0 1.4rem #ffcccc;
  box-shadow: 0 0 1.4rem #ffcccc;
}
.main .about .abt-outer .abt-inner .abt {
  text-align: center;
}
.main .about .abt-outer .abt-inner .tools {
  text-align: center;
}
.main .about .abt-outer .abt-inner .title {
  color: #4d194d;
  font-size: 2.4rem;
}
.main .about .abt-outer .abt-inner .subtitle {
  color: #660033;
}
.main .portfolio {
  background: url("https://github.com/rkm09/FCC/blob/master/portfolio.png?raw=true") no-repeat center fixed;
  background-size: cover;
  background-color: #004d4d;
  width: 100%;
  height: auto;
  padding: 2rem;
  font-family: "Mystery Quest", helvetica;
}
.main .portfolio .hd {
  font-size: 3rem;
  font-family: "Mystery Quest", helvetica;
  color: #00cccc;
  text-align: center;
}
.main .portfolio .port1, .main .portfolio .port2, .main .portfolio .port3 {
  cursor: pointer;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
}
.main .portfolio .port1 > div, .main .portfolio .port2 > div, .main .portfolio .port3 > div {
  background-color: #196666;
  position: relative;
  width: 22rem;
  height: 22rem;
  border: 2px solid #00cccc;
  border-radius: 5px 45px;
  margin: 1rem;
  padding: 1.5rem;
  padding-bottom: 0.1rem;
  transition: 0.2s ease;
  -webkit-box-shadow: 0 0 0.4rem #00cccc, 0 0 0.5rem #000 inset;
  -moz-box-shadow: 0 0 0.4rem #00cccc, 0 0 0.5rem #000 inset;
  box-shadow: 0 0 0.4rem #00cccc, 0 0 0.5rem #000 inset;
}
.main .portfolio .port1 > div:hover, .main .portfolio .port2 > div:hover, .main .portfolio .port3 > div:hover {
  background-color: rgba(255, 128, 128, 0.9);
  border: 2px solid #ff8080;
  transform: translate(0, -1.5%);
  -webkit-box-shadow: 0 0 1rem #ff8080, 0 0 0.5rem #000 inset;
  -moz-box-shadow: 0 0 1rem #ff8080, 0 0 0.5rem #000 inset;
  box-shadow: 0 0 1rem #ff8080, 0 0 0.5rem #000 inset;
}
.main .portfolio .port1 > div:hover .sp, .main .portfolio .port2 > div:hover .sp, .main .portfolio .port3 > div:hover .sp {
  opacity: 1;
  height: 40%;
  border-radius: 5px 45px;
  border-top: 1px solid #ff8080;
  -webkit-box-shadow: 0 0 0.6rem #ff8080, 0 0 0.5rem #000 inset;
  -moz-box-shadow: 0 0 0.6rem #ff8080, 0 0 0.5rem #000 inset;
  box-shadow: 0 0 0.6rem #ff8080, 0 0 0.5rem #000 inset;
}
.main .portfolio .port1 > div:hover .portim, .main .portfolio .port2 > div:hover .portim, .main .portfolio .port3 > div:hover .portim {
  -webkit-box-shadow: 0 0 0.7rem #000;
  -moz-box-shadow: 0 0 0.7rem #000;
  box-shadow: 0 0 0.7rem #000;
  transform: translate(0%, -0.5%);
}
.main .portfolio .port1 > div .portim, .main .portfolio .port2 > div .portim, .main .portfolio .port3 > div .portim {
  border-radius: 5px 25px;
  border: 1px solid darkgray;
  -webkit-box-shadow: 0 0 0.5rem #000;
  -moz-box-shadow: 0 0 0.5rem #000;
  box-shadow: 0 0 0.5rem #000;
}
.main .portfolio .port1 .sp, .main .portfolio .port2 .sp, .main .portfolio .port3 .sp {
  position: absolute;
  top: 60%;
  left: 0;
  font-size: 1.5rem;
  font-family: "Mystery Quest", helvetica;
  color: #000;
  text-align: center;
  transition: .5s ease;
  width: 100%;
  height: 0%;
  z-index: 3;
  background-color: rgba(255, 128, 128, 0.8);
  opacity: 0;
}
.main .contact {
  background: url("https://github.com/rkm09/FCC/blob/master/contact.png?raw=true") no-repeat center fixed;
  background-size: cover;
  background-color: #206040;
  width: 100%;
  height: 35rem;
}
.main .contact .ctemp {
  background-color: #206040;
  font-size: 1.1rem;
  width: 42rem;
  height: auto;
  padding: 2rem;
  border: 2px solid lime;
  border-radius: 5px 85px;
  -webkit-box-shadow: 0 0 0.7rem burlywood, 0 0 0.4rem lime inset;
  -moz-box-shadow: 0 0 0.7rem burlywood, 0 0 0.4rem lime inset;
  box-shadow: 0 0 0.7rem burlywood, 0 0 0.4rem lime inset;
  transition: .3s ease;
}
.main .contact .ctemp:hover {
  transform: translate(0, -3%);
  -webkit-box-shadow: 0 0 1.7rem burlywood, 0 0 0.4rem lime inset;
  -moz-box-shadow: 0 0 1.7rem burlywood, 0 0 0.4rem lime inset;
  box-shadow: 0 0 1.7rem burlywood, 0 0 0.4rem lime inset;
}
.main .contact .ctemp .comm {
  display: flex;
  flex-direction: column;
  align-items: space-around;
  margin: 1rem;
}
.main .contact .ctemp .comm #talk {
  font-size: 1.5rem;
  text-align: center;
  color: dodgerblue;
  font-family: "Mystery Quest", helvetica;
  letter-spacing: 0.1rem;
}
.main .contact .ctemp .comm .contactq {
  color: #33cc33;
  font-size: 2.5rem;
}
.main .contact .ctemp .comm .social2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.main .footer {
  background: url("https://github.com/rkm09/FCC/blob/master/home.png?raw=true") no-repeat center fixed;
  background-size: cover;
  background-color: #73264d;
  width: 100%;
  height: auto;
  font-size: 1.2rem;
  color: dodgerblue;
  font-family: "Mystery Quest", helvetica;
  word-spacing: 0.2rem;
  letter-spacing: 0.2rem;
}
.main .footer #ft {
  font-size: 1.5rem;
  color: tomato;
  padding: 0.4rem;
}
.main .footer #ft1 {
  font-size: 1.9rem;
  color: tomato;
  padding: 0.4rem;
}

/*-------------------MAIN ends--------------------------------*/