body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto Flex', sans-serif;
  color: white;
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(13,26,71,1) 77%);
}

/* NAV SECTION BEGINS */
.navbar-area {
  background: transparent;
}
.site-navbar {
  height: 30px;
  padding: 20px 100px 5px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
a.site-logo {
  font-size: 1.8rem;
  font-weight: 600;
  margin-left: 10px;
  padding-bottom: 20px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.site-navbar ul {
  height: 40px;
  width: 40%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.site-navbar ul li a {
  font-size: 18px;
  height: 10px;
  color: #fff;
  margin-top: -20px;
  padding: 2px;
  display: block;
  text-decoration: none;
  text-transform: capitalize;
} 
.site-navbar ul li a:hover {
  background: rgba(255,255,255,.1);
}  

.nav-btn{
  border: 2px dashed tomato;
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
}

.nav-toggler {
  border: none;
  margin-right: 8px;
  width: 45px;
  padding: 5px;
  background-color: transparent;
  cursor: pointer;
  height: 39px;
  display: none;
}

.nav-toggler span, 
.nav-toggler span:before, 
.nav-toggler span:after {
  width: 28px;
  height: 3px;
  background-color: #fff;
  display: block;
  transition: .3s;
}
.nav-toggler span:before {
  content: '';
  transform: translateY(-9px);
}
.nav-toggler span:after {
  content: '';
  transform: translateY(6px);
}
.nav-toggler.toggler-open span {
  background-color: transparent;
}
.nav-toggler.toggler-open span:before {
  transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
  transform: translateY(-3px) rotate(-45deg);
}

  .site-navbar ul li {
    width: 100%;
    text-align: center;
  }
  .site-navbar ul li a {
    padding: 25px;
  }
  .site-navbar ul li a:hover {
    background-color: rgba(255,255,255,.1);
  }
  .site-navbar ul.open {
    max-height: 100vh;
    overflow: visible;
  }

@media screen and (max-width: 1024px) {
  .site-navbar {

    height: 20px;
    padding: 15px 70px 5px 5px;
  }
  
  .site-navbar ul {
    font-size: 12px;
    height: 30px;
    width: 50%;
    margin: 0;
    padding: 0;
  }
  .site-navbar ul li a {
    height: 10px;
    margin-top: 0;
    padding: 2px 20px 10px 0;
    font-size: 15px;
  } 
  .site-navbar ul li a:hover {
    background: rgba(255,255,255,.1);
  }  
}   

 /* MOBILE LANDSCAPE */
 @media (max-width: 750px) and (max-height: 500px) and (orientation: landscape) { 

  .navbar-area{
    height: 40px;
  }
  
  a.site-logo{
    font-size: 20px;
    margin-left: 10px;
    margin-top: -30px;
    }
    .container {
      max-width: 600px;
    }
    .nav-toggler{
      display: block;
      margin-top: -50px;
      margin-right: -70px ;
    }
    .site-navbar { 
      min-height: 60px;
    } 

    .site-navbar ul {
      position: absolute;
      width: 100%;
      margin-top: 40px;
      height: 100vh;
      left: 0;
      top: 0;
      flex-direction: column;
      align-items: center;
      border-top: 1px solid #444;
      background-color: rgba(0,0,0,.75);
      max-height: 0;
      overflow: hidden;
      transition: .3s;
    }   

.site-navbar ul li a {
  font-size: 20px;
  margin-top: 20px;
}

.nav-btn{
  width: 20%;
  height: 10%;
  margin-top: 10px;
  font-size: 15px;
  text-transform: capitalize;
}

  }   

@media screen and (max-width: 480px) {
 
  .navbar-area{
    height: 40px;
  }
  
  a.site-logo{
    font-size: 15px;
    margin-left: 10px;
    margin-top: -30px;
    }
    .container {
      max-width: 480px;
    }
    .nav-toggler{
      display: block;
      margin-top: -50px;
      margin-right: -60px ;
    }
    .site-navbar {
      min-height: 60px;
    }

    .site-navbar ul {
      position: absolute;
      width: 100%;
      margin-top: 40px;
      height: 100vh;
      left: 0;
      top: 0;
      flex-direction: column;
      align-items: center;
      border-top: 1px solid #444;
      background-color: rgba(0,0,0,.75);
      max-height: 0;
      overflow: hidden;
      transition: .3s;
    }   

    .site-navbar ul li a {
      font-size: 20px;
      margin-top: 25px;
    }
    .nav-btn{
      width: 40%;
      height: 5%;
      margin-top: 5px;
      font-size: 15px;
      text-transform: capitalize;
    }
}
/* NAV SECTION ENDS */

/* HERO SECTION STARTS */
.hero{
  height: 80vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  }

  .meet-me{
    margin: 10px 10px;
    height: 90%;
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center ;
  }

.text-area{
    width: 60%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

 .hero-image-container{
  height: 70%;
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center ;
 }

 .hero-image{
   width: 90%;
   height: 80%;
 }
 

.hero-text-1{
  height: 10%;
  margin: 0;
    font-size:large;
}

.hero-text-2{
    font-size: 4vw;
  /* height: 15%; */
    font-family: 'Rowdies', cursive;
    margin: 0;
    text-align: start;
}

.hero-text-3{
  /* height: 12%;   */
  font-size: 2vw;
    font-family: 'Rowdies', cursive;
    margin: 0;
    letter-spacing: 8px;
}

.intro{
  margin-top: 5px;
}

.hero-paragraph{
  width: 90%;
  height: 100%;
  margin: 0;
  opacity: 70%;
  font-size: 20px;
}

.social-buttons{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  height: 15%;
  width: 30%;
}

.icons{
  margin-top: 5px;
  width: 40px;
  height: 40px;
  color: #fafafa;
}

button {
  margin-top: 17px;
  background:tomato;
  border-radius: 5px;
  border-color: black;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  width: 30%;
  height: 15%;
  padding: 5px;
  text-decoration: none;
  text-transform: capitalize;
}

button:hover {
  border: 2px solid #fff;
  border-radius: 5px;
  background: transparent;
  text-decoration: none;
}

hr{
  width: 80%;
}

 /* SMALL SCREENS, LAPTOPS */
 @media only screen and (max-width: 1024px) {
    
  .meet-me{
    margin-top: 50px;
    margin: 10px 10px;
    height: 70%;
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center ;
  }

.text-area{
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

 .hero-image-container{
   display: none;
 
 }

.hero-text-2{
    font-size: 6vw;
}

.hero-text-3{
  margin-top: 10px;
    font-size: 2.5vw;
    letter-spacing: 6px;
}


.intro{
  margin-top: 5px;
}

.social-buttons{
  margin-top: 10px;
  height: 15%;
  justify-content: center;
  width: 40%;
}

.icons{
  width: 40px;
  height: 40px;
  padding-left: 10px;

}

button{
  width: 40%;
}

} 

 /* iPADS, TABLETS */
 @media only screen and (max-width: 768px) {
   
  .hero{
    height: 80vh;
  }

  .meet-me{
    margin-top: 50px;
    margin: 10px 10px;
    height: 80%;
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center ;
  }

.text-area{
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

 .hero-image-container{
   display: none;
 
 }

.hero-text-2{
    font-size: 6vw;
}

.hero-text-3{
  margin-top: -5px;
    font-size: 3vw;
    letter-spacing: 3px;
}


.intro{
  margin-top: 5px;
}

.hero-paragraph{
  width: 100%;
}

.social-buttons{
  margin-top: 10px;
  height: 15%;
  justify-content: center;
  width: 40%;
}

.icons{
  width: 35px;
  height: 35px;
  padding-left: 5px;

}

button{
  width: 40%;
  margin-top: -10px;
  height: 12%;
}
} 

 /* MOBILE LANDSCAPE */
 @media (max-width: 750px) and (max-height: 500px) and (orientation: landscape) { 
  
  .hero{
    height: 110vh;
  }

  .meet-me{
    margin: 25px 5px 5px 0;
    height: 80%;
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center ;
  }

.text-area{
    width: 95%;
    height: 90%;
}

 .hero-image-container{
   display: none;
 
 }

.hero-text-2{
    font-size:2.5rem;
  margin-top: -5px;
}

.hero-text-3{
    font-size: 1.4rem;
    letter-spacing: 5px;
}

.intro{
  margin-top:10px;
  font-size: 15px;
  width: 80%;
  height: 30%;

}

.hero-paragraph{
  opacity: 30%;
  /* margin-top: -12px; */
  width: 100%;
  font-size: 14px;
}

.social-buttons{
  margin-top: 10px;
  width: 30%;
}

.icons{
  margin-top: 5px;
  width: 30px;
  height: 30px;
}

button {
  margin-top: 10px;
  font-size: 17px;
  width: 30%;
  height: 20%;
  padding: 2px 5px 2px 5px;
}
} 

/* MOBILE PHONE POTRAIT */
@media only screen and (max-width: 480px) {

  .hero{
    height: 80vh;
    margin-top: 40px;

  }

  .meet-me{
    height: 80%; 
    width: 95%;
  }

.text-area{
  flex-direction: column;
    width: 95%;
    height: 80%;
    justify-content: center;
    align-items: center;
}

 .hero-image-container{
   display: none;

 }

 .hero-text-1{
  margin-top: -50px;
  height: 10%;

 }

.hero-text-2{
    font-size: 8vw;
  margin-top: -5px;
}

.hero-text-3{
  height: 12%;
    font-size: 5vw;
  letter-spacing: 2px;
  margin-top: 5px;
}

.intro{
}

.hero-paragraph{
  width: 100%;
  font-size: 17px;
  height: 30%;
  text-align: center;
  opacity: 30%;
}

.social-buttons{
  margin-top: 10px;
  width: 30%;
}

.icons{
  padding-left: 10px;
  margin-top: 5px;
  width: 35px;
  height: 35px;
}

button {
  margin-top: 15px;
  font-size: 18px;
  width: 60%;
  height: 15%;
  padding: 2px 5px 2px 5px;
}
}
/* HERO SECTION ENDS */



/* ABOUT ME SECTION BEGINS */
.about-me{
  height: 80vh;
  display: flex;
  flex-direction: row; 
  justify-content: center;
  align-items: center; 
}

.about-me-content{
  width: 80%;
  height: 90%;
  padding: 0 20px;
  display: flex;
  flex: row;
  justify-content: center;
  align-items: center;
}

.dashed-heading{
}

.separator{
  display: flex;
  align-items: center;
}

.separator h2{
  padding: 0 0.5rem; 
}

.separator .line{
  flex: 1;
  height: 1px;
  background-color: #ffffff;
  opacity: 30%;
}

.about-me-text{
  width: 40%;
  height: 99%; 
  margin-top: 0; 
  line-height: 25px;
}

.about-me-image{
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

}

.about-me-image-container{
  width: 300px;
  height: 300px;
  margin-left: 0;
  box-shadow: 8px 8px 2px teal;
}

.about-image{
  width: 300px;
  height: 300px;
}

.proficiency {
  width: 80%;
}

.proficiency-ul {
  width: 100%;
  padding-left: 5px;
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  height: 15%;
}

 .proficiency-li {
  padding-left: 15px;
  background-image: url('Capture.PNG');
  background-position: 5px 5px;
  background-repeat: no-repeat;
  width: 100%;
  display: inline;
} 


/* SMALL SCREENS, LAPTOPS */
@media only screen and (max-width: 1024px) {

  .about-me{
    height: 80vh;
  }
  
  .about-me-content{
    width: 85%;
    height: 98%;
  }
  
  .separator h2{
    padding: 0 0.5rem; 
  }
  
  .separator .line{
    flex: 1;
    height: 1px;
    background-color: #ffffff;
  }
  
  .about-me-text{
    width: 50%;
    height: 98%; 
    padding: 0 10px;
    margin-top: -10px; 
  }
  
  .about-me-image{
  
  }
  
  .about-me-image-container{
    width: 250px;
    height: 250px;
  }
  
  .about-image{
    width: 250px;
    height: 250px;
  }
  
   .proficiency-li {
    background-position: 0 5px;
  } 
  } 

  
 /* iPADS, TABLETS */
 @media only screen and (max-width: 768px) {
   
  .about-me{
    height: 90vh;
    margin-top: 40px; 
  
  }
  
  .about-me-content{
    flex-direction: column;
    margin-top: -50px; 
    padding: 0 15px;
    width: 95%;
    height: 90%;
  }
  
  .about-me-text{
    width: 95%;
    height: 50%; 
    margin-top: 15px; 
    padding: 0 10px;
    line-height: 20px;
  }
  
  .about-me-image{
    width: 90%;
    height: 50%; 
  }
  
  .about-me-image-container{
    width: 300px;
    height: 300px;
    margin-left: 20px;
    box-shadow: 8px 8px 2px teal;
  }
  
  .about-image{
    width: 300px;
    height: 300px;
  }
  
  .about-image{
    width: 100%;
    height: 100%;
  }
  
  .proficiency{
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .proficiency-ul {
    width: 60%;
    height: 80%;
    margin-top: 5px;
    padding: 10px 20px;
  }
  
  .proficiency-li{
  }
  
   }
   /* MOBILE LANDSCAPE */
   @media (max-width: 750px) and (max-height: 500px) and (orientation: landscape) {
     
    .about-me{
      height: 180vh;
    }
    
    .about-me-content{
      flex-direction: column;
      margin-top: -10px; 
      width: 95%;
      height: 95%;
    }
    
    .about-me-text{
      width: 90%;
      height: 60%; 
      margin-top: 5px; 
      line-height: 20px;
    }
  
    .about-me-image{
      height: 40%;
  
    }
    
    .about-me-image-container{
      width: 200px;
      height: 200px;
      margin-left: 20px;
      box-shadow: 8px 8px 2px teal;
    }
    
    .about-image{
      width: 100%;
      height: 100%;
    }
    
    .proficiency-ul {
      width: 60%;
    }
  
    .proficiency-li {
      padding-left: 5px;
      background-position: 0 3px;
      display: inline;
      font-size: 15px;
    } 
  
  } 
  
  /* MOBILE PHONE POTRAIT */
  @media only screen and (max-width: 480px) {
    
  .about-me{
    height: 110vh;
    margin-top: 20px;
  }
  
  .about-me-content{
    flex-direction: column;
    margin-top: -60px; 
    width: 95%;
    height: 95%;
  }
  
  .about-me-text{
    width: 90%;
    height: 60%; 
    margin-top: 0; 
    line-height: 18px;
  }
  
  .about-me-image{
    margin-top: 70px;
    height: 40%;
  
  }
  
  .about-me-image-container{
    width: 200px;
    height: 200px;
    margin-left: 0;
    box-shadow: 8px 8px 2px teal;
  }
  
  .about-image{
    width: 200px;
    height: 200px;
  }
  
  .proficiency-ul {
    width: 98%;
  }
  
  .proficiency-li {
    padding-left: 10px;
    background-position: 0 3px;
    display: inline;
    font-size: 12px;
  } 
  }
  /* ABOUT ME SECTION ENDS */

  
/* PROJECTS SECTION STARTS */
.projects{
  margin-top: 50px;
  height: 180vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}

.projects-container{
  width: 95%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: space-around;
  align-items: center;
}

.project-1, .project-2, .project-3{
  width: 90%;
  height: 33%;
  height: 95%;
  padding: 0 20px 0 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#project-2{
  flex-direction: row-reverse;
  margin-left: 100px;
}

.project-content-1{
  background-color: rgb(34, 34, 112);
  padding: 10px 10px 10px 20px;
  width: 50%;
  height: 50%;
  position: relative;
  left: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: space-between;
}

#project-content-1{
  left: -60px;
}

.project-topic{
  height: 15%;

}

.project-description{
  height: 45%;
}

.project-paragraph{
  margin: 0;
}

.project-tech{
  text-align: center;
  height: 10%;
  word-spacing: 30px;

}

.project-links{
  height: 15%;
  word-spacing: 10px;
}

.github, .external-link{
  width: 25px;
  height: 25px;
}

#project-links-2{
  text-align: end;
}

.project-content-2{
  width: 40%;
  height: 90%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.project-content-2-image{
  width: 90%;
  height: 105%;
}

#project-img-2{
  width: 90%;
  height: 100%;
}

#project-img-3{
  width: 90%;
  height: 100%;
}

/* SMALL SCREENS, LAPTOPS */
@media only screen and (max-width: 1024px) {
    .projects{
      height: 180vh;
      margin-top: 0px;
    }
    
    .projects-container{
    }

    .project-1, .project-2, .project-3{
      width: 95%;
      height: 33%;
      height: 95%;
      padding: 0 20px 0 0;
    }

    .project-content-1{
      padding: 10px 10px 5px 20px;
      width: 60%;
      height: 40%;
      left: 60px;
    }
    
#project-content-1{
  left: -60px;
}

.project-topic{
  height: 12%;

}

.project-description{
  height: 50%;
}

.github, .external-link{
  width: 20px;
  height: 20px;
}

.project-content-2{
  width: 55%;
  height: 85%;
}

#project-img-2{
  width: 90%;
  height: 95%;
}

#project-img-3{
  width: 90%;
  height: 100%;
}

} 

 /* iPADS, TABLETS */
 @media only screen and (max-width: 768px) {

.projects{
  height: 250vh;
  margin-top: 0;

}

.projects-container{
  margin-top: 150px;
  width: 90%;
  height: 85%;
}

.project-1, .project-2, .project-3{
 width: 80%;
 height: 40%;
 padding: 4px;
 flex-direction: column-reverse;
}

#project-2{
 margin-left: 0;
 flex-direction: column-reverse;
}

.project-content-1{
 background-color: rgb(34, 34, 112);
 color: #d8c0b7;
 font-size: 15px;
 opacity: 90%;
 padding: 5px;
 width: 95%;
 height: 50%;
 left: 0;
 bottom: 100px;
}

#project-content-1{
left: 0;
}

.project-topic{
height: 15%;
}

.project-description{
height: 60%;
}

.project-paragraph{
font-size: 15px;
padding: 3px;
margin: 0;
}

.project-tech{
word-spacing: 15px;
height: 10%;
margin: 5px 2px 5px 2px;
}

.github, .external-link{
height: 10%;
width: 20px;
height: 20px;
}

#project-links-2{
text-align: start;
}

.project-content-2{
display: inline;
 overflow: hidden;
 width: 99%;
 height: 120%;
}

.project-content-2-image{
 width: 100%;
 height: 120%;
}

#project-img-2{
overflow: visible; 
width: 100%;
height: 100%;
/* inherits: unset; */
}

#project-img-3{
/* inherits: unset; */
overflow: visible; 
width: 100%;
height: 100%; 
}

       
} 

 /* MOBILE LANDSCAPE */
 @media (max-width: 750px) and (max-height: 500px) and (orientation: landscape) { 
   
  .projects{
    height: 250vh;
  }
  
  .projects-container{
    overflow: hidden;
  }

  .project-1, .project-2, .project-3{
   width: 99%;
   height: 33%;
   padding: 0 20px 0 0;
   flex-direction: row;
 }

 #project-2{
 }

 .project-content-1{
   background-color: rgb(34, 34, 112);
   padding: 5px 5px 5px 10px;
   width: 70%;
   height: 50%;
   position: relative;
   left: 40px;
 }

 .project-content-2{
   width: 35%;
   height: 90%;
 }

 .project-content-2-image{
   width: 110%;
   height: 90%;
 }

#project-img-2{
 width: 110%;
 height: 85%;
}

#project-img-3{
 width: 110%;
 height: 85%;
}     
} 

/* MOBILE PHONE POTRAIT */
@media only screen and (max-width: 480px) { 
  
  .projects{
    height: 220vh;
    margin-top: 20px;

  }

  .projects-container{
    margin-top: 100px;
    width: 99%;
    height: 90%;
  }

  .project-1, .project-2, .project-3{
   width: 95%;
   height: 40%;
   padding: 4px;
   flex-direction: column-reverse;
 }

 #project-2{
   margin-left: 0;
   flex-direction: column-reverse;
 }

 .project-content-1{
   background-color: rgb(34, 34, 112);
   color: #d8c0b7;
   font-size: 15px;
   opacity: 90%;
   padding: 5px;
   width: 95%;
   height: 80%;
   left: 0;
   bottom: 100px;
 }

 #project-content-1{
  left: 0;
}

.project-topic{
  height: 15%;
}

.project-description{
  height: 60%;
}

.project-paragraph{
  font-size: 12px;
  padding: 3px;
  margin: 0;
}

.project-tech{
  word-spacing: 5px;
  height: 10%;
  margin: 5px 2px 5px 2px;
}

.github, .external-link{
  height: 10%;
  width: 20px;
  height: 20px;
}

#project-links-2{
  text-align: start;
}

 .project-content-2{
  display: inline;
   overflow: hidden;
   width: 99%;
   height: 120%;
 }

 .project-content-2-image{
   width: 100%;
   height: 120%;
 }

#project-img-2{
  overflow: visible; 
  width: 100%;
  height: 100%;
  /* inherits: unset; */
}

#project-img-3{
  /* inherits: unset; */
  overflow: visible; 
 width: 100%;
 height: 100%; 
}
}
/* PROJECTS SECTION ENDS */


/* OTHER PROJECTS SECTION STARTS */
.other-projects{
  height: 180vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.other-projects-container{
  padding: 0 10px 0 10px;
  width: 85%;
  height: 90%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  justify-content: space-around;
  align-items: center;
}

.other-projects-content{
  height: 45%;
  width: 28%;
}

.other-projects-content-1{
  background-color: rgb(153, 169, 202);
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.other-projects-image{
  width: 100%;
  height: 100%;
}

.other-projects-content-2{
  background-color: rgb(34, 34, 112);
  height: 60%;
  padding: 0 5px 0 5px;
}

#other-projects-topic{
}

#other-projects-description{
  height: 60%;
}

#other-projects-paragraph{
  height: 100%;
  padding: 5px;
}

#other-projects-tech{
  word-spacing: 10px;
  margin-top: -15px;
}

#other-projects-links{
  height: 10%;
  word-spacing: 20px;
  margin-top: 10px;
}

 
 /* SMALL SCREENS, LAPTOPS */
 @media only screen and (max-width: 1024px) {
    
.other-projects-container{
  padding: 0 5px 0 5px;
  width: 80%;
  height: 90%;
}

.other-projects-content{
  height: 45%;
  width: 40%;
}

.other-projects-content-1{
  background-color: rgb(153, 169, 202);
  height: 40%;
}
.other-projects-content-2{
  background-color: rgb(34, 34, 112);
  height: 60%;
}

#other-projects-topic{
}

#other-projects-description{
  height: 60%;
}

#other-projects-paragraph{
  height: 100%;
  padding: 5px;
}

#other-projects-tech{
  word-spacing: 10px;
  margin-top: 10px;
}

#other-projects-links{
  height: 10%;
  word-spacing: 20px;
  margin-top: 5px;
}
} 

 /* iPADS, TABLETS */
 @media only screen and (max-width: 768px) {
    
  .other-projects{
    height: 300vh;
  }
  
  .other-projects-container{
    padding: 0 5px 0 5px;
    width: 95%;
    height: 90%;
  }

  .other-projects-content{
    height: 25%;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  
.other-projects-content-1{
  background-color: rgb(153, 169, 202);
  height: 40%;
  width: 70%;
}

.other-projects-image{
  width: 100%;
  height: 100%;
}

.other-projects-content-2{
  background-color: rgb(34, 34, 112);
  height: 50%;
  width: 70%;
}

#other-projects-topic{
  height: 15%;
}

#other-projects-description{
  height: 45%;
}

#other-projects-paragraph{
  height: 100%;
  padding: 3px 5px 0 5px;
}

#other-projects-tech{
  word-spacing: 30px;
  margin-top: 10px;
}

#other-projects-links{
  height: 10%;
  word-spacing: 15px;
  margin-top: 10px;
}

} 

 /* MOBILE LANDSCAPE */
 @media (max-width: 750px) and (max-height: 500px) and (orientation: landscape) { 
  
  .other-projects{
    margin-top: -20px;
     height: 500vh;
   }

   .other-projects-container{
     height: 90%;
   }

   .other-projects-content{
    height: 25%;
  }

   .other-projects-content-1{
     height: 40%;
   }

   .other-projects-content-2{
    height: 50%;
  }
} 

/* MOBILE PHONE POTRAIT */
@media only screen and (max-width: 480px) {
      
.other-projects-container{
  padding: 0;
  width: 100%;
  height: 90%;
}

.other-projects-content{
  height: 25%;
  width: 100%;
}

.other-projects-content-1{
  background-color: yellow;
  height: 40%;
  width: 90%;
}
.other-projects-content-2{
  background-color: rgb(34, 34, 112);
  font-size: 15px;
  width: 90%;
  height: 50%;
  justify-content: space-between;
}

#other-projects-topic{
}

#other-projects-description{
  height: 45%;
}

#other-projects-paragraph{
  height: 100%;
  padding: 2px;
}

#other-projects-tech{
  word-spacing: 5px;
  margin-top: 10px;
}

#other-projects-links{
  height: 10%;
  word-spacing: 10px;
  margin-top: 10px;
}

}
/* OTHER PROJECTS SECTION ENDS */

.footer{
  background: transparent;
  height: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.footer-icons{
height: 40px;
width: 40px;
}