body{
  padding: 40px;
  font-family: "Roboto", sans-serif;
}
.container{
  display: inline-block;
}
.down{
  display: none;
}
.all-projects{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.all-projects div {
  flex: 1 1 20%;
  padding: 20px;
  box-sizing: border-box;
}
.about{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 300px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: medium;
}
.project{
  min-height: 100px;
  max-height: fit-content;
}
.projects{
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: medium;
  padding-top: 40px;
}

.project-container{
  padding-top: 40px;
}

.footer{
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.latest-project{
  display: flex;
  justify-content: space-around;
  padding-top: 40px;
}

/*blog*/
.blog-container{
  padding-bottom: 20px;
}

.all-blogs{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-container div{
  flex: 1 1 20%;
  padding: 5px;
  padding-left: 20px;
  box-sizing: border-box;
}

/*animations*/
@keyframes slidein {
  0% {
    margin-left: 0%;
  }
  100% {
    margin-left: 20%;
  }
}
.appear-text {
  opacity: 0;
  animation: fadeIn 2s forwards;
  animation-delay: 3s;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
}

@keyframes fadeIn {
  to {
      opacity: 1;
  }
}
.typed-out{
  display: inline-block;
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  animation: typing 2s steps(21, end) forwards, blinking .8s infinite;
  font-size: 1.6rem;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 50px;
  font-style: normal;
}
@keyframes typing {
  from{width: 0;}
  to{width: 100%;}
}
@keyframes blinking {
  from { border-color: transparent }
  to { border-color: orange; }
}
@keyframes down{
  from{padding-top: 50vh;}
  to{padding-top: 52vh;}
}
/*font styles*/
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }

  .roboto-large {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 60px;
    font-style: normal;
  }
/*this site is responsive!*/
@media only screen and (max-width: 700px) {
  .landing{
    position: relative;
    height: 100vh;
  }
  .welcome{
    position: relative;
    display: flex;
    align-content: center;
    align-items: center;
    top: 30vh;
    margin-left: 20%;
    display: inline-block;
  }
  .container{
    display: inline-block;
  }
  .down{
    display: flex;
    justify-content: center;
    font-weight: bolder;
    font-size: 40px;
    padding-top: 50vh;
    animation: down 2.5s infinite;
  }
  .about{
    flex-direction: column;
    justify-content: space-around;
    height: 500px;
  }
  .all-projects{
    flex-direction: column;
  }
  .welcome{
    margin-left: 0px;
  }
  .typed-out{
    font-size: 30px;
  }
  .appear-text{
    font-size: 17px;
  }
}