@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;500;700&display=swap');
/*-------------- */
/* Global Styles */
/* ------------- */
* {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.test:after {
  content: '\2807';
  font-size: 100px;
  padding: 0 auto;
  }

a {
  color: white;
  text-decoration: none !important;
}

a:hover {
  color: white;
}

.big-container {
  width: 70%;
  margin: 0 auto;
}

.small-container {
  width: 50%;
  margin: 0 auto;
}

section {
  margin: 3rem 0;
  padding: 2rem 0;
}

.subtitle {
  text-align: center;
  font-size: 3rem;
  font-weight: 200;
  margin-bottom: 20px;
  color: #6B5B95
}


hr {
  border-color: steelblue;
  width: 15rem;
}

.bolded {
  font-weight: 500;
}

.yellow {
  color: #FFDC00;
}

.college-color {
  color: #c5050c;
}

/* Loader Style */
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/preloader.gif) center no-repeat #fff;
}


/* ------------------ */
/* Header Page Styles */
/* ------------------ */

header {
  background: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(rgba(0, 0, 0, 0.7)), 
      to(rgba(0, 0, 0, 0.7))
    ), url(../img/mountain.jpeg) no-repeat center center fixed;
  background: -webkit-linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url(../img/mountain.jpeg) no-repeat center center fixed;
  background: -o-linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url(../img/mountain.jpeg) no-repeat center center fixed;
  background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ), url(../img/mountain.jpeg) no-repeat center center fixed;
  background-size: cover;
  color: white;
  height: 100vh;
}

.my-nav {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  list-style: none;
  margin-bottom: 4rem;
  padding-top: 0.5rem;
  width: 100%;
}

.my-nav ul li {
  display: inline;
  padding-right: 1.5rem;
}

.my-nav ul li a {
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  transition: 0.3s linear;
}

.my-nav ul li a:hover {
  border-bottom: 1px solid aquamarine;
  color: aquamarine;
}

.sticky-nav {
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
}

.header-title {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; 
  height: 70%;
  width: 100%;
}

.title {
  font-size: 3rem;
  opacity: 0.8;
  text-align: center;
}

.title h3 {
  font-size: 5rem;
  margin-bottom: 1.3rem;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 1.5rem auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .1em; /* Adjust as needed */
}

#lowerTitle{
  font-weight: 300;
}

.upperAnimation {
  -webkit-animation: 
    typing 2.5s steps(40, end),
    blink-caret .75s step-end infinite,
    remove-caret 0.1s linear 2.8s;
          animation: 
    typing 2.5s steps(40, end),
    blink-caret .75s step-end infinite,
    remove-caret 0.1s linear 2.8s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.title h5 {
  font-size: 3.5rem;
  margin-bottom: 2rem;
  width: 0;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto 1.5rem auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .1em; /* Adjust as needed */
}

.lowerAnimation {
  -webkit-animation: 
    typing 2.5s steps(40, end),
    blink-caret .75s step-end infinite;
          animation: 
    typing 2.5s steps(40, end),
    blink-caret .75s step-end infinite;
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes typing {
  0% { width: 0; border-right: 0.15rem solid orange; }
  100% { width: 100%; border-right: 0.15rem solid orange; }
}

@keyframes typing {
  0% { width: 0; border-right: 0.15rem solid orange; }
  100% { width: 100%; border-right: 0.15rem solid orange; }
}

/* The typewriter cursor effect */
@-webkit-keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

@-webkit-keyframes remove-caret {
  to {
    border-right: none;
  }
}

@keyframes remove-caret {
  to {
    border-right: none;
  }
}

.my-button {
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 40px;
  padding: 22px;
  width: 300px;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  cursor: pointer;
  margin-top: 5rem;
  opacity: 0;
}

.buttonFadein {
  -webkit-animation: 2s fade-in 5s;
          animation: 2s fade-in 5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.my-button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.my-button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.my-button:hover span {
  padding-right: 25px;
}

.my-button:hover span:after {
  opacity: 1;
  right: 0;
}

/* ------------- */
/* Projects Page */
/* ------------- */

.project-section {
  margin-bottom: 0;
}

.project-section .header-title {
  padding-top: 4rem;
}

.project-section h3 a {
  color: #6B5B95
}

.project-section .row {
  margin-bottom: 5rem;
}

.project-subtitle {
  text-align: center;
  margin: 3rem 0 3rem 0;
}

.project-section i {
  color: #6B5B95;
}

.project {
  border-radius: 1rem;
  width: 25rem;
  height: 15rem;
  background-color: red;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: white;
  -webkit-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
  margin-bottom: 1rem;
}

.project p {
  margin: 0;
}

.project-soon {
  border-radius: 1rem;
  width: 25rem;
  height: 15rem;
  background-color: red;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: white;
}

.project:hover {
  -webkit-transform: scale(1.02);
      -ms-transform: scale(1.02);
          transform: scale(1.02);
  opacity: 0.8;
}

.project-text {
  color: #808080;
  margin-top: 1rem;
}

#expensebuddy {
  background: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(rgba(192, 62, 255, 0.45)), 
      to(rgba(192, 62, 255, 0.45))
    ), url(../img/project/expensebuddy.jpg);
}

#riconnect {
  background: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(rgba(0, 205, 102, 0.45)), 
      to(rgba(0, 205, 102, 0.45))
    ), url(../img/project/riconnect.jpg);
}

#sapphire {
  background: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(rgba(10, 10, 156, 0.75)), 
      to(rgba(10, 10, 156, 0.75))
    ), url(../img/project/sapphire.jpeg);
}

#houston {
  background: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(rgba(255,65, 54 , 0.75)), 
      to(rgba(255, 65,54, 0.75))
    ), url(../img/project/houston.jpg);
}

#mafia {
  background: -webkit-gradient(
    linear, 
    left top, left bottom, 
    from(rgba(2, 0, 36 , 0.75)), 
    to(rgba(2, 0, 36, 0.75))
  ), url(../img/project/mafia.jpg);
}

.card {
  -webkit-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out; 
  margin-bottom: 3rem;
}

/* .card:hover {
  outline: 4px solid aquamarine;
  -webkit-transform: scale(1.02);
      -ms-transform: scale(1.02);
          transform: scale(1.02);
} */

.card-block h4 {
  border-bottom: 1px solid #6B5B95;
  color: #6B5B95;
  margin-top: 1rem;
  padding: 0.5rem;
}

.card-block p {
  color: #808080;
  padding: 0.5rem; 
}

/* --------- */
/* Logo Page */
/* --------- */

.logos {
  margin-bottom: 4rem;
}

.logo-section hr {
  margin-bottom: 6rem;
  width: 9rem;
}

.logo-section .subtitle {
  margin-bottom: 1rem;
}

/* ------------ */
/* Misc Section */
/* ------------ */

.misc-section {
  background-color: #f7f7f7;
  margin-bottom: 0;
}

.resource {
  margin: 3em 0;
  text-align: center;
}

.resource i {
  color: #FED766;
}

.resource h3 {
  margin: 0.5em 0 0.8em 0;
}

.resource p {
  color: #93a4aa;
  /* text-align: justify; */
}

.resource a:hover {
  opacity: 0.75;
}

.misc-section a {
  color: #808080;
}

.misc-section ul {
  border: solid 2px #6B5B95;
  border-radius: 5px;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

.misc section ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.misc-section ul li:before {
  font-family: FontAwesome;
  content: "\f138";
  position: absolute;
  left : 1em;
  color: #6B5B95;
}

.misc-section li p a:hover {
  opacity: 0.7;
}

.misc-section ul li p{
  margin-bottom: 0.3rem;
}

.contact-info {
  margin-top: 3rem;
}

.contact-info i {
  color: steelblue;
}

.contact-info span {
  color: #6B5B95;
}

/* ------ */
/* Footer */
/* ------ */

.footer {
  background-color: #252a30;
  margin:0;
  padding: 1rem;
}

.footer p {
  color: white;
  text-align: center;
}