html, body{
    margin: 0;
    padding: 0;
    float: left;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    font-family: font;
}

footer {
    height: 50px;
    background-image: url(img/navigator_background.png);
    background-size: 100% 100%;
    padding-top: 10px;
    justify-content: space-evenly;
}

footer > img{
    padding: 10px;
}

@keyframes anm-1{
    from{background-color: white;}
    to{background-color: #DDD;}
}

@keyframes anm-2{
    from{
        transform: scale(1, 1);
    }
    to{
        transform: scale(1.04, 1.04);
    }
}

div > div.row.item:active{
    animation: anm-2 0.3s 2 alternate;
}

footer > img:active{
    animation: anm-1 0.3s 2 alternate;
}

.tag-item{
    padding: 1px;
    margin-left: -10px;
    margin-right: -10px;
}

.tag-item:active{
    animation: anm-1 0.3s 2 alternate;
}

#content{
    overflow-y: scroll;
    height: 1px;
    flex-grow: 1;
    margin-top: -10px;
    z-index: 1;
}

.column{
    display: flex;
    flex-direction: column;
}

.row{
    display: flex;
    flex-direction: row;
}

.top-bar{
    height: 60px;
    background-image: url("./img/top_background.png");
    background-size: 100% 100%;
    z-index: 100;
}

.search-box{
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 8px;
    border-radius: 200px;
    width: 100%;
    font-size: 10pt;
    direction: rtl;
}

.search-box::placeholder{
    color: rgba(255, 255, 255, 0.7);
}

.search-box:focus{
    outline: none;
}

.home-box{
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);;
    border: none;
    padding: 11px;
    border-radius: 200px;
    margin-left: 8px;
}

@keyframes anm-slide{   
    0.1%{background: var(--img-1);}
        19.1%{background: var(--img-1);background-size: 100% 100%;}
    20.1%{background: var(--img-2);}
        39.1%{background: var(--img-2);background-size: 100% 100%;}
    40.1%{background: var(--img-3);}
        59.1%{background: var(--img-3);background-size: 100% 100%;}
    60.1%{background: var(--img-4);}
        79.1%{background: var(--img-4);background-size: 100% 100%;}
    80.1%{background: var(--img-5);}
        99.1%{background: var(--img-5);background-size: 100% 100%;}

    0%, 20%, 40%, 60%, 80%, 100%{
        background-size: 100% 100%;
        opacity: 0;
        transform: scale(1.05, 1.05);
    }

    1%, 21%, 41%, 61%, 81%,
    19%, 39%, 59%, 79%, 99%{
        background-size: 100% 100%;
        opacity: 1;
        transform: scale(1, 1);
    }
}

#slide{
    width: 100%;
    height: 200px;
    animation: anm-slide 15s infinite;
}

.item{
    background-color: white;
    height: 100px;
    border-radius: 10px;
    margin: 10px;
    font-family: font;
}

.navs{
    align-self: center;
}

::-webkit-scrollbar{
    width: 0;
}