.starWarsWidget{
    border:0.125rem inset black;
    min-height:12.5rem;
    padding: 1.125rem 2.25rem 1.125rem 2.25rem;
    max-width:20.25rem;
    background:white;
    form{
        .starWarsWidgetHeader{
            font-family: 'Luckiest Guy', cursive;
            font-size:1.7rem;
            color:black;
            display:block;
            margin-bottom:0.5rem;
            text-align: center;
        }
        .starWarsSearchBar{
            border:0.125rem outset black;
            width:100%;
            font-size:1.25rem;
        }
        .starWarsSearchBar:focus{
            border:0.125rem outset lightblue;
            outline:none;
            width:100%;
            font-size:1.25rem;
        }
    }
    ul{
        font-family: 'Libre Caslon Text', serif;
        margin-top:2rem;
        
        li{
            display:grid;
            grid-template-columns: 50% auto;
            
            margin-bottom:1rem;
            line-height: 1.3;
            
            .starWarsLeftCol{
                font-weight: 700;
                text-align: left;
                font-size:1rem;
            }
            .starWarsRightCol{
                text-align: right;
                font-weight: 400;
                align-self:end;
                font-size:1rem;
            }
        }
        
    }
}

//these classes will be applied by javascript to ensure the widget stays responsive
//max 450px
.starWarsWidget{
    form{
        //0.824 multiplied against the full font size
        .starWarsHeader323PX{
            font-size:1.4rem;
        }

        .starWarsInput323px{
            font-size:1.03rem;
        }
    }
    ul{
        li{
            .starWarsLeftCol323px{
                font-size:0.824rem;
            }
            .starWarsRightCol323px{
                font-size:0.824rem;
            }
        }
    }
}

.starWarsUiMenu323PX{
    font-size:1.03rem;
}

//max 323px
.starWarsWidget{
    form{
        //0.588 original size
        .starWarsHeader288PX{
            font-size:1rem;
        }

        .starWarsInput288px{
            font-size:0.735rem;
        }
    }
    ul{
        li{
            .starWarsLeftCol288px{
                font-size:0.588rem;
            }
            .starWarsRightCol288px{
                font-size:0.588rem;
            }
        }
    }
}

.starWarsUiMenu288PX{
    font-size:0.735rem;
}

//my modifications of the jquery ui css
//hide the helper off screen
.ui-helper-hidden-accessible { position: absolute; left:-999rem; }

//makes the background of the row lightgrey when hovered
.ui-menu-item:hover,.auto-complete-active{
    background:lightblue;
    border: 0.063rem outset black;
    margin:0;
    padding:0.5rem 0 0 0rem;
    font-family: 'Libre Caslon Text', serif;
}

.ui-menu-item{
    margin:0;
    padding:0.5rem 0 0 0rem;
    font-family: 'Libre Caslon Text', serif;
}