body {
     padding: 53px 0 0;
     font-family: 'Open Sans', sans-serif;
     height: 100vh;
     font-size: 14px;
     color: #333;
 }

 input,
 a {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
 }

 .accelerate {
     -webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
     -ms-transform: translateZ(0);
     -o-transform: translateZ(0);
     transform: translateZ(0);
 }

 .nopadding {
     padding: 0;
 }

 .animate {
     transition: all 0.3s ease-in-out;
 }

 .navbar-light .navbar-nav .nav-link:hover {
     color: rgba(0, 0, 0, 0.41);
 }

 a.btn {
     font-size: 14px;
     color: #fff;
     background-color: #3340ff;
     border: none;
     margin-top: 4px;
     transition: transform 0.3s ease-in-out;
     box-shadow: 0 1px 2px rgba(41, 52, 204, .1), 0 2px 4px rgba(41, 52, 204, .2);
 }

 a.btn:hover {
     -webkit-transform: translateY(1px);
     transform: translateY(1px);
     background-color: #4753ff;
 }

 .navbar {
     background: rgba(255, 255, 255, 0.92);
     padding: 5px 15px;
     border-bottom: 1px solid #C0C2C457;
     -webkit-backdrop-filter: saturate(180%) blur(20px);
     backdrop-filter: saturate(180%) blur(20px);
 }

 .navbar-brand {
     font-size: 26px;
     font-weight: bold;
     letter-spacing: -1.5px;
 }

 .nav-contact {
     margin: 0 10px;
     font-size: 15px;
 }

 .navbar-light .navbar-nav .nav-link {
     color: #333;
 }

 .content-container {
     padding: 5vh 15px 5vh;
 }

 .large-occupation {
     color: #000;
     font-size: 90px;
     font-weight: 800;
     letter-spacing: -1.5px;
     line-height: 103%;
 }

 .small-occupation {
     font-size: 20px;
     color: #333;
     margin-top: 30px;
 }

 .small-occupation a,
 .project-desc a {
     color: #f20000;
     font-weight: 600;
 }

 .small-occupation.btn {
     font-size: 16px;
     margin-top: 30px;
     padding: 10px 15px;
     border: 1px solid #3340ff;
     background-color: transparent;
     color: #3340ff;
     font-weight: 500;
 }

 .small-occupation.btn:hover {
     background-color: #82808012;
 }

 .large-header {
     color: #000;
     font-size: 30px;
     font-weight: 600;
     letter-spacing: -1.5px;
     line-height: 103%;
     margin: 0 0 50px;
     text-align: center;
 }

 .small-header {
     font-size: 18px;
     margin: 25px 0;
     text-align: center;
     color: #98a8b4;
     font-weight: 600;
 }

 .content-section {
     min-height: 300px;
     padding: 30px 0 50px;
     background: #f5f9fb;
 }


 /*Personal Projects*/
 .project-card {
     padding: 60px 40px;
     margin: 0 -40px;
     border-radius: 10px;
     cursor: pointer;
     will-change: transform, box-shadow;
     transform-style: preserve-3d;
     transition: all 0.4s ease-in-out;
 }

 .project-card:hover {
     box-shadow: 0 4px 6px rgba(60, 60, 60, 0.16), 0 10px 20px rgba(0, 0, 0, .05);
     background-color: #fff;
     transform: scale(1.015);
 }

 .project-title {
     color: #000;
     font-size: 40px;
     letter-spacing: -1.5px;
     line-height: 103%;
     margin: 0 0 20px;
     font-weight: 800;
     transition: color 0.4s ease-in-out;
 }

 .project-card:hover .project-title {
     color: #3340ff;
 }

 .project-year {
     color: #98a8b4;
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     margin-bottom: 5px;
 }

 .project-desc {
     font-size: 18px;
     margin: 15px 0 45px;
     color: #596873;
     line-height: 1.6;
 }

 .project-card .carousel {
     height: 400px;
     overflow: hidden;
     border-radius: 5px;
     box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.1);
     max-width: 300px;
     margin: 0 auto;
 }

 .project-card .carousel .carousel-inner,
 .w-100,
 .carousel-item {
     height: 100%
 }


 .navbar-brand {
     font-size: 22px;
     font-weight: 700;
 }

 .content-section.dark {
     color: #fff;
     background-color: #2f3740;
 }

 .content-section.dark .small-header {
     color: #ADB5C0;
 }

 .content-section.dark .large-header {
     color: #FFF;
 }

 /*Mobile */
 @media (max-width: 850px) {
     .navbar {
         padding: 5px 15px 5px 0;
     }

     .navbar-expand-lg {
         box-shadow: 0 0 3px 1px #e8e8e8;
     }

     .navbar-collapse.collapse.show .nav-contact,
     .navbar-collapse.collapsing .nav-contact {
         margin: 5px 10px 15px 10px;
     }

     .nav-item {
         text-align: center;
     }

     .content-section {
         padding: 30px 0 0;
     }

     .large-occupation {
         font-size: 65px;
     }

     .small-occupation {
         font-size: 18px;
         color: #333;
         margin: 30px 0 20px;
         line-height: 1.6;
     }

     .project-card {
         padding: 30px 10px;
         margin: -15px;
         border-radius: 0;
         box-shadow: none;
         background-color: #fff;
     }

     .project-desc {
         padding-right: 0;
     }
 }