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

    body{
        font-family: 'Griffy', cursive;
        background-image: url(images/sea.jpg);
        color: black;
    }
    nav{
        text-align: center;
        font-size: 2rem;
        background-color: white
        margin-top: 1rem;
    }

    textarea{
    
        display: block;
        padding: 1rem;
        width:50em;
        height:30vh;
        margin-left: auto;
        margin-right: auto;
        border: solid 2px #0f0f0f;
        }

        #output {
            border: 1px solid black;
            height: 20vh;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 3rem;
            padding: 1rem;
            font-size: 1.5em;
            
            
        }
        button{
            background-color: rgb(0, 0, 0);
            font-family: 'Open Sans', sans-serif;
            margin-left: auto;
            margin-right: auto;
            margin-top: 2rem;
            display: block;
            width: 7em;
            padding: 0.5rem;
            color: white;
            font-size: x-large;
            border-radius: 1em;
        }
    h3{
        text-align: center;
        font-size: 1.2rem;
        margin-top: 1em;
        font-family: 'Open Sans', sans-serif;
    }
    h1{
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }