@font-face {
  font-family: dugi_bialan;
  src: url(/fonts/dugi2.ttf);
}
body {
    background-color:#aaaa77;
    font-family: dugi_bialan ,Arial ,  Helvetica, sans-serif;
    margin:0px;
}

button {
	font-family: inherit;
}
.red {
    color:red;
}

.content{
    margin: 1vw;
    font-size:180%;
    background-color:#a7ac93;
    padding : 10px;
}

.content .script_dugi {
    font-size: 150%;
}

.content .script_roman {
    font-size: 90%;
    font-style:italic;
}


.err_no_word{
    font-size:large;
    color:red;
}

.highlight{
    color:red;
}



.g-base {
    height:3em;
    width:auto;
}

.g-second { 
    height:1.8em;
    width:auto;
    padding-bottom:1.2em;
}
.g-follow { 
    height: 2.5em;
    width:auto;
    margin-left:-0.8em;
}
.g-s-follow {
    height:1.8em;
    width:auto;
    margin-left:-1.3em;
}

.glyph-box {
    text-align:center;
    height:55px;
    width:60px;
    border:1px solid black;
    overflow:hidden;
    float:left;
}
.glyph-box img {
    width : 50%;
    height: 50%;
    background: #bbbbbb;
}

.word-list {
    display:flex;
    flex-wrap:wrap;
}
.word-box {
    text-align:center;
    height:210px;
    width:120px;
    border:1px solid black;
    page-break-inside:avoid;
    overflow-y:hidden;
}
.word-box img {
    width : 30%;
    height: 30%;
}

#question {
    padding:10px;
    font-size:300%;
}
#answers > div {
    border: 1px solid black;
    padding:5px;
    min-width:150px;
    min-height:150px;
    float:left;
    font-size:200%;
    text-align:center;
    transition:top 2s;
    
}


#top_menu {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    left:10vw;
}

#top_menu.hide{
    top:auto;
    bottom:100vh;
    position:fixed;
}

#top_menu.fix {
    top:0;
    bottom:auto;
    position:fixed;

}

.menu a {
    padding:20px; 
    background : grey;
    margin: 1px 5px;
}

.hidden {
    display:none;
}
@media print{
    .no-print, .no-print * {
        display:none; 
    }
}



body{
    background-image: url('/pics/squares/bas.svg'),
        url('/pics/squares/belan.svg'),  
        url('/pics/squares/dedi.svg'),
        url('/pics/squares/bena.svg'),
        url('/pics/squares/belin.svg'),
        url('/pics/squares/bunei.svg'),
        url('/pics/squares/busi.svg'),
        url('/pics/squares/ugin.svg'),
        url('/pics/squares/egon-2.svg'),
        url('/pics/squares/elena-3.svg'),

        url('/pics/squares/dugi.svg'),
        url('/pics/squares/gedin.svg'),
        url('/pics/squares/geva.svg'),
        url('/pics/squares/vegi.svg'),
        url('/pics/squares/undi.svg'),
        url('/pics/squares/wuwi.svg'),
        url('/pics/squares/wa.svg'),
        url('/pics/squares/belan.svg'),
        url('/pics/squares/bengo.svg'),
        url('/pics/squares/yovi.svg');


    background-size: 10vw 10vw;
}
.wide_window {
    background-position: 0 0, 0 10vw, 0 20vw, 0 30vw,0 40vw, 0 50vw, 0 60vw, 0 70vw, 0 80vw, 0 90vw,
        90vw 0, 90vw 10vw, 90vw 20vw, 90vw 30vw,90vw 40vw, 90vw 50vw, 90vw 60vw, 90vw 70vw, 90vw 80vw, 90vw 90vw;

    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,
                    no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,
                    no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,
                    no-repeat, no-repeat,no-repeat,no-repeat,no-repeat;
    background-attachment: fixed;
}

.tall_window {
    background-position:  0 0, 10vw 0,20vw 0, 30vw 0, 40vw 0, 50vw 0, 60vw 0, 70vw 0, 80vw 0, 90vw 0; 
    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
    background-attachment: fixed;
}

.title_box{
    margin: 0 1vw;
    padding-left: 3vw;
    background-color: #bcd35f;

}

.title_box img{
    max-height: 100%;
    float:right;
}

.title_box h1{
    max-width: 50vw;
    top:2vw;
    margin-top:2vw;
    padding-top:2vw;
    font-size: 250%;
}

.page_inner{
    background-color: #ffffff;
}

.wide_window .page_inner{
    margin-left: 10vw;
    margin-right: 10vw;
}

.tall_window .page_inner{
    margin-top: 10vw;
    margin-right: 2vw;
    margin-left: 2vw;
}

.tall_window .squares img {
    float:none;
    margin:0px;
    width:10vw;
}

.squares {
    font-size:0;
}