/*! Style v1.0 | (C) Marcdebruin 2021 | All Rights Reserved */
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
}

.navbar {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   padding: 40px 100px;
   z-index: 1000;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.navbar .logo {
   width: 35px;
   height: 35px;
}

.container {
   position: absolute;
   right: 0;
   width: 100%;
   min-height: 100vh;
   padding: 100px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-image: linear-gradient(to right,#001620,#013953);
   transition: 0.5s;
   z-index: 2;
}

.container.active {
   right: 300px;
}

.content {
   position: relative;
   z-index: 10;
}

.title {
   font-size: 4.5em;
   font-weight: 500;
   color: #fff;
   line-height: 1em;
   text-transform: uppercase;
}

.subtitle {
   font-size: 3.5em;
   font-weight: 300;
   color: #ffffff80;
   line-height: 1em;
   text-transform: uppercase;
   animation: fadeIn 2s linear;
}

.text {
   font-size: 1.1em;
   color: #fff;
   margin: 20px 0;
   font-weight: 400;
   max-width: 700px;
   animation: fadeIn 5s linear;
}

.typewriter {
   white-space: nowrap;
   overflow: hidden;
   border-right: 2px solid gray;
   animation: typewriter 2s steps(44) 200ms normal both, blinkCursor 800ms steps(44) infinite normal;
}

@keyframes typewriter {
   from {
      width: 0;
   }
   to {
      width: 100%;
   }
}

@keyframes blinkCursor {
   from {
      border-right-color: rgba(255, 255, 255, .75);
   }
   to {
      border-right-color: transparent;
   }
}

.button {
   display: inline-block;
   font-size: 1em;
   border: 1px solid white;
   padding: 10px 25px;
   text-transform: uppercase;
   text-decoration: none;
   font-weight: 400;
   margin-top: 10px;
   color: white;
   letter-spacing: 2px;
   transition: 0.2s;
   animation: fadeIn 5s linear;
}

.button:hover {
   background: #ffffff1a;
}

.footer {
   position: absolute;
   bottom: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 10px;
   text-decoration: none;
   color: #ffffff80;
}

@media (max-width: 991px) {
   .container,
   .container .navbar {
      padding: 40px;
   }
   .content h2 {
      font-size: 3em;
   }
   .content h3 {
      font-size: 2em;
   }
   .typewriter {
      white-space: normal;
   }
}

@keyframes fadeIn {
   0% {
      opacity: 0; 
   } 
   100% {
      opacity: 1; 
   } 
}