*{
    scroll-behavior:smooth;
}

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(#35187a 0%, #31109c 50%, #2a1361 100%);
    height:100vh;
}

#title{
    margin-top:100px;
    color:rgb(248, 192, 255);
    font-size: 38px;
    font-weight: bold;
    text-shadow: black 2px 2px 2px;
    font-family: "Merriweather Sans", serif;
    transition: font-size 0.3s ease-in-out; 
}

#title:hover{
    font-size: 40px;
}

.content{
    display: grid;
    place-items: center; 
    height: 50vh;
}

/*input box*/

.input-box{
    background: linear-gradient(#c7a4f9 0%, #a38ded 50%, #d8a1ee 100%);
    height:270px;
    width:500px;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.5);  
    margin-top:35px;  
}

#input-text{
    font-size: 20px;
    font-family: "Merriweather Sans", serif;
    margin:0px 0px 20px 0px;
}

.input{
    display: flex;
    flex-direction: row;
}

#text-input{
    width:300px;
    height:40px;
    border: #2a1361 2px solid;
    margin-right:2px;
    font-size:25px;
}

#check-btn{
    border: #2a1361 2px solid;
    color: #2a1361;
    font-weight: bold;
    cursor: pointer;
}

#check-btn:hover{
    background: #2a1361;
    color: white;
}

#result{
    font-size: 25px;
    font-family: "Outfit", serif;
    margin:20px 0px 20px 0px;
    color: white;
    font-weight: bold;
    text-shadow: rgba(6, 3, 8, 0.088) 2px 2px 2px;
    display:none;
    padding:5px;
    background-color: #512ca8;
}



/*description*/

.description{
    background: white;
    height:80px;
    width:600px;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    display: flex;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.5);  
    margin:60px 30px 30px 30px;  
    text-align: center;
}

#desc-text{
    margin:20px 20px 20px 20px;
    font-family: "Outfit", serif;
    font-size: 18px;
}

#palindrome{
    font-style: italic;
    font-weight: bold;
}