* {
    margin: 0px;
    color: #2fff2f;
}

.body {
    min-height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    /* font-family: Cambria, Times, serif; */
    font-family: Arial, Helvetica, sans-serif;
    --font-size: 2.26vw;
    --form-width: 100vw;
    box-sizing: border-box;
    gap: 1.6vh;
    padding: 0vw 1.6vw;
}

hr {
    width: 100%;
}

.normalize-font {
    font-size: var(--font-size);
}

.home-button {
    background: none;
    border: 1px ridge #0dff00;
    color: #2fff2f;
    padding: .66vmin;
    border-radius: .5vw;
    font-size: calc(var(--font-size) * .8);
}

.title {
    width: 85%;
    font-size: calc(var(--font-size) * 1.667);
    margin-top: 1.5vw;
    position: relative;
    cursor: default;
}

.status-text {
    cursor: default;
}

.row-form-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.6vh;
}

.evaluate-form {
    width: 100%;
}

.search-form {
    width: 100%;
}

.form-style {
    padding: 1vw;
    height: 5vw;
    background-color: #153215;
    border: 1px ridge #0dff00;
}

.field-style {
    width: 100%;
    font-size: var(--font-size);
    transition: border 300ms;
    text-wrap: nowrap;
    overflow: scroll;
}

#answer-field {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-style {
    width: 85.8px;
    font-size: 1.1rem;
    border-radius: 1vw;
    padding: 0vmin 3vmin;
    margin-left: 1.6vw;
    margin-right: 1.6vw;
    transition: outline 100ms;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drop-down-menu-style {
    width: 100%;
    font-size: 1.1rem;
    border-radius: 1vw;
    margin-left: 1.6vw;
    margin-right: 1.6vw;
    transition: outline 100ms;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    appearance: none;
}

.center-text {
    font-size: var(--font-size);
    width: var(--form-width);
    display: flex;
    justify-content: center;
}

input[type="text"]:focus {
    outline: none;
}

#info-button {
    margin: 15px;
}

#info-container {
    width: calc(var(--form-width) * .97);
    font-size: var(--font-size);
    height: max-content;
    overflow-y: scroll;
}

/* maximum fonts for navigation */
/* @media(min-width: 941px) {  
} */

/* minimum fonts for navigation */
@media(max-width: 712px) {
    .home-button {
        padding: 4.5px;
        border-radius: 3.5px;
        font-size: calc(1rem * .8);
    }
    .title {
        font-size: calc(1rem * 1.667);
        margin: 10.5px 0px;
    }
    .form-style {
        height: 35px;
    }
    .field-style {
        font-size: 1rem;
    }
    .button-style {
        border-radius: 7px;
        margin-left: 11.2px;
        margin-right: 11.2px;
    }
    .drop-down-menu-style {
        border-radius: 7px;
        margin-left: 11.2px;
        margin-right: 11.2px;
    }
    .status-text {
        font-size: 1rem;
    }
}

/* layout change breakpoint */
@media(min-width: 500px) {
    .evaluate-form {
        gap: 0px;
    }
    .search-form {
        gap: 0px;
    }
    .row-form-layout {
        flex-direction: row;
    }
    .button-style {
        font-size: calc( var(--font-size) * 1.1);
        width: calc(var(--form-width) / 8);
    }
    .drop-down-menu-style {
        font-size: calc( var(--font-size) * 1.1);
        width: max-content;
    }
    .home-button {
        position: absolute;
        top: 10.5px;
        left: 8px;
    }
    #search-result-container {
        font-size: var(--font-size);
    }
}

@media(max-width: 500px) {
    .home-button {
        background-color: #153215;
        font-size: 1rem;
    }
}

/* handle hover feature */
@media (hover: none) {
    /* no hover functionality: touchscreens */
    .form-style:focus {
        border: 1px ridge #e9ede7;
    }
    .button-style:focus {
        color: #e9ede7;
        outline: 2px ridge #e9ede7;
    }
    .drop-down-menu-style:focus {
        color: #e9ede7;
        outline: 2px ridge #e9ede7;
    }
    .home-button:focus {
        color: #e9ede7;
        border: 1px ridge #e9ede7;
    }
}

@media (hover: hover) {
    /* hover functionality: everything else */
    .form-style:focus {
        border: 1px ridge #e9ede7;
    }
    .button-style:focus {
        color: #e9ede7;
        outline: 2px ridge #e9ede7;
    }
    .drop-down-menu-style:focus {
        color: #e9ede7;
        outline: 2px ridge #e9ede7;
    }
    .home-button:focus {
        color: #e9ede7;
        border: 1px ridge #e9ede7;
    }
    .form-style:hover {
        border: 1px ridge #e9ede7;
    }
    .button-style:hover {
        color: #e9ede7;
        outline: 2px ridge #e9ede7;
    }
    .drop-down-menu-style:hover {
        color: #e9ede7;
        outline: 2px ridge #e9ede7;
    }
    .home-button:hover {
        color: #e9ede7;
        border: 1px ridge #e9ede7;
    }
}

/* loader style */
.elipses-container {
    --x: 4vmin;
    height: calc(var(--x) * 3);
    width: 80vmin;
    display: flex;
    gap: calc(10% - 2vmin);
    padding-bottom: calc(var(--x) * 2);
}

.elipses-dot {
    width: 2vmin;
    height: calc(var(--x));
    background-color: #2fff2f;
    border: .6vw solid #2fff2f;
    border-radius: 10px;
    position: relative;
    animation:
        var(--anim-time) linear 0ms infinite alternate wave,
        var(--anim-time) linear 0ms infinite alternate reshape;
}

@keyframes wave {
    0% {transform: translateY(0vmin)}
    25%, 100% {transform: translateY(var(--x))}
}

@keyframes reshape {
    0% {height: 100%}
    25% {height: 100%}
    50% {height: 200%}
    75%, 100% {height: 100%}
}