body {
    /*overflow: hidden;*/
    background-color: #DFF0FF;
}

body > * {
    margin: 10px;
}

#help-wrapper {
    position: fixed;
    text-align: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #BBBB;
}

#help-popup {
    position: relative;
    
    background-color: #DFF0FF;
    border: 2px solid black;
    box-shadow: 3px 4px 4px;
    /*border-bottom: none;*/
    margin: auto;
    padding: max(2em, 1%);
    
    max-height: 60%;
    max-width: 60%;
    text-align: left;
    
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    
    overflow-y: scroll;
    
    /*for the fadeout effect at the bottom*/
    /*-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0 90%, transparent 99%, black 100%);*/
}

#help-button {
    display: block;
    position: relative;
    float: right;
    top: 1%;
    /*right: 5%;
    top: 5%;*/
    
    aspect-ratio: 1 / 1;
    height: 80px;
    width: auto;
    margin: 5px;
    
    text-align: center;
    line-height: 80px;
    
    font-size: 60px;
    color: #333;
    
    background-color: #DFF0FF;
    
    border-radius: 50%;
    border-style: solid;
    border-color: #333;
    
    opacity: 65%;
    transition: opacity 250ms cubic-bezier(0.265, 0.705, 0.340, 0.955);
    
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

@media (hover: hover) {
    #help-button:hover {
        opacity: 100%;
        cursor: pointer;
    }
}

#matches-panel {
    overflow-y: scroll;
    height: 93%;
    border: 2px solid black;
    background-color: #FDF4DF;
}

#wordlist {
    text-align: justify;
    
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 1em;
    margin-inline-end: 1em;
    
    font-size: 20px;
}

#input-panel {
    display: flex;
    flex-direction: row;
    column-gap: 5px;
    height: 5%;
}

@media screen and (max-width: 650px) {
    #help-button {
        font-size: 8vw;
        height: 10vw;
        line-height: 10vw;
        
        top: 0.5%;
    }
    
    #input-panel {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 5px;
        height: 5%;
    }
    
    #wordlist {
        font-size: 3vw;
    }
    
    #matches-panel {
        height: 88%;
    }
    
    input:not([type]), input[type="button"], input[type="submit"] {
        flex: 1;
    }
    
    select {
        flex: 2;
    }
}

/*
@media screen and (max-width: 490px) {
    #input-panel {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 5px;
        height: 5%;
    }
    
    #wordlist {
        font-size: 3vw;
    }
    
    #matches-panel {
        overflow-y: scroll;
        height: 88%;
        border: 2px solid black;
        background-color: #FDF4DF;
    }
    
    input:not([type]), input[type="button"], input[type="submit"] {
        flex: 1;
    }
    
    select {
        flex: 2;
    }
}
*/

#input-panel > * {
    border: 1px solid black;
    border-radius: 1em;
}

#inputfield {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 300px;
    flex: 3;
    border-radius: 0.5em;
}

input {
    height: 100%;
    width: 10vh;
}

/*
author {
    color: red;
}*/