*{
  box-sizing: border-box;
}
body{
  margin: 0px;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #130f40; /* This dark background will be primary unless overridden by an image */
  font-family: 'Lato' !important;
  flex-direction: column; /* Added to stack H1 and search bar vertically */
}
h1 { /* Added H1 styling from my previous suggestion to match the dark theme */
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    font-size: 3em;
    margin-bottom: 20px;
    z-index: 2; /* Ensure H1 is above background but below search if layers overlap */
}

.search-box{ /* This will be the container for your form elements */
  width: fit-content;
  height: fit-content;
  position: relative;
  z-index: 10; /* Ensure search box is above other content */
}
.input-search{
  height: 50px;
  width: 50px; /* Starts as a small circle */
  border-style: none;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 2px;
  outline: none;
  border-radius: 25px; /* Makes it circular initially */
  transition: all .5s ease-in-out;
  background-color: #22a6b3; /* Your chosen blue */
  padding-right: 40px; /* Space for the search icon */
  color:#fff;
}
.input-search::placeholder{
  color:rgba(255,255,255,.5);
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 100;
}
.btn-search{
  width: 50px;
  height: 50px;
  border-style: none;
  font-size: 20px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  right: 0px; /* Position to the right of the input */
  color:#ffffff ;
  background-color:transparent;
  pointer-events: painted; /* Allows clicks on the button */
}
/* This is the magic for the animation: when the button is focused OR the input is focused, the input expands */
.btn-search:focus ~ .input-search,
.input-search:focus { /* Combined these two rules for cleaner code */
  width: 300px; /* Expands width */
  border-radius: 0px; /* Becomes rectangular */
  background-color: transparent; /* Becomes transparent */
  border-bottom:1px solid rgba(255,255,255,.5); /* Adds a bottom border */
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2); /* Smooth transition */
}


/* footer  */
footer {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  bottom: 0;
  position: fixed; /* Stays at the bottom of the viewport */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 999; /* Ensure it's on top of other content */
  padding: 10px 0; /* Add some padding to the footer */
}

footer p {
  margin: 10px 0;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
footer .fa-heart{
  color: red;
}
footer .fa-dev{
  color: #fff;
}
footer .fa-twitter-square{
  color:#1da0f1;
}
footer .fa-instagram{
  color: #f0007c;
}
footer .fa-linkedin{ /* Corrected 'fotter' to 'footer' */
  color:#0073b1;
}
footer .fa-codepen{
  color:#fff
}
footer a {
  color: #3c97bf;
  text-decoration: none;
  margin-right:5px;
}
.youtubeBtn{
  position: fixed; /* Stays fixed relative to the viewport */
  left: 50%;
  transform:translatex(-50%);
  bottom: 45px; /* Position above the footer */
  cursor: pointer;
  transition: all .3s;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  z-index: 998; /* Ensure it's above other content but below footer if needed */
}
.youtubeBtn i{
  font-size:20px;
  float:left;
}
.youtubeBtn a{
  color:#ff0000;
  animation: youtubeAnim 1000ms linear infinite;
  float:right;
}
.youtubeBtn a:hover{
  color:#c9110f;
  transition:all .3s ease-in-out;
  text-shadow: none;
}
.youtubeBtn i:active{
  transform:scale(.9);
  transition:all .3s ease-in-out;
}
.youtubeBtn span{
  font-family: 'Lato';
  font-weight: normal;
  color: #fff;
  display: block;
  font-size: 12px;
  float: right;
  line-height: 20px;
  padding-left: 5px;

}

@keyframes youtubeAnim{
  0%,100%{
    color:#c9110f;
  }
  50%{
    color:#ff0000;
  }
}
/* footer  */