@import url("progress.css");
@keyframes changeLetter {
  0% {
    content: "Front End Developer";
  }
  50% {
    color: #FFFCDD;
  }
  100% {
    content: "Wordpress Developer";
  }
}

@media screen and (max-width: 600px) {
  .rectangle4 {
    font-size: 40px;
  }
  .rectangle2, .rectangle3 {
    font-size: 42px;
  }
}

@media screen and (max-width: 600px) {
  #about {
    margin-bottom: 280%;
  }
}

@media screen and (max-height: 700px) {
  nav {
    margin-top: 20%;
  }
  #about {
    margin-bottom: 200%;
  }
}

.container-fluid, html, body {
  height: 100%;
  font-family: 'Raleway', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  background-color: #FFFCDD;
}

.container-fluid #home, html #home, body #home {
  font-size: 55px;
  height: 100%;
}

.container-fluid #home .rectangle1, html #home .rectangle1, body #home .rectangle1 {
  background-color: #47A025;
  height: 20%;
}

.container-fluid #home .rectangle2, html #home .rectangle2, body #home .rectangle2 {
  background-color: #FFFCDD;
  color: #47A025;
  height: 10%;
}

.container-fluid #home .rectangle3, html #home .rectangle3, body #home .rectangle3 {
  background-color: #47A025;
  color: #FFFCDD;
  height: 10%;
}

.container-fluid #home .rectangle4, html #home .rectangle4, body #home .rectangle4 {
  background-color: #FFFCDD;
  height: 70%;
  color: #00120B;
}

.container-fluid #home .rectangle4 #name, html #home .rectangle4 #name, body #home .rectangle4 #name {
  color: #65527e;
}

.container-fluid #home .rectangle4 .btn-outline-success, html #home .rectangle4 .btn-outline-success, body #home .rectangle4 .btn-outline-success {
  border-color: #47A025;
  font-size: 30px;
}

.container-fluid #home .rectangle4 .btn-outline-success .fa-arrow-right, html #home .rectangle4 .btn-outline-success .fa-arrow-right, body #home .rectangle4 .btn-outline-success .fa-arrow-right {
  transition: all 0.4s ease-in-out;
}

.container-fluid #home .rectangle4 .btn-outline-success:hover, html #home .rectangle4 .btn-outline-success:hover, body #home .rectangle4 .btn-outline-success:hover {
  background-color: #47A025;
  color: #FFFCDD;
}

.container-fluid #home .rectangle4 .btn-outline-success:hover .fa-arrow-right, html #home .rectangle4 .btn-outline-success:hover .fa-arrow-right, body #home .rectangle4 .btn-outline-success:hover .fa-arrow-right {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: all 0.4s ease-in-out;
}

.container-fluid nav, html nav, body nav {
  background-color: #FFF69A;
  font-size: 30px;
  text-decoration: none;
  color: #65527e;
  border-top: 3px solid #CCC68A;
  min-height: 60px !important;
}

.container-fluid nav .navbar-nav > li > a, html nav .navbar-nav > li > a, body nav .navbar-nav > li > a {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.container-fluid nav .navbar-nav > li, html nav .navbar-nav > li, body nav .navbar-nav > li {
  margin-left: 25px;
}

.container-fluid #about, html #about, body #about {
  height: 100%;
  width: 100%;
  background-color: #FFFCDD;
  font-size: 50px;
}

.container-fluid #about hr, html #about hr, body #about hr {
  border-width: 6px;
  width: 6%;
  border-color: #00120B;
}

.container-fluid #about i, html #about i, body #about i {
  color: #65527e;
  margin: auto;
  font-size: 55px;
}

.container-fluid #about .change, html #about .change, body #about .change {
  font-size: 25px;
}

.container-fluid #about .change .small, html #about .change .small, body #about .change .small {
  font-size: 23px;
}

.container-fluid #about .change .font, html #about .change .font, body #about .change .font {
  font-family: 'Dancing Script', cursive;
  font-size: 30px;
}

.container-fluid #about .change .pos, html #about .change .pos, body #about .change .pos {
  overflow: hidden;
  position: relative;
  padding: 0.67em;
  width: 45%;
  height: 30%;
}

.container-fluid #about .change .pos i, html #about .change .pos i, body #about .change .pos i {
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.container-fluid #about .change .pos:before, .container-fluid #about .change .pos:after, html #about .change .pos:before, html #about .change .pos:after, body #about .change .pos:before, body #about .change .pos:after {
  content: '';
  position: absolute;
  left: 0.1;
  width: 20%;
  text-align: center;
  opacity: 0;
  -webkit-transition: .4s,opacity .6s;
  -moz-transition: .4s,opacity .6s;
  -o-transition: .4s,opacity .6s;
  transition: .4s,opacity .6s;
}

.container-fluid #about .change .pos:before, html #about .change .pos:before, body #about .change .pos:before {
  content: attr(data-hover);
  font-size: 60px;
  color: #65527e;
  margin-top: -15%;
  -webkit-transform: translate(-150%, 0);
  -moz-transform: translate(-150%, 0);
  -ms-transform: translate(-150%, 0);
  -o-transform: translate(-150%, 0);
  transform: translate(-150%, 0);
}

.container-fluid #about .change .pos:hover i, .container-fluid #about .change .pos:active i, html #about .change .pos:hover i, html #about .change .pos:active i, body #about .change .pos:hover i, body #about .change .pos:active i {
  opacity: 0;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -o-transform: scale(0.3);
  transform: scale(0.3);
}

.container-fluid #about .change .pos:hover:before, .container-fluid #about .change .pos:active:after, html #about .change .pos:hover:before, html #about .change .pos:active:after, body #about .change .pos:hover:before, body #about .change .pos:active:after {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition-delay: .4s;
  -moz-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}

.container-fluid #about .littleM, html #about .littleM, body #about .littleM {
  font-size: 20px;
  line-height: 1.8em;
}

.container-fluid #projects, html #projects, body #projects {
  height: 100%;
  background-color: #FFFCDD;
  font-size: 50px;
}

.container-fluid #projects hr, html #projects hr, body #projects hr {
  border-width: 6px;
  width: 6%;
  border-color: #00120B;
}

.container-fluid #projects .project, html #projects .project, body #projects .project {
  height: 300px;
  width: 333px;
  overflow: hidden;
  padding: 0;
  background-color: #EEE8AC;
}

.container-fluid #projects .showMe, html #projects .showMe, body #projects .showMe {
  font-size: 20px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.5s, opacity 0.5s ease-out;
  position: absolute;
  width: 80%;
  margin-left: 10%;
}

.container-fluid #projects img, html #projects img, body #projects img {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.5s, opacity 0.5s ease-out;
  position: absolute;
}

.container-fluid #projects .project:hover img, html #projects .project:hover img, body #projects .project:hover img {
  visibility: hidden;
  opacity: 0;
}

.container-fluid #projects .project:hover .showMe, html #projects .project:hover .showMe, body #projects .project:hover .showMe {
  opacity: 1;
  visibility: visible;
}


#contact{
  height: 100%;
  background-color: #FFFCDD;
  font-size: 50px;
  margin-top: -13%;
}
@media screen and (max-width: 990px)
{
    #contact
    {
        margin-top: 90%;
    }
    footer
    {
        margin-top: 180% !important;
        position: sticky;
        bottom: 0;
    }
}
@media (max-height: 700px)
{
    footer
    {
        margin-top: 40% !important;
    }
}
.container-fluid #contact hr, html #contact hr, body #contact hr {
  border-width: 6px;
  width: 6%;
  border-color: #00120B;
}