body{
    background-color: rgb(21, 8, 100);
}
h1{
    color: rgb(255, 255, 255);
    text-align: center;
    margin: 45px;
}

.container{
    text-align: center;
    background-color: azure;
    border-radius: 10px;
    padding: 50px 50px 50px 50px;
    margin: 10px 100px 100px 100px;
    max-width: 500px;
    margin: auto;
        border-right: 12px solid #3beaea;
}

.hint{
    opacity: 6px;
    font-size: 10px;
    font-family: monospace;
    margin-right: 10px;
    padding-top: 10px;
}
.poem-line{
    color: rgb(61, 60, 60);
    font-size: 18px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: azure;    
    border-radius: 10px;
    padding: 50px 50px 50px 50px;
    max-width: 500px;
    margin: auto;
    border-left: 12px solid #3beaea ;
}



.submit-button{
    background-color: rgb(21, 8, 100);
    color:white;
    border-radius: 4px;
    margin-left: 10px;
    width: 100px;
    margin-top: 70px;
}
.poem-content{
    border-radius: 6px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}


.hidden {
    display: none; }

.generating {
    animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    } }