*{
    font-family:verdana,tahoma,sans-serif;
}

/*
Title and subtitle text styled to be pretty and contained in a blue box 
*/
header{
     background-color: #f88d4f;
     height:195px;
     border-radius: 40px;
     width: 60%;
     margin-left: 20%;
     margin-right: 20%;
 }
 
header h1{
     margin:0;
     color:#000000;
     text-shadow : 1px 1px 1px rgba(0,0,0,1);
     text-align:center;
     font-size:60px;
     padding-top: 35px;
 }

header h2{
    margin:0;
    color:#242424;
    text-shadow : 1px 0 0 rgba(0,0,0,1);
    font-size:30px;
    padding-top: 15px;
    padding-bottom: 20px;
}

  
/*
affects both subtitle and result number text. This centers them both.
*/
h2{
    display: flex; 
    justify-content: center; 
    text-align:center;
    font-family : sans-serif;
}

/*
styles the text that user will see which tells how many results were found.
*/
h2 span{
    background-color: #e9e9e9;
    text-shadow : 0 1px 3px rgba(0,0,0,.4);
    border-radius: 12px;
    padding-left: 5px;
    padding-right: 5px;
}


/*
stylize the widgets so they are far more appealig with instruction on left and inputs on right
*/
.widgets{

  background-color: #ffba60;
  border-radius: 14px;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;

  margin-top: 0.5em;
  margin-bottom:0.5em;
  padding-left: 7px;

  font-size : 24px;
  color : #000000;
  text-shadow : 0.5px 0 0 rgb(0, 0, 0);
  font-family : sans-serif;
  text-decoration : none;
}

#englishword, #destLanguage, #sourceLanguage, #resultformatting{
    outline: none !important;
    padding-top: 1px;
    padding-bottom: 1px;
    border:1px solid rgb(0, 0, 0);
    box-shadow : 0 0 2px rgba(0,0,0,.6); 
    
    background-color: #ffffff;

    float: right;
    width: 60%;
    box-sizing:border-box;

    /*makes text in input smaller than text to the left so it doesn't double the height of the whole line*/
    font-size: 18px;
}

#englishword{
    /*
    indent only for this input box
    */
    padding-left: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
}


/*
is used to force the input onto a new line but only when in mobile view
*/
.breaker{
    display:none;
}


/*
Stylize and centers the button used to initiate the searching
*/
.searchwidgets{
    margin-top: 2em;
    margin-bottom:2em;

    /*centers button*/
    display: flex; 
    justify-content: center; 
}

button{
    cursor : pointer;
  
    border-style : solid;
    border-width : 1px;
    border-radius : 24px;
    padding : 10px 18px;

    box-shadow : 0 1px 4px rgba(0,0,0,.6);
    text-shadow : 0 1px 3px rgba(0,0,0,.4);
    font-size : 13px;
    font-weight : bold;
    color : #fff;
    font-family : sans-serif;
    text-decoration : none;
  }
  
  button.red{
    border-color: #e4aa5e;
    background:  #e7ac5f;
  }
  
  button:hover{
      background: rgb(216, 161, 97);
  }
  
  button:active{
      background: rgb(204, 149, 95);
      box-shadow : 0 0 6px rgba(0,0,0,.6);
  }
  
  button:focus {outline:0;}
  


  
/*
the horizontal line that seperates the user inputs and the results
*/
hr{
    width: 60%;
}


/*
Displays the results in blue boxes with translation larger with definitions smaller below it
*/
#content{
    text-align: center;
    font-size : 3em;
}
 
.result {

    position: relative;
    height: 250px;
    width: 100px;
    float:left;
    margin-left:10px;
    margin-top:50px;

    flex: 50%;
    padding: 0 4px;
    text-shadow : 0 1px 3px rgba(0,0,0,.4);
    font-family : sans-serif;
}

.result span{
    font-size:12px;
    font-weight:bold;
    display:block;
}

.result audio{
    width: 130px;
}

/*
organizes each result into rows of their own boxes without the list's bullet or indent
*/
ul{
    padding: 0;
    list-style: none;
    text-shadow : 0 1px 2px rgba(0,0,0,.4);
}

.row {
    background-color: #f7f0ca;
    border-radius: 24px;
    text-align: left;
    padding: 0 4px 0 10px;
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 10px;

    font-size : 26px;
    font-weight : bold;
}

.row span{
    color: #444444;
    display: block;
    margin-left: 5%;
    
    font-size : 13px;
    font-weight : normal;
    padding-bottom: 3px;
}


/*
styles and centers the scroll alert box to center bottom of screen and keep it fixed there on screen
*/
.aligner{
  display: flex;
  align-items: center;
  justify-content: center;
}

#scrollalert{
    display: block;
    position: fixed;
    z-index: 100;
    text-align: center;
    

    bottom: 0;

    color: #222222;
    background-color: #ffffff;
    border-radius: 12px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 4px;
    opacity: 0.97;

    text-shadow : 0 1px 2px rgba(0,0,0,.4);
}



/*
used to make page more mobile friendly
*/
@media only screen and (max-width: 1050px) {


    header h1{
        font-size : 55px;
    }

    header h2{
        font-size : 25px;
    }

    .widgets{
        font-size : 22.5px;
    }

    .widgets #englishword, #destLanguage, #sourceLanguage, #resultformatting{
        font-size : 17.15px;
    }
}


@media only screen and (max-width: 980px) {

    header{
        width: 90%;
        margin: 8% 5% 12% 5%;
    }

    header h1{
        font-size : 5vw;
    }

    header h2{
        font-size : 4vw;
    }

    h2 span{
        font-size : 6vw;
    }

    .breaker{
        display:block;
        width: 100%;
        margin: 0;
        height:0;
    }

    .widgets{
        width: 90%;
        margin: 4% 5% 4% 5%;
        padding: 0;
        
        text-shadow : 0 1px 1px rgba(0,0,0,1);
        color: #000000;
        font-size : 5vw;
        text-align: center;
    }

    .widgets #englishword, #destLanguage, #sourceLanguage, #resultformatting{
        margin-top: 5px;
        width: 100%;
        height: 80px;
        float: none;

        font-size : 30px;
        font-weight : bold;
    }

    button{
        margin: 10%;
        font-size: 40px;
    }

    hr{
        width: 90%;
    }

    .row{
        white-space: normal;
        width: 90%;
        margin: 5%;
        padding-top: 20px; 

        font-size : 35px;
        text-align: center;
    }


    .row span{
        font-size : 18px;
        text-align: left;

        padding-top: 10px; 
        padding-bottom: 7px; 
    }


    #scrollalert{
        font-size : 3vw;
    }
}

@media only screen and (max-width: 600px) {

    header{
        height:165px;
    }
    
    header h1{
        text-shadow : 1px 1px 2px rgba(0,0,0,0.6);
        font-size : 45px;
    }

    header h2{
        text-shadow : 1px 1px 1px rgba(0,0,0,0.6);
        font-size : 20px;
    }

    button{
        font-size: 30px;
    }
}
  
@media only screen and (max-width: 500px) {

    header{
        height:145px;
    }

    header h1{
        font-size : 40px;
    }

    header h2{
        font-size : 15px;
    }

    button{
        font-size: 25px;
    }
}