body{background: black; margin: 0; font-family: "Segoe UI"} button{cursor: pointer;}
.container{ .current{font-size:55px;opacity: 1;} margin: 10px 20px 20px 20px; a{text-decoration: none;color: white;font-family: "Segoe UI";font-size: 28px;opacity: 0.6;transition: .2s; &:hover{opacity: 1;}}}
h1{margin: 0} h2{margin: 0} h3{margin: 0}
.green{background: #3d833d !important; color: white !important; &:hover{background: #489348 !important}}
.blue{background: #3b71ae !important; color: white !important; &:hover{background: #4a7eb9 !important}}
.pink{background: #d24177 !important; color: white !important; &:hover{background: #ef5e95 !important}}
.yellow{background: #d49624 !important; color: white !important; &:hover{background: #e0a432 !important}}
.black{background: #202020 !important; color: white !important; &:hover{background: #323232 !important}}
.white{background: #e9e9e9 !important; color: #191919 !important; &:hover{background: #ffffff !important}}

.razdel{
    margin: 6px 0px;
    a{
        opacity: 0.5;
        font-size: 22px;
        padding: 5px 10px;
        border-bottom: solid 0px #343434;
        &:hover{
            border-bottom: solid 3px #909090;
        }
    }
    .current{
        font-size: 22px;
        opacity: 1;
        border-bottom: solid 3px #b0b0b0;
        &:hover{
            border-bottom: solid 3px #ffffff;
        }
    }
}
main{
    margin: 20px 15px;
    display: flex;
}
.tileContainer{
}
.tileContainer-Flex{
    margin: 8px 8px 0px 8px;
    display: flex;
    justify-content: space-between;
    .metroTile{
        margin: 0px;
        width: 184px;
    }
}

@keyframes hide { from{opacity: 1} to{opacity: 0; transform: scaleX(50%) translateX(-280px)} }
.hide{animation: hide 0.5s ease-in-out;opacity: 0;}

.metroTile2x{
    width: 375px !important;
    img{
        margin: 0px 97.5px;
    }
}
.icon-full{
    padding: 0 !important;
    img{
        width: 180px !important;
        height: 180px !important;
        transform: scale(0.9) !important;
    }
}
.metroTile{
    margin: 8px;
    padding: 8px;
    width: 180px; height: 180px;
    background: #636363;
    border: none;
    display: flex;
    justify-content: center;
    img{
        align-self: center;
        position: absolute;
        width: 148px;
        height: 148px;
        transform: scale(0.6);
    }
    span{
        align-self: flex-end;
        font-size: 18px;
    }
    &:hover{outline: #b2b2b2 solid 0.1px}
    &:active{transform: scale(0.98);outline: #ffffff solid 0.3px}
    transition: all ease-in-out 0.1s;
}

.downloadpage{
    h1{
        font-size: 42px;
    }
    margin: 0 30px;
    color: white;
    a{
        text-decoration: none;
        color: #b9b9b9;
    }
    .author{
        font-size: 24px;

    }
    .description{
        margin: 6px 0;
        padding: 6px 10px;
        font-size: 20px;
        transition: all ease-in 0.1s;
        &:hover{background: rgba(255, 255, 255, 0.18)
        }
    }
}
.infoContainer{
    margin: 10px 0;
    display: flex;
    div{margin: 4px; font-size: 24px;}
}
.downloadContainer{
    display: flex;
    margin: 8px 0;
}
.downloadButton{
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    transition: ease-in 0.1s;
    &:hover{outline: #b2b2b2 solid 0.1px}
    &:active{transform: scale(0.98);outline: #ffffff solid 0.3px}
}
.modContainer{
    display: grid;
    margin: 6px 0;
    padding: 10px 10px;
    font-size: 20px;
    transition: all ease-in 0.1s;
    &:hover{background: rgba(255, 255, 255, 0.18); outline: #b2b2b2 solid 0.1px}
    span{
        opacity: 0.8;
    }
    span:nth-child(3){
        opacity: 0.5;
    }
    a{
        margin-top: 10px;
        min-width: 88px;
        width: 6%;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        padding: 10px 20px;
        transition: ease-in 0.1s;
        &:hover{outline: #b2b2b2 solid 0.2px}
        &:active{transform: scale(0.98);outline: #ffffff solid 0.4px}
    }
}