html{
    scroll-behavior: smooth;
  }
  * {
    box-sizing: border-box;
  }
  #menu
  {
    background-color: #ffffff; /* #ffffff79;*/
  }
  .btn-outline {
    background-color: rgba(128, 128, 128, 0.5);  /* Half transparent gray */
    border: 1px solid rgba(128, 128, 128, 0.5);  /* Half transparent gray border */
   color: #fff!important;  /* White text */
    transition: 0.3s;  /* Smooth transition for hover effects */
}

.btn-outline:hover {
    background-color: #fff;  /* White background when hovered */
    border: 1px solid #fff;  /* White border when hovered */
    color: black!important;  /* Black text when hovered */
}

  .starter-template {
    padding: 40px 15px;
    text-align: center;
  }
  ul.navbar-nav { 
    float:right;
    text-align:center;
  }
  ul.navbar-nav li 
  {
    padding: 0 10px;
  }
  @media only screen and (max-width:767px)
  { ul.navbar-nav { float:none; } }
  .container-fluid {
    padding: 0 1em;
  }
  .navbar-nav li a
  {
    color:black!important;
    font-size:1.2em;
    font-family: Century gothic,sans-serif;
    font-weight:600;
    transition: 0.4s ease;
  }
  .navbar-nav li a:hover
  {
    color:#fff!important;
    background-color:black!important;
  }
  .navbar-brand {
    padding:10px 15px!important;
  }
  a.navbar-brand .fa-globe
  {
    font-size: 30px;
    color: black;
    transition:0.5s ease;
  }
  a.navbar-brand .fa-globe:hover
  {
    color: #3935e6;
  }
  .navbar-inverse .navbar-toggle .icon-bar {
      background-color: black!important;
  }
  .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
      background-color: #fff!important;
  }
  
  .container {
    margin: 0 auto;
    max-width: 996px;
  }
  .splash {
    background:url("mortalitycore-images/background2.png") no-repeat fixed center bottom;
      background-size: cover;
      color: #fff;
  }


  .splash .container {
    padding-top: 15vh; /* No JS fallback*/
    padding-bottom: 10vh; /* No JS fallback*/
  }
  
  .profile-image {
    border-radius: 50%;
    display: block;
    max-height:250px;
    max-width: 250px;
    margin: 0 auto 1em;
    width: 100%;
    opacity: 0.9;
  }
  
  .game-image {
    display: block;
    max-height:250px;
    max-width: 250px;
    margin: 0 auto 1em;
    width: 100%;
    opacity: 0.9;
  }
  .splash h1 {
    font-size: 40px;
    margin-bottom: .15em;
    text-align: center;
  }
  
  .splash .lead, .splash .continue {
    display: inline-block;
    text-align: center;
  }
  h1.intro-text
  {
    margin:0;
    color:#fff;
  }
  .splash .lead {
    font-size: 30px;
    margin-bottom: 1em;
    font-family: Rockwell;
  }
  .navbar-inverse
  {
    border:none!important;
  }
  @keyframes blink
    {
              0% { opacity:1; }
              50% { opacity:0; }
              100% { opacity:1; }
    }
          @-webkit-keyframes blink
          {
              0% { opacity:1; }
              50% { opacity:0; }
              100% { opacity:1; }
          }
          @-moz-keyframes blink
          {
              0% { opacity:1; }
              50% { opacity:0; }
              100% { opacity:1; }
          }
          @-ms-keyframes blink
          {
              0% { opacity:1; }
              50% { opacity:0; }
              100% { opacity:1; }
          }
          @-o-keyframes blink
          {
              0% { opacity:1; }
              50% { opacity:0; }
              100% { opacity:1; }
          }
  /* code for animated blinking cursor */
  #typed-cursor
  {
        opacity: 1;
        font-size: 40px;
        color: #fff;
        font-weight: 50;
        -webkit-animation: blink 1s infinite;
        -moz-animation: blink 1s infinite;
        -ms-animation: blink 1s infinite;
        -o-animation: blink 1s infinite;
        animation: blink 1s infinite;
  }
  
  .splash .continue {
    font-size: 3em;
    display:block;
  }
  
  .splash .continue a {
    border: 2px solid #09163d;
    border-radius: 100%;
    color: #09163d;
    display: inline-block;
    text-decoration: none;
    width: 40px;
    height:40px;
    font-size:30px;
  }
  .splash .continue a:hover {
    background-color: rgba(0, 11, 71, 0.25);
  }
  #about,#portfolio,#contact
  {
    padding-top:4em!important;
  }
  section h2 {
      margin: 0;
      font-size: 3em;
  }
  section.success {
      color: #fff;
      background: rgb(16, 37, 61);
    padding: 2%;
  }
  
  section.success a
  {
    color:black;
    transition: 0.4s ease;
  }
  section.success a:hover {
      outline: 0;
      color: #fff;
    border: 2px solid #fff;
  }
  .contact-button
  {
    padding-bottom:2%;
  }
  hr.star-light,hr.star-portfolio {
      margin: 25px auto 30px;
      padding: 0;
      max-width: 250px;
      border: 0;
      border-top: solid 3px;
      text-align: center;
  }
  
  hr.star-light:after,hr.star-portfolio:after {
      content: "\f005";
      display: inline-block;
      position: relative;
      top: -.8em;
      padding: 0 .25em;
      font-family: FontAwesome;
      font-size: 2em;
  }
  
  hr.star-light {
      border-color: #fff;
  }
  hr.star-portfolio {
      border-color: black;
  }
  hr.star-portfolio:after {
      color: black;
      background-color: #eee;
  }
  hr.star-light:after {
      color: #fff;
      background-color: rgb(16, 37, 61);
  }
  p.content-text {
    font-size: 25px;
  }
  
  /* Mobile devices */
  @media (max-width: 767px) {
    p.content-text {
      font-size: 18px; /* or whatever smaller size you want */
    }
  }
  
  /* PORTFOLIO */
  .portfolio-card{
      box-shadow: 0px 2px 5px #888888;
      background: #eee;
      border-radius: 4px;
  
  }
  .portfolio-img-wrapper {
    position: relative;
    overflow: hidden; /* Ensure secondary image does not spill out */
}

.portfolio-img-wrapper .portfolio-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* This ensures the image stretches to fill the container */
    transition: opacity 1s;
}

.portfolio-card .portfolio-img.original {
    opacity: 1;
}

.portfolio-card .portfolio-img.secondary {
    opacity: 0;
}

  .portfolio-card:hover{
      box-shadow: 0px 10px 10px #888888;
    cursor: pointer;
  }
  
  .portfolio-container-holder{
      background: #eee;
      padding-bottom: 20px;
  }
  
  
  .portfolio-card-holder{
      padding: 5px;
      margin-bottom: 5px;
  }
  
  .portfolio-img{
      width: 100%;
      border-radius: 4px 4px 0 0;
  }
  
  .portfolio-img-desc{
      position: relative;
      bottom: 0px;
      left: 0px;
      right: 0px;
      background: #fff;
      color: #000;
      text-align: center;
      padding: 5px;
      height: 100px;
      text-decoration: none;
  }
  
  /* Contact */
  .contact-me-container{
      padding:3%;
  background: rgb(16, 37, 61);
  }
  .fa-user,.fa-at,.fa-phone
  {
    color:black;
  }
  .submit-button{
      margin-top: 10px;
      margin-bottom: 10px;
  }
  /* ========================
  Footer
  ======================== */
  
  footer {
    background-color: #2C3E50;
    color:  #fff;
    font-size: 1.5em;
    text-align: center;
    padding:3%;
  }
  a.tel,a.tel:hover
  {
    text-decoration:none;
    color:#fff;
  }
  a.social-button {
      background: #fff;
      font-size: 20px;
      border-radius: 50%;
      margin: 5px;
  }
  .address-container{
      display: inline-block;
      margin: 0 auto;
  }
  a.link-facebook,a.link-twitter,a.link-codepen,a.link-linkedin,a.link-instagram
  {
    transition:0.4s ease;
  }
  a.link-twitter
  {
    color:#1DA1F2;
  }
  a.link-facebook
  {
   color: #3b5998;
  }
  a.link-linkedin
  {
    color:#007bb6;
  }
  a.link-instagram
  {
    color:#e95950;
  }
  a.link-facebook:hover{
      background-color: #3b5998;
      color: #fff;
  }
  
  a.link-twitter:hover{
      background-color: #1DA1F2;
      color: #fff;
  }
  
  a.link-codepen:hover{
      background-color: black;
      color: #fff;
  }
  
  a.link-linkedin:hover{
      background-color: #007bb6;
      color: #fff;
  }
  a.link-instagram:hover{
      background-color: #e95950;
      color: #fff;
  }
  .btn-default {
      color: #333;
      background-color: #fff;
      border-color: transparent!important;
  }
  .fa-heart {
    color:#f32323;
  }
  h4.author
  {
    letter-spacing:4px;
  }
  hr.footer-hr
  {
    width:50%;
  }
  hr.copyright
  {
    opacity:0.4;
  }