/* elements */
html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
}

body {
  margin: 0;
  text-align: center;
  font-family: 'Merriweather', serif;
}

h1 {
  color: #45b29a;
  font-size: 290%;
font-family: 'Marcellus SC', serif;
}



h2 {
  color: #45b29a;
  font-size: 300%;
font-family: 'Marcellus SC', serif;
}

h3 {
  font-size: 170%;
  color: #74d4c0;
  font-family: 'Montserrat';
}

p {
  font-family: Monotono;
  font-size: 150%;
}

hr {
  width: 5%;
  border-style: none;
  border-top: 4px dotted;
  border-top-color: silver;
}



/* containers*/
.top-container {
  position: relative;
  padding-top: 100px;
  color: #45b29a;
  padding: 1em 0;
  font-size: 180%;
  font-weight: 400;
}



#bottom-container {
  padding-top: 20px;
  background-color: #ececec;
  font-size:12px;
  padding-bottom: 10px;
}


/* REST */
.for-top {
  margin-top: 30px;
}

.top-links {
  font-family: 'Monoton';
  margin: 10px 50px 0px 50px;
  font-size: 25px;
  color: #fff;
}

.top-links:hover {
  color: #6f0000;
  transition: .7s;
}


.define-me {
  font-family: 'Monoton', sans-serif;
  word-spacing: 15px;
  position: relative;
  bottom: 50px;
}

.profile {
  padding: 5%;
  background-color: #fdd998;
}

.skills {
  padding: 2%;
  background-color: #dcedc1;
}

.skill-row {
  width: 50%;
  margin: auto;
  margin-bottom: 100px;
  text-align: left;
  line-height: 1.7;
}

.contact-me {
  padding: 2%;
}

.contact-heading{
   display:inline;
}

.footer-link {
  color: #381460;
}

/* images */
.top-cloud {
  position: absolute;
  bottom: 65%;
  right: 5%;
}

.my-image {
  margin-top: 25px;
  height: 15%;
  width: 15%;
  border-radius: 100%;
}

.bottom-cloud {
  position: absolute;
  left: 6%;
}

.land {
  position: relative;
  bottom: -37px;
}

.skills-image {
  height: 25%;
  width: 15%;
  margin-top: 30px;
  margin-left: 0%;
  margin-right: 50px;
  float: left;
}

.skills-image-2 {
  height: 25%;
  width: 15%;
  border-radius: 100%;
  margin-top: 40px;
  margin-right: 0%;
  margin-left: 50px;
  float: right;
}

.skill-image-3{
  height: 12%;
  width: 15%;
  border-radius: 10%;
}
.contact-image{
  height: 7%;
  width: 7%;
  float: left;
  margin-left: 500px;
}

.contact-image-2{
  height: 7%;
  width: 7%;
  float: right;
  margin-right: 500px;
}

.tree-image{
  height: 25%;
  width: 25%;
  float: left;
  margin-left: 200px;
}

.tree-image-2{
  height: 25%;
  width: 25%;
  float: right;
  margin-right: 200px;
}

/*social symbols */
.social {
  margin: 20px 20px 5px 20px;
  height: 50px;
  width: 50px;
}

.social:hover {
  opacity: .4;
  transform: scale(1.3);
  transition: 1s;
}

.l1 {
  margin-right: 80px;
}

.l3 {
  margin-left: 80px;
}



/* buttons */
.button {
  background: #15d798;
  background: linear-gradient(#15d798, #073763);
  border-radius: 11px;
  padding: 15px 20px;
  color: #ffffff;
  display: inline-block;
  font: normal bold 22px/1 "Open Sans", sans-serif;
  text-align: center;
  text-shadow: 1px 1px #000000;
}

.button:hover {
  transform: scale(1);
  background: #a8e6cf;
}



/* mobile */
@media (max-width:1024px) {
  .top-links {
    margin: 10px 8px 0px 8px;
  }

  .top-cloud {
    margin-bottom: 70px;
  }

  .social {
    margin: 60px 40px 60px 40px;
    height: 60px;
    width: 60px;
  }

}

@media (max-width:1521px) {
  .contact-image{
    height: 0px;
    width: 0px;
  }
  .contact-image-2{
    height: 0px;
    width: 0px;
  }
  .tree-image{
    height: 0px;
    width: 0px;
  }
  .tree-image-2{
    height: 0px;
    width: 0px;
  }
  .top-cloud{
    height: 0px;
    width: 0px;
  }



  .bottom-cloud{
    height: 0px;
    width: 0px;
  }
  .contact-heading{
    visibility: hidden;
  }
  #bottom-container{
    background-color: white;
  }
}



/* rainbow */
.wrapper {
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  -webkit-animation: rainbow 18s ease infinite;
  -z-animation: rainbow 18s ease infinite;
  -o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;
}

@-webkit-keyframes rainbow {
  0% {
    background-position: 0% 82%
  }

  50% {
    background-position: 100% 19%
  }

  100% {
    background-position: 0% 82%
  }
}

@-moz-keyframes rainbow {
  0% {
    background-position: 0% 82%
  }

  50% {
    background-position: 100% 19%
  }

  100% {
    background-position: 0% 82%
  }
}

@-o-keyframes rainbow {
  0% {
    background-position: 0% 82%
  }

  50% {
    background-position: 100% 19%
  }

  100% {
    background-position: 0% 82%
  }
}

@keyframes rainbow {
  0% {
    background-position: 0% 82%
  }

  50% {
    background-position: 100% 19%
  }

  100% {
    background-position: 0% 82%
  }
}


.top-bar{
  text-align: center;
}

#navbar {
  background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: -50px; /* Hide the navbar 50 px outside of the top view */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

/* Style the navbar links */
#navbar {
  float:left;
  display: block;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

#navbar {
  background-color: #fdd998;
  color: black;
}


.skills-bar{
  background-color: #333;
  padding: 3% 0 5% 0;
  list-style: none;
  font-family: sans-serif;


}

.skill-bar-list{
  text-align: left;
  padding: 0% 20% 0% 20%;
}

.skills-bar li{
  margin:20px 0;
}

.bar{
  background: #353b48;
  display: block;
  height: 8px;
  border:1px solid rgba(0,0,0,0.3);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 10px #2187e7b3;

}

.bar span{
  height: 5.7px;
  float:left;
  background: #2187e7;
}

.bar span:hover{
  background: #f0a500;
}



.myhtml{
  width:90%;
  animation: myhtml 2s;
}

@keyframes myhtml {
  0%{
    width: 0%;
  }
  100%{
    width: 90%;
  }
}

.Database{
  width:70%;
  animation: Database 2s;
}



@keyframes Database  {
  0%{
    width: 0%;
  }
  100%{
    width: 70%;
  }
}
.Javascript{
  width:60%;
  animation: Javascript 2s;
}

@keyframes Javascript {
  0%{
    width: 0%;
  }
  100%{
    width: 50%;
  }
}


.React{
  width:70%;
  animation: React 2s;
}

@keyframes React {
  0%{
    width: 0%;
  }
  100%{
    width: 60%;
  }
}