@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Changa+One&family=Play:wght@700&display=swap');

body {
    /* font-family: 'Play', sans-serif; */
    margin: 0rem;
    margin-inline-start: 0rem;
    margin-block-start: 0em;
    margin-block-end: 0rem;
    font-family: 'Changa One', cursive;
    font-family: 'Play', sans-serif;
    background-image: url(https://c4.wallpaperflare.com/wallpaper/146/872/985/baby-groot-groot-5k-hd-wallpaper-preview.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    /* background-size: 100% 100%;  */
    
    
}
.navigation{
padding: 1rem;
text-align: left;
font-size: x-large;
}
.navigation .navigation-header{
    color: white;
    margin: 1rem 1rem;
}

.footer{
    display: block;
    text-align: center;
    max-width: 1200px;
    margin: auto;
    font-size: small;
    letter-spacing: 0.1rem;
    color: black;
}

.footer-div{
    /* margin: 1rem 1rem 0rem 1rem; */
    margin-top: 6rem;
    background-color: grey;
    padding: 0.01rem 0.01rem 0.01rem 0.01rem; 
    border-radius: 1rem 0rem 1rem 0rem;
}

.btn{
    margin: 1rem 1rem;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 2rem;
    background-color: yellow;
    border: 4px solid white;
    font-weight: bold;
    font-size: medium;
    
}

textarea{
    margin: 1rem 1rem;
    width: 60%;
    height: 20vh;
    background-color: transparent;
    border-style: ridge;
    color: white;
    font-size: large;
    padding: 0.5rem;
    border-radius: 1rem;
}

.output{
    width: 60%;
    height: 20vh;
    border: 1px grey solid;
    margin: 1rem 1rem;
    color: white;
    letter-spacing: 0.1rem;
    text-align: center;
    padding: 0.5rem;
    border-radius: 1rem;
}
.desc{
    background-color: blue;
    text-align: left;
    width: 18%;
    margin: 0rem 0rem 0rem 1rem;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 1rem;
    color: white;
}