* {
    margin: 0;
    padding: 0;
    font-family: "nimbus-sans-condensed", helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: blue;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.headline {
    text-align: center;
    top: 5vh;
    position: relative;
}

.form {
    margin: 0.75rem;
}

#guestbook {
    max-width: 600px;
    border: 1px solid blue;
    position: relative;
    margin: 20vh auto 0 auto;
}

#guestbook input {
    background-color: transparent;
    border: none;
    font-size: 1em;
    border: 1px blue solid;
    margin: 0.25rem 0.25rem 0 0;
    padding: 0.2rem;
}

.form-row {
    display: flex;
    gap: 8%;
    margin-bottom: 10px;
    width: 100%;
}

.form-row div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#guestbook p {
    text-align: center;
}

#guestbook textarea {
    resize: none;
    border: 1px solid blue;
    background-color: transparent;
    font-size: 1em;
    margin: 0.5rem 0 0 0;
    width: 100%;
    height: 20vh;
    padding: 2% 3%;
    box-sizing: border-box;
}

#guestbook input {
    background-color: transparent;
    border: 1px solid blue;
    font-size: 1em;
    padding: 0.2rem;
    width: 100%;
    box-sizing: border-box;
}

#sendbtn {
    background-color: transparent;
    color: blue;
    border: 1px blue solid;
    margin: 0 auto;
    padding: 0.2em;
    align-items: center;
}

#sendbtn:hover {
    color: white;
    background-color: blue;
}

footer, footer a {
    position : relative;
    transform : translateY(-100%);
    padding : 2px 0 4px 4px;
    background-color: blue;
    color: white;
    width: 100%;
}




@media all and (min-width:480px) and (max-width:767px) {
    #guestbook {
        width: 85%;
    }

    .form-row {
        flex-direction: column;
    }
  } 
  
  @media all and (max-width:479px) {
    #guestbook {
        width: 85%;
    }  
}