@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}


a {
  text-decoration: none;
}


/*Background */
  html, body {
  width: 100%;
  height:100%;
}

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Body */




#logo {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 3.5%;


}
/* nav */

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #23a6d5;

    font-family: 'Source Code Pro', monospace;
  

}

.nav-list {
  display: flex;
  margin-right: 3rem;
  color: #351c1b;
}

@media (max-width: 28.75em) {
  .nav {
    justify-content: center;
  }

  .nav-list {
    margin: 1rem;
  }
}


.nav-list a {
  display: absolute;
  font-size: 1.7rem;
color:rgb(255, 255, 255);
  padding: 1rem;
}

.nav-list a:hover {
  background:#079272;
;
  border-radius: 30%;
  width: auto;
  height: 1rem;
}
ul {
  list-style: none;
}



.welcome-section {
  display: flex;
  font-family:Poppins;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  color:white;
  font-size:1.5em;
}
.welcome-section > p {
  font-size: 27px;
  font-family:Source Code Pro;
  font-weight: 200;
  color: purple;
}



/*---------------------------------------------------------------------------------*/


.about-section {
  text-align: center;

}


h2{
   font-size: 2rem;
  font-family:'Source Code Pro'
}


.about-section-1{
  color: rgb(221, 187, 187);
}
.about-section-2{
  color: rgb(230, 169, 206);
}

.about-section-3{
  color: rgb(214, 195, 190);
}





/* Contact section */

.contact-section {
  text-align: center;
padding-top: 20em;

}


h2{
   font-size: 2rem;
  font-family:'Source Code Pro';

}
#contact-title{
  color: antiquewhite;
}
a{
  padding: 20px;
  color: purple;
}
#icon{
  display: flex;
}

#profile-links
{
  padding: 20px;
}
a:hover{
  color:azure;
}
/* Footer */

footer {
  font-weight: 500;
  display: flex;
  justify-content: space-evenly;
  padding: 2rem;
  color:#351c1b;
  font-size: 30px;
  font-family: Product Sans;
}

footer > p {
  margin: 2rem;
}

footer i {
  vertical-align: middle;
}

@media (max-width: 28.75em) {
  footer {
    flex-direction: column;
    text-align: center;
  }
}