/*  @2024 Coding ICT Solution  */

html,body{
  margin:0px;
  padding:0px;
  background:black;
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  letter-spacing: 1px;
  font-optical-sizing: auto;
  font-style: normal;
}

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

section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80vh;
}

footer{
  position: fixed;
  bottom: 0px;
  color: white;
  text-align: center;
  width: 100%;

}
footer p{
  color: white;
  font-weight: lighter;
}

footer b {
	font-weight: 500;
}

footer img {
	height: 20px;
	bottom: -4px;
    position: relative;
}

h1{
  font-family: "Libre Bodoni", serif;
  font-optical-sizing: auto;
  font-style: italic;
  letter-spacing: 2px;
  
  padding: 2px;
  color: white;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
}

#logo{
  margin-top: 20%;
  text-align: center;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: inherit;

}

#logo_container{
  margin-top: 15em;

}
.typewriter h1 {
  width: 120px;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: 0.05em;
 
  

}

#film{
  opacity: 0;
  animation-delay: 3s;
  animation-duration: 0s;
  animation-name: fadeIn;
animation-fill-mode: forwards;
}

.delay_film{
  
}

#epos{
  opacity: 0;
  animation-name:fadeIn;
  animation-duration: 1.5s;
    animation-delay: 0s;

    animation-fill-mode: forwards;



}

#char_U{
  opacity: 0;
  animation-name:fadeIn;
  animation-duration: 0.1s;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}

#char_p{
  opacity: 0;
  animation-name:fadeIn;
  animation-duration: 0.1s;
  animation-delay: 5.4s;
  animation-fill-mode: forwards;
}

#char_space{
  opacity: 0;
  animation-name:fadeIn;
  animation-duration: 0.1s;
  animation-delay: 5.6s;
  animation-fill-mode: forwards;
}

#char_n{
  opacity: 0;
  animation-name:fadeIn;
  animation-duration: 0.1s;
  animation-delay: 6.2s;
  animation-fill-mode: forwards;
}

#char_e{
  opacity: 0;
  animation-name:fadeIn;
  animation-duration: 0.1s;
  animation-delay: 6.4s;
  animation-fill-mode: forwards;
}

#char_x{
  opacity: 0;
  animation-name:fadeIn;
  animation-duration: 0.1s;
  animation-delay: 6.6s;
  animation-fill-mode: forwards;
}

#char_t{
  opacity: 0;
  animation-name:fadeIn;
  animation-duration: 0.1s;
  animation-delay: 6.8s;
  animation-fill-mode: forwards;
}

#company{
  padding-right:50px
}


.blink{
  animation: fadeIn 0s;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 120px }
}

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

@keyframes fadeIn {  
   from {  
       opacity:0;  
   }  

   to {  
       opacity:1;  
   }  
}

@media only screen and (min-width:150px) and (max-width:700px) {
  #epos,#film{
    height: 60px;
  }
  footer p{
    font-size: 8pt;
  }
  #sep{
    display: none;
  }

  #company{
  padding-right:20px
}
  }