form{
    margin-left: calc(var(--left-margin) + 4px);
    margin-top: calc(var(--spacing) - 158px);
}

.translator-label.active{
    /* font-size: var(--header);
    line-height: var(--header-leading); */
    font-size: var(--subhead);
    line-height: calc(var(--subhead) / 0.8);
    margin-top: var(--spacing);
    /* margin-left: -7px; */
    color: var(--text-color);
    display: block;
    max-width: 20ch;
    padding-right: 5px;
}

.translator-label{
    display: none;
}

#selected-term-container{
    margin-top: -85px;
    margin-left: 0px;
}

.translate-button{
    font-size: var(--body);
    height: 42px;
    background-color: var(--text-color);
    color: var(--other-color);
    position: relative;
    left: -5px;
    top: -5px;
    border-radius: 0px;
    width: 100px;
    text-align: center;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    margin: 5px;
}

.text-field-input{
    margin-top: 16px;
    display: flex;
    flex-direction: row;
}

h1{
    margin-bottom: 5px;
}

h2{
    margin-left: calc(var(--left-margin) + 5px);
    margin-top: 15px;
    margin-bottom: 5px;;
}


h3{
    /* margin-left: calc(var(--left-margin) + 15px); */
    margin: 14px;
    margin-left: calc(var(--left-margin) + 6px);
    margin-top: 18px; 
    /* margin-top: 1px; */
    color: var(--text-color);
}


p{
    margin-left: calc(var(--left-margin) + 5px);
    margin-bottom: 20px;
    margin-right: 30px;
    margin-top: -6px;
}

.error{
    margin-top: 100px;
}

.translate-button:hover{
    background-color: rgb(255, 81, 81);
}


#translated-term-container{
    display: none;
}


#translated-term-container.active{
    position: absolute;
    background-color: white;
    width: 235px;
    margin-top: -12px;
    margin-left: 19px;
    padding-bottom: -100px;
    height: auto;
    max-height: 345px;
    overflow: scroll;
    border-left: 1px var(--text-color) solid;
    border-right: 1px var(--text-color) solid;
    border-bottom: 1px var(--text-color) solid;
    border-top: 1px var(--text-color) solid;
}

#term-to-translate{
    font-family: 'Authentic Sans';
    font-size: var(--body);
    color: rgb(146, 146, 146);
    width: 235px;
    height: 40px;
    padding: 20px;
    padding-left: 17px;
    position: relative;
}

.menuitem{
    border-top: 1px var(--text-color) solid;
    height: 63px;
    padding-left: 0px;
}

.menuitem:hover{
    background-color: var(--text-color);
    cursor: pointer;
    color: var(--other-color);
}

.menuitem:hover h3{
    /* color: var(--other-color); */
    color: white;
}


@media (min-width: 576px) {

    /* #term-to-translate{
        border-bottom: 2px var(--text-color) solid;
        border-top: 2px var(--text-color) solid;
        border-left: 2px var(--text-color) solid;
    } */
    
    #term-to-translate, #translated-term-container.active{
        width: 439px;
    }
}


@media (min-width: 700px) {

    form{
        margin-left: calc(var(--left-margin) + 10px);
    }

    h1{
        margin-left: 30px;
    }

    h3{
        margin-top: 22px;
        margin-left: var(--left-margin);
    }

    h2{
        margin-left: calc(var(--left-margin));
        margin-top: 25px;
    }
    
    
    p{
        margin-left: calc(var(--left-margin) + 2px);
    }

    #translated-term-container.active{
        max-height: 385px;
        padding-bottom: -100px;
        width: 516px;
        margin-left: 40px;
    }

    .translate-button{
        left: -6px;
        height: 60px;
        width: 121px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
        /* border: 1.5px var(--text-color) solid; */
    }

    #term-to-translate{
        width: 520px;
        height: 60px;
        padding-left: 16px;
    }

    #selected-term-container{
        margin-top: -70px;
        margin-left: 8px;
    }
    
    
    .menuitem{
        margin-left: -16px;
        padding-bottom: 90px;
    }
}


@media (min-width: 1100px) {
    
    #term-to-translate{
        width: 582px;
        height: 60px;
    }

    #translated-term-container.active{
        width: 578px;
    }

    .translate-button{
        width: 140px;
        height: 60px;
        /* padding-left: 40px;
        padding-right: 40px; */
    }

    .menuitem{
        margin-left: -16px;
        padding-bottom: 100px;
    }
}