* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#gradient {
    background: linear-gradient(180deg, rgba(2, 16, 63, 1) 0%, rgba(4, 27, 92, 1) 50%, rgba(22, 46, 126, 1) 100%);
}

.banner-title {
    color: #ffffff;
}

#sub-title {
    color: #e9b8fc;
    font-size: 30px;
    font-weight: 600;
}

.filter {
    padding-top: 60px;
    background-image: url("../images/elements/banner-bg-shape.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
}

.filter-wrapper {
    margin: 0px auto;
    padding: 20px;
    width: 70%;
    background-color: rgba(180, 180, 214, 0.397);
    box-shadow: 0 0 10px 15px rgba(217, 217, 236, 0.397);
    border-radius: 999px;
}

.filter-name {
    text-align: right;
}

.small {
    text-align: right;
}

.filter-container {
    width: 60vw;
    margin: 50px auto;
    text-align: center;
}

#coinsFilter {
    margin: 20px;
    font-size: 24px;
    color: #5529D8;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

.filter-item {
    margin: 20px;
}

.filter-name {
    font-size: 20px;
    text-align: right;
}

.filterButtonBox {
    margin: 20px auto;
    background: linear-gradient(90deg, #3B26DB 0%, #5A20D4 50%, #6F1CCE 100%);
    border-radius: 5px;
    transition: all 0.3s;
}

#coinfilter {
    color: #fff;
    margin-top: 50px;
    transition: all 0.3s;
}

#coinfilter:hover {
    color: rgb(214, 98, 20);
}

.filterButtonBox :hover {
    background: linear-gradient(90deg, #4834dd 0%, #632ed4 50%, #7529cc 100%);
    box-shadow: 5px 5px 20px 20px rgba(187, 187, 189, 0.753);
}

#coincounter {
    margin: 50px;
    text-align: center;
}

.logo {
    margin-right: 8px;
    height: 23px;
    width: auto;
}

#logoBox {
    text-align: left;
}

#resultArea {
    width: 70%;
    margin: 50px auto 50px;
}

table {
    text-align: center;
    font-size: 18px;
}

#resultTable td,
#resultTable th {
    vertical-align: top;
    padding: 0.95rem;
}

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #F8F7FF;
}

#resultRow {
    vertical-align: middle;
}

@media(max-width:1050px) {
    .banner--three {
        padding-bottom: 30px;
    }
    #resultArea {
        width: 95%;
        margin: 30px auto 30px;
    }
    .filter-wrapper {
        padding: 10px;
        width: 90%;
        border-radius: 10px;
    }
    table {
        font-size: 2vw;
    }
}

@media(max-width:850px) {
    .filter-name {
        text-align: left;
    }
    .small {
        text-align: left;
    }
}

@media(max-width:650px) {
    table {
        font-size: 1vw;
    }
    #resultTable td,
    #resultTable th {
        margin: 3px 0px;
        padding: 2px 0px;
    }
}