/*Classes*/

.vocabTable{
    width: 100%;
}

.apricotFont{
    color: #F7882F;
}

.centerText{
    text-align: center;
}

.chosenVerbForm{
    font-size: 4ex;
}

.chosenVerbTranslation{
    font-size: 2ex;
    margin-bottom: 2ex;
}

.actionButton{
    background-color: #687A8F;
    color: white;
    padding-top: 1ex;
    padding-bottom: 1ex;
    border-radius: .25em;
    width: 50%;
    margin-left: 25%;
    margin-top: 2ex;
}
.corrrect{
    background-color: darkolivegreen;
    color: white;
}
.corrrectButMissed{
    background-color: rgb(160, 193, 104);
    color: white;
}

.font5ex{
    font-size: 5ex;
}
.font4ex{
    font-size: 4ex;
}
.font3ex{
    font-size: 3ex;
}
.font2ex{
    font-size: 2ex;
}

.font1ex{
    font-size: 1ex;
}

.greekText{
	font-family: tekniaGreek;
}

.header{
    background-color: #687A8F;
    color: white;
    width: 100%;
    font-size: 5ex;
    font-weight: lighter;
    margin-top: 1ex;
    margin-bottom: 1ex;
    padding-top: .5ex;
    padding-bottom: .5ex;
    text-align: center;
    border-radius: .25em;
}

.holder{
    background-color: white;
}

.incorrect{
    background-color: red;
    color: white;
}

.loginUtility{
    background-color: #687A8F;
    color: white;
    text-align: center;
    width: 40%;
    margin-left: 30%;
    padding-top: .5ex;
    padding-bottom: .5ex;
    margin-bottom: 1ex;
}

.mainFooter{
    font-size: .5ex;
    width: 100%;
    text-align: center;
    clear: left;
}

.modal{
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: white;
    background-color: rgba(0,0,0,0.4);
}

.modal-content{
    background-color: white;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.navigationMain{
    background-color: #F7882F;
    color: white;
    text-align: center;
    width: 70%;
    margin-left: 15%;
    font-size: 4ex;
    padding-top: .5ex;
    padding-bottom: .5ex;
    margin-bottom: 1ex;
    border-radius: .25em;
}

.navigationSecondary{
    background-color: #F7882F;
    color: white;
    text-align: center;
    font-size: 2ex;
    padding: .5ex;
    margin-bottom: 1ex;
    display: none;
    border-radius: .25em;
}

.navigationTertiary{
    border-radius: .25em;
    background-color: white;
    color: black;
}

.needBorder{
    border: black 1px solid;
}

.question{
    background-color: #687A8F;
    color: white;
    text-align: center;
    font-size: 4ex;
    padding-top: .5ex;
    padding-bottom: .5ex;
    margin-bottom: 1ex;
    border-radius: .25em;
}

.questionAnswer{
    background-color: #F7882F;
    color: white;
    text-align: center;
    font-size: 4ex;
    padding-top: .5ex;
    padding-bottom: .5ex;
    margin-bottom: 1ex;
    border-radius: .25em;
}

.vocabAnswer{
    float: left;
    margin-right: 1ex;
    padding-left: 1ex;
    padding-right: 1ex;
}

.selectedVerb{
    background-color: #F7882F;
    color: white;
    border-radius: .25em;
}

.tableColumn{
    width: 30%;
}

.tableColum25{
    width: 25%;
    border-radius: .25em;
}


@media screen and (min-width : 590px) {
    .header{
        width : 528px;
        margin-left : calc((100% - 528px)/2);
    }
    .navigationMain{
        width : 370px;
        margin-left : calc((100% - 370px)/2);
    }
    
   
}