styles.css

* {
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
  
}
html,html *{
  box-sizing: border-box !important;
}
html, body {
  overflow-x: hidden;
}
.display-1, p{
  color: #d3d3d3;
  font-weight: 500 !important;
}
.display-3 {
  color: #f3f3f3;
  font-size: 18px !important;
}
.center{
  text-align: center !important;
}
section {
  height: 100vh;
  padding-top: 100px;
}
/* Navigation */
nav {
  padding: 20px;
  font-size: 18px;
  justify-content: center;
  align-items: center;
}
.navbar {
  padding-bottom: 10px;
  /* flex-wrap: nowrap !important; */
}
.navbar-nav{
  display: flex;
  flex-wrap: wrap;
}
.navbar .navbar-toggler{
  border:none;
}
.navbar .navbar-toggler:focus{
  box-shadow: none;
}
.text-yellow{
  color: #ffff00 !important
}
.navbar-brand{
  font-weight: 900;
  font-size: 35px !important;
  font-family: 'Allison', cursive;
}
.link{
  text-decoration: none;
  color: whitesmoke !important;
}
.nav-link{
  color: whitesmoke !important;
  font-weight: 600;
}
.nav-item{
  padding: 0 20px;

  justify-content: center;
}
a:hover, i:hover{
  color: #ffff00 !important;
  cursor: pointer !important;
  
}
.social-logo{
  font-size: 100px;
}
#logo{
  height: 80px;
  width: 80px;
}

/* Welcome */
img{
  max-width: 300px !important;
}
#profile-pic{
  height: 20%;
  width: 20%;
  border-radius: 400px;
  border: 6px solid rgb(245, 245, 245,0.5);
  opacity: 0.95;
}

#welcome {
  background-image: url(./photos/background.jpeg);
  background-size: cover;
}
#welcome i{
  font-size: 75px ;
}
.text{
  font-size: larger;
}

/* Console/About me */
.animated{
  animation: animate 0.9s linear infinite;
}
.console p{
  font-family: 'Source Code Pro', monospace;
  max-width: 85%;
  margin: 2px auto; 
  font-size: x-large;
}
@keyframes animate{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0.7;
  }
  100%{
    opacity: 0;
  }
}
.about-me{
  font-family: 'Source Code Pro', monospace;
  max-width: 1000px;
  margin: 2px auto; 
  font-size: larger;
}
/* Experience */
section + #experience {
  height: 240vh;
}
.job-item{
  height: 35vh;
  width: 50vw;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
}
.job-item p{
  font-size: 18px;
}
.card-body{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.dark-text {
  color: #212529 !important;
}
.light-text{
  color: #d3d3d3;
}
.job-item-small{
  height: 20vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* Form/Contact me */
u{
  font-size: larger;
  padding-right: 10px;
  font-weight: 800;
  color: #ffff00
}

.form-group input{
  padding: 20px;
}
.form-group textarea{
  height: 100%;
}
.form-control{
  margin-bottom: 20px;
}
form{
  margin: 10px;
  padding-bottom: 20px;
}

.result{
  color: #2ECC71;
  font-family: 'Source Code Pro', monospace;
}
.success{
  background-color: rgb(8, 150, 25,0.8);
}
.error{
  background-color: rgba(226, 7, 32,0.8);
}


/* Responsiveness */
@media only screen and (max-width: 1465px) {
  .card-body p{
    font-size: 15px;
  }
}
@media only screen and (max-width: 1165px) {
  .job-item p{
    font-size: 14px;
  }
}
@media only screen and (max-width: 1100px) {
  #profile-pic{
    height: 25%;
    width: 25%;
  }
  .social a{
    margin: 0 1.5rem !important;
  }
  .social-logo{
    font-size: 75px !important;
  }
  .about-me{
    font-size: large;
  }
  #welcome i{
    font-size: 50px !important;
  }
  
}
@media only screen and (max-width: 991px) {
  #about {
    height: 120vh;
  }
  .job-item p{
    font-size: 17px !important;
  }
  textarea{
    height: 175px !important;
  }
  section + #experience {
    height: 300vh;
  }
  .navbar-nav{
    flex-direction: row !important;
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity));
  }
  .p-top{
    padding-top: 50px;
  }
  .about-me{
    font-size: large;
  }
  .social a{
    margin: 0 1.5rem !important;
  }
  .social-logo{
    font-size: 60px !important;
  }
  .console p{
    font-size: large;
  }
  .nav-item{
    font-size: smaller !important;
  }
  #experience{
    height: 150vh;
  }

  .job-item-small{
    height: 15vh !important;
  }
  .job-item{
    height: 30vh;
    width: 100vw;
  }
  
  
}
@media only screen and (max-width: 768px) {
  section + #experience {
    height: 325vh;
  }
}
@media only screen and (max-width: 654px) {
  section + #experience {
    height: 405vh;
  }
  .social-logo{
    font-size: 50px !important;
  }
  .about-me p{
    font-size: 16px;
  }
  #about {
    height: 110vh;
  }
  .job-item{
    height: 40vh;
  }
  #welcome i{
    font-size: 40px !important;
  }
  #message{
    height: 80%;
  }
  .text{
    font-size: smaller;
  }
}

@media only screen and (max-width: 550px) {
  
  .nav-item{
    font-size: small !important;
  }
  .console{
    margin: 10px;
  }
  .social a{
    margin: 0 1rem !important;
  }
  .social-logo{
    font-size: 40px !important;
  }
}
@media only screen and (max-width: 375px) {
  /* section {
    padding-top: 40px;
  } */
  #about{
  height: 160vh;
  }
  #experience {
    height: 420vh;
  }
  .job-item{
    font-size: .8em;
  }
  .navbar-brand{
    font-size: 30px !important;
  }
  .navbar-nav{
    display: flex;
    flex-direction: column !important;
  }
}