:root{
            --teal: #14b8a6;
            --darkTeal: #0d9488;
            --lightTeal: #5eead4;
            --lightBrown: #e0b070;
            --lightGreen: #899b38;
            --lightGreenOpacity: #899b3831;
            --lightGreenOpacity2: #899b38ab;
            --black: rgb(20, 20, 20);
        }
        body{
            margin: 0;
            overflow: hidden;
            font-family: 'Patrick Hand', cursive;
        }
        .container{
            width: 100vw;
            height: 60vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        #darkkk{
            color: var(--black);
            background-color: var(--lightGreen);
            font-size: 1.5rem;
            margin: 0;
            display: flex;
            justify-content: center;
            height: 20vh;
        }

        textarea{
            resize: none;
        }
        #txt-input {
            display: block;
            /* text-align: center; */
            width: 40%;
            height: 10vh;
            margin: 1rem 0rem;
            padding: 2rem;
            border-radius: 1rem;
            background-color: var(--lightGreenOpacity);
           
            border: 2px solid var(--lightBrown);
            font-family: 'Patrick Hand', cursive;
            font-size: 18px;
            /* cursor: pointer; */
            
        }
        ::placeholder{
            color: rgba(255, 255, 255, 0.582);
            font-family: 'Patrick Hand', cursive;
        }
        #txt-input:focus{
            outline: none;
            background-color: var(--lightGreenOpacity2);
            color: whitesmoke;
            transition: all .3s ease-in;
        }
        #txt-output {
            cursor: default;
            color: rgba(255, 255, 255, 0.582);
            /* background-color: var(--lightGreenOpacity); */
            background-color: var(--lightGreenOpacity2);
            width: 40%;
            height: 10vh;
            margin: 1rem 0rem;
            padding: 2rem;
            border-radius: 1rem;
            font-size: 18px;
            text-align: left;
            border: 1px solid var(--lightBrown);

        }
        #btn-click{
            display: block;
            text-align: center;
        }
        .container{
            text-align: center;
            background-color: var(--lightBrown);
            background-image: url("groot2.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: scale(200%);
            /* padding: 2rem; */
            margin: 0px 0px;
            font-family: 'Patrick Hand', cursive;
        }
        .btn{
            background-color: var(--lightGreen);
            margin: 20px;
            border: 0;
            padding: 15px;
            font-size: 17px;
            color: whitesmoke;
            border-radius: 10px;
            cursor: pointer;
            font-family: 'Work Sans', sans-serif;
            
        }
        .btn:active{
            transform: scale(0.90);
        }
        .btn:hover{
            background-color: #5f6e1d;
            transition: all .5s ease;
        }
        .footer{
            display: flex;
            /* justify-content: left; */
            /* padding-left: 40px; */
            justify-content: center;
            align-items: center;
            background-color: var(--lightGreen);
            height: 20vh;
            font-family: 'Work Sans', sans-serif;
            font-size: 20px;
        }

        .img{
            width: 80px;
            height: 80px;
            /* border-right: 2px solid var(--lightBrown); */
            border-radius: 20px;
            /* padding-right: 40px; */
        }
        .links{
            text-decoration: none;
            color: whitesmoke;
        }
        footer ul {
            display: flex;
            flex-direction: column;
        }
        footer ul li{
            list-style-type: none
            
        }
        .socialLinks{
            padding: 10px;
            /* font-size: 20px; */
            
        }
        .light{
            font-weight: lighter;
            cursor: default;
            /* font-size: 17px; */
        }