@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
  }

body, html {
  height: 100%;
  width: 100%;
  background-color: #1f2833;
}

/* scrollbar styling  */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* styling for the contact links (linkedin, github, email, resume) */
.contact {
  position: fixed;
  top: 50%;
  transform: translate(-70%, -50%);
  z-index: 1;
}

/* second contact bar mobile view*/
.contact2 {
  display: none;
}

.contact-links {
  list-style-type: none;
}

.contact-links a {
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  font-family: 'Poppins';
}

.contact-items {
  transition: transform .5s ease;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* animation for the contact links at initial load */
.peek {
  animation: peek 1s ease;
}

@keyframes peek {
    from{
      transform:translateX(-50%)
    }
    80%{
      transform:translateX(5%)
    }
    to{
      transform:translateX(0%)
    }
}

.icons {
  font-size: 30px;
  cursor: pointer;
  float: right;
}

.contact-items:hover {
  transform: translateX(70%);
}

.linkedin, .github, .email, .resume {
  width: 180px;
  padding: 15px;
}

.linkedin {
  background-color: #0077B5;
}

.github {
  background-color: #333333;
}

.email {
  background-color: #4055cc;
}

.resume {
  background-color: #8f2640;
}

.resume i {
  margin-right: 5px;
}

/* navbar styling */
.navbar {
  background: transparent;
  width: 100%;
  min-height: 10vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  z-index: 1;
  position: fixed;
  transition: all .5s ease-in-out;
}

/* navbar on scroll */
.shownavbar {
  transform: translateY(-100px);
}

.navbartransparent {
  background: transparent;
}

.navbarbg {
  background: #1e2731;
}

/* hides the icons until mobile view size */
.barmenu, .exitmenu {
  display: none;
}

/* push elements on the page down 60px */
.placeholder {
  height: 60px;
}

.navbar2 {
  display: none;
}

.navbar-logo {
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 50px;
}

.navbar-logo:hover {
  transform: scale(1.1);
}

.navbar-logo2 {
  display: none;
}

.navbar-logo a, .navbar-logo2 a {
  text-decoration: none;
  color: #66fcf1;
}

.navbarmenu {
  display: none;
}

.navbarlinks {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 50px;
}

.navbar li {
  padding: 19.2px;
  font-size: 14px;
}

.navbar li:hover {
  transform: scale(1.1);
}

.nav-item {
  color: #66fcf1;
  font-family: 'Poppins';
  text-decoration: none;
}

/* welcome section */
#welcome-section, #about-section, #contact-section, #projects-section{
  background-color: #1f2833;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins';
  color: #fff;
}

#welcome-section {
  min-height: 100vh;
}

/* wraps the h1, p, and button elements into a 700px container */
.wrap {
  margin-top: -100px;
  text-align: center;
}

.welcome-wrap {
  width: 700px;
  text-align: center;
}

.color-name {
  color: #66fcf1;
}

/* animation for the waving emoji */
.wave {
  animation-name: wave-animation;
  animation-duration: 4s;
  animation-delay: 1.5s; 
  animation-iteration-count: initial;  
  transform-origin: 70% 70%;       
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
    10% { transform: rotate(14.0deg) } 
    20% { transform: rotate(-8.0deg) }
    30% { transform: rotate(14.0deg) }
    40% { transform: rotate(-4.0deg) }
    50% { transform: rotate(10.0deg) }
    60% { transform: rotate( 0.0deg) }  
  100% { transform: rotate( 0.0deg) }
}

.welcome-title {
  font-size: 60px;
  color: #fff;
}

.welcome-title, .welcome-p {
  transition: all .5s ease;
}

/* animation for h1, p, and button elements popping out on window load */
.popout {
  animation: popout 1s ease;
}

@keyframes popout {
    from{
      transform:scale(0);
      opacity: 0;
    }
    80%{
      transform:scale(1.05);
    }
    to{
      transform:scale(1);
      opacity: 1;
    }
}

/* fade in transition for elements */
.fade-in {
  animation: appear 1.5s ease;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.welcome-p {
  font-size: 18px;
  margin-top: 5px;
  color: #d7ecff;
}

.welcome-down {
  margin-left: 25px;
  transform: rotate(-90deg);
  transition: transform 1s ease;
}

.submit-btn, .projects-btn, .live-btn, .code-btn {
  margin-top: 20px;
  padding: 10px 30px;
  border: 1px solid #45A29E;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 1s linear;
}

.submit-btn {
  align-self: flex-start;
}

.live-btn, .code-btn {
  width: 150px;
  margin-right: 10px;
  font-size: 16px;
}

.projects-btn:hover, .submit-btn:hover, .live-btn:hover, .code-btn:hover {
  background-color: #45A29E;
}

.button-container:hover .welcome-down {
  transform: rotate(0deg);
}

  /* projects section*/
#projects-section {
  background-color: #25303d;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins';
  color: #fff;
  padding-top: 80px;
}

.projects-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

.project-item {
  display: flex;
  outline: none;
  position: relative;
  transition: filter .5s ease;
  margin-bottom: 150px;
  padding-left: 80px;
}

.project-info  {
  padding: 0px 45px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-info h2 {
  font-size: 28px;
  margin-bottom: -15px;
}

.project-info p {
  font-size: 16px;
  margin-top: 20px;
}

.image-container {
  max-width: 600px;
  transition: all .2s;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  transition: transform .5s ease-in-out;
  backface-visibility: hidden;
}

.project-image:hover {
  transform: scale(0.9);
  cursor: pointer;
}

/* about section  */
#about-section {
  height: 100%;
  padding: 80px 0px;
}

.about-fade {
  /* opacity: 0; */
  transition: opacity 2s ease-in-out;
}

.about-p {
  font-size: 18px;
  color: #d7ecff;
  margin-top: 30px;
  text-align: left;
  line-height: 1.5;
}

.about-p, .contact-p {
  transition: all .2s;
}

.about-wrap {
  width: 800px;
}

.about-h2, .contact-h2, .projects-title{
  font-size: 50px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  transition: all .2s;
}

.about-h2:after, .projects-title:after, .contact-h2:after {
  content: '';
  width: 90%;
  position: absolute;
  right: -30px;
  bottom: -3px;
  border-width: 0 0 10px;
  border-style: solid;
  color: #66fcf1;
}

.contact-show {
  transform: translateX(0%);
}

.skills {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
}

.skills-item {
  display: flex;
  flex-direction: column;
  padding: 50px;
  transition: all .5s ease;
}

.skills-item span {
  font-size: 15px;
  margin-top: 10px;
}

.skills-item:hover {
  transform: scale(1.2);
}

.skill-icon {
  font-size: 50px;
}

.about-wrap {
  align-items: center;
}

/* contacts section */
#contact-section {
  height: 100%;
  padding: 80px 0px;
  background-color: #25303d;
  position: relative;
}

.contact-header {
  margin-top: -55px;
  margin-bottom: 10px;
}

.contact-header h2, .contact-header p {
  margin-top: 20px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-p {
  font-size: 18px;
  color: #d7ecff;
  margin-bottom: 30px;
  width: 500px;
  text-align: center;
  margin-top: 20px;
}

.contact-name, .contact-email, .contact-message{
  width: 600px;
  height: 50px;
  margin-top: 15px;
  border-radius: 5px;
  border: none;
  font-family: 'Poppins';
  padding: 10px;
  resize: none;
  background-color: #24282c;
  color: #fff;
  font-size: 16px;
  transition: all .2s;
}

::placeholder {
  color: rgb(192, 192, 192);
  font-size: 13px;
}

.contact-message {
  height: 200px;
}

.contact-icons {
  width: 500px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

/* footer */
footer {
  background-color: #1e2731;
  min-height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins';
  position: relative;
  width: 100%;
}

.go-home {
  color: #1f2833;
  position: absolute;
  width: 45px;
  top: -25px;
  margin: 0 auto;
  left: 0;
  right: 0;
  font-size: 30px;
  border: none;
  padding: 0px 10px;
  background-color: #66fcf1;
  cursor: pointer;
  text-align: center;
}

.go-home:hover {
  animation: MoveUpDown 2s linear infinite;
}

@keyframes MoveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

footer ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

footer ul li {
  color: #fff;
  font-size: 14px;
  padding: 30px;
}

/* media queries */

@media screen and (max-width: 1245px) {
  .welcome-title, .about-h2, .contact-h2, .projects-title {
    font-size: 42px;
  }

  .welcome-p, .contact-p, .about-p {
    font-size: 18px;
  }

  .welcome-wrap {
    width: 550px;
  }

  .projects-btn {
    font-size: 16px;
  }

  .contact-name, .contact-email, .contact-message{
    width: 600px;
  }

  .about-wrap {
  width: 600px;
  }

  .skills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-p {
    text-align: center;
    font-size: 16px;
  }

  .contact-items2 {
    margin: 0px 5px;
    transition: transform .5s ease;
  }

  .contact-items2:hover {
    transform: scale(1.1);
  }
  
  .contact-links2 {
    list-style-type: none;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .contact-links2 a {
    text-decoration: none;
    color: #fff;
  }

  .contact-links2 {
    display: flex;
  }

  .icons2 {
    font-size: 25px;
    width: 100%;
    cursor: pointer;
    padding: 10px;
  }

  .linkedin2, .github2, .email2, .resume2 {
    width: 45px;
    text-align: center; 
  }

  .linkedin2 {
    background-color: #0077B5;
  }

  .github2 {
    background-color: #333333;
  }

  .email2 {
    background-color: #4055cc;
  }

  .resume2 {
    background-color: #8f2640;
  }
}

@media screen and (max-width: 1000px) {
  .project-info {
    width: fit-content;
  }
  
  .project-info h2 {
    font-size: 24px;
  }

  .project-info p {
    font-size: 16px;
  }
}

@media screen and (max-width: 875px) {

  .project-info h2 {
    font-size: 20px;
  }

  .project-info p {
    font-size: 14px;
  }
}

@media screen and (max-width: 625px) {
  .navbarmenu {
    background-color: #1e2731;
    width: 100%;
    min-height: 10vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 1;
    transition: all .5s ease-in-out;
  }
    
   .welcome-p, .contact-p, .about-p {
    font-size: 16px;
  }
    
   .welcome-title, .about-h2, .contact-h2, .projects-title {
    font-size: 38px;
  }

  .welcome-wrap {
    width: 450px;
  }

  .contact-name, .contact-email, .contact-message{
    width: 450px;
  }

  .about-wrap {
  width: 450px;
  }

  .navbar-logo2 {
    display: block;
    position: fixed;
    top: 20px;
    left: 30px;
    font-size: 30px;
    z-index: 999;
  }

  .placeholder {
    display: none;
  }

  .navbar {
    display: none;
  }

  .navbar2 {
    display: block;
  }

  .navbar2 {
    margin: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(120%);
    width: 70%;
    height: 100%;
    transition: transform .5s ease;
    background-color: #25303d;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: -2px 0px 10px 0.5px #45A29E;
  }

  .navblur {
    transition: all .5s ease-in-out;
  }

  .navbluradd {
    filter: brightness(50%);
    filter: blur(4px);
  }

  .noscroll {
    overflow: hidden;
  }

  .barmenu, .exitmenu{
    color: #f7f7f7;
    font-size: 30px;
    position: fixed;
    top: 25px;
    right: 30px;
    cursor: pointer;
    z-index: 999;
    display: block;
  }

  .showsidebar {
    transform: translateY(0%);
  }

  .barmenu {
    transition: all .1s ease;
  }

  .exitmenu {
    z-index: -1;
    opacity: 0;
    transition: all .1s ease;
  }

  .hidemenu {
    opacity: 0;
    z-index: -1;
  }

  .showmenu {
    opacity: 1;
    z-index: 1;
  }

  .navbarlinks {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }

  .navbarlinks li {
    padding: 20px;
  }

  .contact {
    display: none;
  }

  .contact2 {
    display: block;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .project-item {
    flex-direction: column;
    padding: 0px 20px;
  }

  .order1 {
    order: 2;
  }

  .order2 {
    order: 1;
  }

  .project-info {
    margin-top: 20px;
    padding: 0;
    text-align: center;
  }
}

@media screen and (max-width: 450px) {
.welcome-title, .about-h2, .contact-h2, .projects-title {
  font-size: 27px;
  text-align: center;
}

.welcome-p {
  font-size: 14px;
}

.welcome-wrap {
  width: 350px;
}

.projects-btn{
  font-size: 15px;
  margin-top: 30px;
}

.submit-btn {
  font-size: 15px;
}

.projects-container {
  width: 350px;
  margin-top: 30px;
}

.about-wrap {
  width: 300px;
}

.skills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.about-h2, .contact-h2, .projects-title {
  font-size: 27px;
}

.about-p {
  font-size: 14px;
}

.contact {
  font-size: 10px;
}

.contact-name, .contact-email, .contact-message{
  width: 330px;
}

.contact-p {
  width: 330px;
  text-align: center;
}

.contact-links2 {
  margin-top: -10px;
}

.icons {
    font-size: 20px;
  }
}