body {
    margin: 0;
}

.compass {
    background-color: bisque;
    overflow: hidden;
    padding: 10px 25px;
    position: fixed;
    top: 0;
    width: 100%;
}

.compass a {
    background-color: #FFCD52;
    color: #000000;
    display: block;
    float: left;
    font-family: 'Caveat', cursive;
    font-size: 1.5em;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
}

.needle {
    float: left;
    overflow: hidden;
}

.needle .magnetizer {
    background-color: #FFCD52;
    border: none;
    color: #000000;
    font-family: 'Caveat', cursive;
    font-size: 1.5em;
    margin: 0;
    outline: none;
    padding: 5px 10px;
}

.compass a:hover, .needle:hover .magnetizer {
    background-color: chocolate;
}

.needle-ways {
    background-color: darkorange;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    display: none;
    min-width: 150px;
    position: fixed;
    z-index: 1;
}

.needle-ways a {
    color: #000000;
    display: block;
    float: none;
    padding: 5px 10px;
    text-align: left;
    text-decoration: none;
}

.needle-ways a:hover {
    background-color: #D26921;
}

.needle:hover .needle-ways {
    display: block;
}

.diary {
    background-color: antiquewhite;
    font-family: 'Caveat', cursive;
    font-size: 2em;
    padding: 25px;
}

.diary > h2 {

}

.diary > h2 p {

}

.diary > .title > h1 {
    text-align: center;
}

.diary > .record {
    padding-bottom: 20px;
}

.diary > .record > p {
    text-align: justify;
}

.dictionary {
    background-color: antiquewhite;
    font-family: sans-serif;
    font-size: 1em;
}

.dictionary > .page-title {
    padding: 10px 0px;
}

.dictionary > .page-title > h1 {
    text-align: center;
}

.dictionary > .vocabulary {
    column-width: 600px;
}

.dictionary > .vocabulary, .dictionary > .phrases, .dictionary > .numbers {
    padding: 25px;
}

.dictionary > .vocabulary > .section {
    padding-bottom: 20px;
}

.dictionary > .vocabulary > .section > .title {
    font-size: 1.4em;
    padding-bottom: 5px;
    text-align: center;
}

.dictionary > .vocabulary > .section > .record {
    border-bottom: lightgrey 1px solid;
    display: flex;
    flex-wrap: wrap;
}

.dictionary > .vocabulary > .section > .record > .common {
    width: 50%;
}

.dictionary > .vocabulary > .section > .record > .dreori {
    width: 50%;
}

.dictionary > .vocabulary > .section > .record > .comment {
    font-size: 0.8em;
    padding-left: 20px;
    width: 100%;
}

.dictionary > .phrases {

}

.dictionary > .phrases > .title {
    font-size: 1.4em;
    text-align: center;
    width: 100%;
}

.dictionary > .phrases > .phrase-list {
    column-width: 750px;
}

.dictionary > .phrases > .phrase-list > .phrase {
    border-bottom: lightgrey 1px solid;
    display: flex;
    flex-wrap: wrap;
}

.dictionary > .phrases > .phrase-list > .phrase > .common {
    width: 50%;
}

.dictionary > .phrases > .phrase-list > .phrase > .dreori {
    width: 50%;
}

.dictionary > .phrases > .phrase-list > .phrase > .comment {
    font-size: 0.8em;
    padding-left: 20px;
    width: 100%;
}

.dictionary > .numbers {

}

.dictionary > .numbers > .title {
    font-size: 1.4em;
    text-align: center;
    width: 100%;
}

.dictionary > .numbers > .numericals {
    column-width: 750px;
}

.dictionary > .numbers > .numericals > .record {
    border-bottom: lightgrey 1px solid;
    display: flex;
    flex-wrap: wrap;
}

.dictionary > .numbers > .numericals > .record > .common {
    width: 50%;
}

.dictionary > .numbers > .numericals > .record > .dreori {
    width: 50%;
}

.dictionary > .numbers > .explanations {
    margin-top: 25px;
}

.dictionary > .numbers > .explanations > .record {
    border-bottom: lightgrey 1px solid;
    display: flex;
    flex-wrap: wrap;
}

.dictionary > .numbers > .explanations > .record > .explanation {
    width: 100%;
}

.dictionary > .numbers > .explanations > .record > .example {
    font-size: 0.9em;
    padding-left: 20px;
    width: 100%;
}