@import url('https://fonts.googleapis.com/css2?family=Charm&family=Kaushan+Script&display=swap');
body{
    content:"";
    background: url(/images/monkeysurprise.png) left no-repeat,url(/images/monkeysmile.png) right no-repeat,url("/images/back-img.png") repeat;
    background-size: 20rem , 25rem , 10rem;
    background-color: hsla(120, 60%, 70%, 0.3);
    text-align: center;
}
h1,h3{
    font-family: 'Kaushan Script', cursive;
    color: #27272a;
    text-shadow: 5px 5px 6px rgba(120, 53, 15, 1);
    margin: auto;
    width: auto;
    background-color: #fde047;
    font-size: 3rem;
    padding-top: 5px;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
textarea{
    display: inline-block;
    width: 50%;
    height: 8rem;
    font-size: 1rem;
    text-align: center;
    border-radius: 1rem;
}
#outputText{
    pointer-events: none;
    font-weight: bold;
}

.btn{
    display: block;
    text-align: center;
    margin: auto;
    margin-top: 2rem;
    font-size: 1.5rem;
    width: 10rem;
    font-weight: bold;
    padding-bottom: 5px;
    background-color: #a3e635;
    cursor: pointer;
    border-radius: 1rem;
    box-shadow: 0 9px #999;
}
.btn:hover{
    background-color: #bef264;
}
.btn:active{
    background-color: #a3e635;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

h3{
    border: 2px solid black;
    border-radius: 5px;
    font-family: 'Charm', cursive;
    font-weight: bolder;
    font-size: 1.5rem;
    width: 20rem;
    margin-top: 2rem;
    padding-top: 0px;
    padding-bottom: 2px;
}

.list-item-inline {
    display: inline;
    padding-inline-start: 2rem;  
}
.footer {
    width: auto;
    margin: auto;
    margin-top: 4.5rem;
    background-color: #fde047;
    text-align: center;
    color: black;
    padding-bottom: 1rem;
}

.footer .link {
    color: white;
    text-decoration: none;
}

.footer-header {
    padding-top: 2px;
    font-weight: bold;
    font-size: large;
}
.fb{
    margin-inline-start: -6rem;
}
.link .fa-brands{
    text-align: center;
    color: #000000;
    font-size: 1.2rem;
    transition: .5s;
}
.link .fa-brands:hover {
    color: #ffffff;
}

@media only screen and (max-width: 600px){
    body{
        width: 90%;
        height: 90%;
        background-size: 8rem , 10rem , 4rem;
    }
    .header{
        font-size: xx-large;
    }
    .btn{
        font-size: large;
        width: auto;
    }
    .caption{
        font-size: larger;
        width: auto;
    }
    .footer-header{
        font-size: smaller;   
    }
    .link .fa-brands{
        font-size: large;
    }
    .inputText, .outputText{
        height: 6rem;
        width: 90%;
    }
    .inputText{
        margin-bottom: 4rem;
    }
    .outputText{
        margin-top: 3rem;
    }
    .footer{
        margin: auto;
        padding: auto;
        position: fixed;
        bottom: 0;
        width: 90%;
        text-align: center;
        padding-bottom: 0px;
    }
    .footer-header{
        padding: none;
    }
}