@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");

@import url(https://fonts.googleapis.com/css?family=Open+Sans);



/* Default body */

* {
    padding: 0px;
    margin: 0px;
}



/*Middle Body*/

.middle-container {
    display: flex;
}

.content_box,
.image1 {
    width: 50%;
    box-sizing: border-box;
    /* Ensures padding and borders don't affect width */
    padding: 20px;
    /* Adjust padding as needed */
}

.image1 img {
    width: 100%;
}

.content_box {
 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color:  black;
    display: flex;
    justify-content: center;
    align-items: center;

}

.waviy {
    position: relative;
    -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
    font-size: 55px;
  }
  .waviy span {
    font-family: 'Alfa Slab One', cursive;
    position: relative;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    animation: waviy 1s infinite;
    animation-delay: calc(.1s * var(--i));
    
  }
  @keyframes waviy {
    0%,40%,100% {
      transform: translateY(0)
    }
    20% {
      transform: translateY(-20px)
    }
  }


  @media screen and (max-width: 750px) {
    .middle-container {
        flex-direction: column;
    }
    .content_box,
    .image1 {
        width: 100%;
    }
    .content_box{
        height: 500px;
    }
    .waviy{
        font-size: 50px;
    }
}

.why-domain {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px; /* Adjust as needed */
    margin: 30px;
}

.why-domain-header{
    width: 40%;
}

.why-domain-answer{
    width: 60%;
}

.why-domain-header h1, .why-domain-answer p {
    text-align: center;
    margin: 0;
}

.why-domain-header h1 {
    color: rgb(55, 62, 63); /* Example text color */
    font-weight: bolder;
    font-size: 40px;
}

.why-domain-answer p {
    color: #1e183f; /* Example text color */
    font-size: 20px;
}

@media screen and (max-width: 750px) {
    .why-domain{
        flex-direction: column;
    }
    .why-domain-header, .why-domain-answer{
        width: 100%;
    }
}

#container {
    margin: auto;
    width: 100vw;
    height: 80pt;
    top: 0;
    bottom: 0;
    filter: url(#threshold) blur(0.6px);
}

#text1,
#text2 {
    position: absolute;
    width: 100%;
    display: inline-block;
    font-display: swap; 
    font-family: "Raleway", sans-serif;
    font-size: 80pt;
    text-align: center;
    user-select: none;
}

#tfheader{
    background-color:#c3dfef;
}
#tfnewsearch{
    display: flex;
    justify-content: center;
    padding:20px;
}
.tftextinput{
    margin: 0;
    padding: 5px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:20px;
    border:1px solid #0076a3; border-right:0px;
    border-top-left-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
}
.tfbutton {
    margin: 0;
    padding: 5px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    border: solid 1px #0076a3; border-right:0px;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
}
.tfbutton:hover {
    text-decoration: none;
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);
}
/* Fixes submit button height problem in Firefox */
.tfbutton::-moz-focus-inner {
  border: 0;
}
.tfclear{
    clear:both;
}