main{
    grid-column: 2/3;
    grid-row: 1/2;
    display: flex;
    align-items:center;
    flex-direction: column;
    color:  var(--color-accent-light-lighter-no-transparency);
    background-color: var(--color-accent-light-opacticy-5);
}

#privacy, #impressum, #contact-form{
    padding: 3vh 2vw;
}

.burger-menu{
    align-self: flex-start;
}

label{
    padding-left: 1vw;
}

#terms-of-service{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#impressum, #privacy{
    background-color: var(--color-dark);
    color:  var(--color-accent-light-lighter-no-transparency);
    border-radius: 0.5rem;
    max-width: 80%;
    margin: 2vh 0;
}

a, a:visited{
    color: var(--color-accent-dark-darkmode);
}

/* Contact Form */
#contact-form{
    display: flex;
    justify-content: space-around;
    align-content: center;
    flex-flow: row wrap;
    height: 100%;
}

form{
    background-color: var(--color-dark);
    padding: 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1.3fr 0.5fr;
    border-radius: 0.5rem;
}

textarea {
    height: 126px;
    width: 100%;
    overflow-y: auto;
}

.header-button{
    margin-top: 2vh;
}

.left input,
.right textarea,
.right > select {
    display: block;
    outline: none;
    border: none;
    box-sizing:border-box;
    width: 100%;
    padding:0.7rem;
    border-radius: 0.5rem;
    margin-top: 1em;
    font-family: Quicksand, sans-serif;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 10%); /* stylelint-disable-line */
    resize: none;
    background-color: rgb(var(--bg-color));
    color: var(--color-dark-dark-mode);
}

::placeholder{
    color: var(--color-dark-dark-mode) !important;
}

#contact-form input:focus,
#contact-form textarea:focus {
    box-shadow: 0 2px rgb(var(--color-accent));
}

#input-submit:hover {
    box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 60%); /* stylelint-disable-line */
}

.header-button:hover{
    background-color: var(--color-dark);
}

#reason{
    padding:0.63rem;
}

/* CSS Grid Positioning */
.top {
    grid-area: 1 / 1 / 2 / 3;
}
  
.left {
    margin-right: 2%;
    grid-area: 2 / 1 / 3 / 2;
}

.right {
    margin-right: 2%;
    grid-area: 2 / 2 / 3 / 3;
}

.bottom {
    grid-area: 3 / 1 / 4 / 3;
    display: flex;
    flex-direction: column;
}

/* Mobile */
@media screen and (width>=481px) and (width<=768px) {
    main {
        grid-column: 1/3;
        grid-row: 1/2;
    }

    .burger-menu {
        grid-column: 1/2;
        grid-row: 1/2;
        display: block;
        padding: 1vh 1vw;
    }

    form {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 0.7fr) 1fr 0.7fr;
    }

    .top {
        grid-area: 1 / 1 / 2 / 2;
    }

    .left {
        margin-right: 2%;
        grid-area: 2 / 1 / 3 / 2;
    }

    .right {
        grid-area: 3 / 1 / 4 / 2;
    }

    .bottom {
        grid-area: 4 / 1 / 5 / 2;
    }
}