body {
    margin: 0;
}

div {
/*    border: 1px dashed red;*/
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    width: 100%;

    background-color: cadetBlue;
}

.flex-item, a:visited, a:link {
    /*background-color: cornflowerblue;*/
    width: 120px;
    height: 100%;
    font-size: 20px;
    margin: 25px;
    text-align: center;
    color: white;
    font-family: 'Lato', sans-serif;
    /*text-shadow: 1px 1px 1px #000000;*/
    text-decoration: none;
}

.flex-item:hover {
    background-color: red;
}

a:hover {
    text-decoration: underline;
    background-color: red;

}

.topRight {
    display: -webkit-flex;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
}

.topLeft {
    display: flex;
    flex: row nowrap;
    background-color: cadetBlue;
    width: 340px;
    /*height: 110px;*/
    margin: 5px;
    align-items: center;
    
}

#logo {
    width: 40px;
    margin: 5px;
}

#logoTitle {
    font-family: 'Lato', sans-serif;
    font-size: 26px;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 3px #000000;
}



.body-container {
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
}


.bodyLeft {
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 200px;
}

.navigation_title {
    font-family: 'Lato', sans-serif;
}


.createButtons {
    margin: 10px;
}

#newFlashCards {
    padding: 20px;
    background-color: lightBlue;
    border-radius 20%;
    font-family: 'lato', sans-serif;
    font-size: 34px;
    border-radius: 5%;
}

#newFlashBlanks {
    padding: 20px;
    background-color: lightBlue;
    border-radius 20%;
    font-family: 'lato', sans-serif;
    font-size: 34px;
    border-radius: 5%;
}

#newPicCards {
    padding: 20px;
    background-color: lightBlue;
    border-radius 20%;
    font-family: 'lato', sans-serif;
    font-size: 34px;
    border-radius: 5%;
}

.bodyRight {
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 400px;
}


.wordBlock {
    display: flex;
    flex-flow: row wrap; 
    padding: 40px;
    font-size: 24px;
    text-align: justify;
    font-family: 'Lato', sans-serif;
    margin: 20px;


}

.wordItem {
    border-radius: 10%;
    font-size: 24px;
    /*margin-left: 4px;*/
    text-align: center;
    border-bottom: 2px solid rgba(0,0,0,0.0);

    }

.wordItem:hover {
    background-color: rgba(140,180,244,0.7);
}

.wordItemSpecial {
    font-size: 24px;
    text-align: center;
    /*background-color: lightBlue;*/
    }
    
.wordItemWhiteSpace {
    width: 8px;
    height: 15px;
    font-size: 24px;
    text-align: center;
    /*background-color: rgba(140,140,244,0.2);*/
    border-radius: 0;
    }

.selected {
    border-bottom: 2px solid black;
    border-radius: 0%;
    /*background-color: rgba(280, 80, 33, 0.3);*/
/*    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;*/
    color: rgba(0,0,0,0.2);
}



.login_container {
    background-color: gray;
    text-align: center;
    margin: auto;
    width: 340px;
    font-family: 'Lato', sans-serif;
    padding: 20px;
}

#register_form {
    text-align: center;
}

.login_field {
    font-size: 20px;
}

.login_button {
    font-size: 24px;
    width: 100px;
}

.field_align {
    text-align: center;
}

.error {
    color: red;
}