*{
    margin:0;
    padding:0;
    box-sizing:border-box
}

body{
  background-color: rgb(14, 14, 84);
  background-repeat:no-repeat;
  font-family: 'Segoe UI', sans-serif;
}

/* Navbar */
.container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 20px;
}

.logo{
  display:flex;
  font-size:1.5rem;
  color:white;
}
#inner_logo{
    color:rgb(6, 172, 238);
}

.container_1{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  font-weight:bold;
}

#nav1 a{
  color:white;
  text-decoration:none;
}
#nav1 a:hover{color:yellow;}

/* Hero */
.main_container{
  font-size:2.5rem;
  color:white;
  text-align:center;
  margin:5rem 1rem 0 1rem;
}
#main_containt{
    text-shadow:0.1px 0.1px 35px rgb(225,214,216);
}

.logo1{
  word-spacing: -10px;
}

.main_container p,h4{
    display:inline;
    font-weight:bold;
}

#change_color{
  color:rgb(6,172,238);
  word-spacing: 0;
}

#animated{font-size:2rem;margin-top:1.3rem}
#animated span{position:relative}
#animated span::before{
  content:"AI-EMOTIVE LIBRARY";
  color:#ff7f50;
  animation:words 20s infinite;
}
#animated span::after{
  content:"";
  position:absolute;
  width:calc(100% + 8px);
  height:100%;
  background-color:rgb(14,14,84);
  border-left:2px solid #ff7f50;
  right:-8px;
  animation:cursor .8s infinite , typing 20s steps(14) infinite;
}

@keyframes cursor {to{border-left:2px solid transparent}}
@keyframes words{
  0%,20%{content:"AI-EMOTIVE LIBRARY";}
  21%,40%{content:"AI-ATS IDENTIFIER";}
  41%,60%{content:"AI-EMOTIVE LIBRARY";}
  61%,80%{content:"AI-ATS IDENTIFIER";}
  81%,100%{content:"AI-EMOTIVE LIBRARY";}
}
@keyframes typing {
  10%,15%,30%,35%,50%,70%,75%,90%,95%{width:0;}
  5%,20%,25%,40%,45%,60%,65%,80%,85%{width:calc(100% + 8px);}
}

/* Feature Boxes */
.box_container{
  margin:4rem auto;
  display:flex;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
  padding:1rem;
  animation: fadeIn 0.8s ease;
}

.box{
  background-size:cover;
  background-repeat:no-repeat;
  text-align:center;
  height:270px;
  width:100%;
  max-width:500px;
  border:2px solid rgb(216,206,206);
  border-radius:20px;
  box-shadow:1px 1px 12px white;
  transition:.2s;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:1rem;
}
.box h1{
    color:white;
    margin-top:1rem;
    text-shadow:2px 2px 2px black;
}
.box:hover{transform:scale(1.02)}

#box1{
    background-image:url("images/library.jpg");
}
#box2{
    background-image:url("images/ats.avif");
}

#submit{
  margin-top:7rem;
  font-size:1rem;
  height:2rem;
  width:8rem;
  color:white;
  font-weight:bold;
  background-color:rgb(234,79,105);
  border-radius:20px;
  text-shadow:2px 2px 2px rgb(213,172,179);
  box-shadow:0 0 15px yellow;
  border:none;
  cursor:pointer;
}
#submit:hover{
  background-color:green;
}

footer{
  position: relative;
  bottom: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  color: white;
}

/* Responsive Media Queries */
@media(max-width:768px){
  .main_container{
    font-size:1.8rem;
    margin-top:3rem;
}
  #animated{
    font-size:1.2rem;
}
  .box{
    height:220px;
}
}
@media(max-width:480px){
  .container{
    flex-direction:column;
    align-items:flex-start;
}
  .container_1{
    margin-top:1rem;
    gap:1rem;
}
  .main_container{
    font-size:1.5rem;
}
  #animated{
    font-size:1rem;
}
}

@media(max-width:320px){
  footer{
    bottom: 40px;
  }
}

@keyframes fadeIn {
      from {
        opacity:0; 
        transform:translateY(-20px);
    }
      to {
        opacity:1; 
        transform:translateY(0);
    }
    }