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

#sign{
    display: block;
    width: 87%;
    height: 60px;        
    font-family: 'Caveat', cursive;
    font-size: 4rem;
    font-weight: lighter;
    letter-spacing: 3px;    
    text-align: right;    
    bottom: 15px;    
    right: 50%;
    margin: auto;
    transform: rotate(-4deg) ;  
    padding: 0;
}


.underDiv {
    position: absolute;
    height: 60px;
    bottom: 0;
    right: 0;
    border-bottom: 3px solid gray;
    width: 23rem;  
    transform: rotate(2deg);      
}

@media (max-width: 690px) {
    .signContainer {
        height: 100px;
    }

    #sign {
        right: 100px;
        font-size: 2.5rem;
        letter-spacing: 2px;
        margin-top: 40px;
        vertical-align: bottom;
        transform: rotate(-4deg) translate(-10%, 0);
        /* transform: rotate(2deg) translate(8px, 8px);  */
    }

    .underDiv {
        width: 15rem;
        transform: rotate(2deg) translate(-5px, -20px);
        /* margin-bottom: 25px; */
        /* margin-top: 25px; */
    }
}