body {
    box-sizing: border-box;
    background-image: linear-gradient(to right,#2321a8, #10436d) !important;
    font-family: 'Lato', sans-serif;
    background-color: #10436d !important;
}

* {
    box-sizing: inherit;
}

::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background-image: url('images/Simple\ Shiny.svg');
}
::-webkit-scrollbar-thumb {
    background: rgb(1, 71, 117); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(0, 89, 148); 
}

.navbar-brand {
    transition: transform 1s !important;
}
.navbar-brand:hover{
    transform:scale(1.1) !important;
}
.nav-main-text {
    background: linear-gradient(45deg, #05bedf, #2a1cf1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge {
    box-shadow: 0 0 25px #0069a7 !important;
    border-radius: 25px !important; 
}
.login {
    margin: auto;
    border-radius: 25px;
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
    font-family: sans-serif;
    color: white;
    text-align: center;
    transition: all 5s;
    text-decoration: none;
    width: 130px !important;
    box-shadow: 0 0 25px #0069a7;
    background: rgb(32, 102, 148) !important;
    transition: all .5s !important;
    border: none !important;
}
.main-button {
    margin: auto;
    border-radius: 15px !important;
    font-size: 15px;
    font-weight: bold;
    font-family: sans-serif;
    color: white;
    transition: all 5s;
    text-decoration: none;
    width: 60px !important;
    height: 45px !important;
    box-shadow: 0 0 50px #0077ff;
    background: #1ca3f1 !important;
    transition: all .5s !important;
    margin-top: 10px;
    font-size: 20px !important;
    border: none !important;
}
.icon-down-open {
    margin-left: 3px !important;
}
.main-buttons {
    width: 60px;
    height: 500px;
    margin: auto;
}
.login:hover {
    box-shadow: none;
    background: none !important;
    transform: scale(1.1) !important;
}
.main-button:hover {
    box-shadow: none;
    background: none !important;
    transform: scale(1.5
    ) !important;
}
.container {
    height: 750px;
    width: 100%;
    margin-top: 150px;
}
.main-container {
    width: 375px;
    margin: auto;
}
.lastfm-funkcje {
    color: white;
    text-decoration: none;
    transition: color .2s !important;
}
.lastfm-funkcje:hover {
    color: rgb(32, 102, 148);
}

/* func */
.func2-row {
    display: flex;
    flex-wrap: wrap;
}
.func2-row h1 {
    width: 100%;
    text-align: center;
    font-size: 3.75em;
    margin: 0.6em 0;
    font-weight: 600;
    color: white;
}
.func2-row h6 {
    text-align: center;
    width: 100%;
    color: white;
    font-weight: 500;
    margin-bottom: 50px;
    margin-top: -30px;
}
.func2-column {
    width: 750px;
    margin: auto;
    height: 400px;
}
.func2-card {
    text-align: center;
    box-shadow: 0 0 2.5em rgba(0,0,0,0.15);
    border-radius: 50px;
    backdrop-filter: blur(10px);
}
.func2-card .func2-icon {
    font-size: 2.5em;
    height: 1.8em;
    width: 1.8em;
    margin: auto;
    background: linear-gradient(45deg, #05bedf, #2a1cf1);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
}
.func2-card h3 {
    font-size: 1.25em;
    margin: 1em 0 1.4em 0;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
}
.func2-card p {
    line-height: 2em;
    color: #fff;
    font-size: 0.9em;
}

@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
    .func2-card {
        padding: 5em 2em;
    }
    .func2-column {
        flex: 0 0 33.33%;
        padding: 0 1em;
    }
}
/* func */

/* func */
.func-row {
    color: white;
    text-align: center;
}
.func-row h1 {
    font-size: 60px;
    font-weight: 600;
}
.func-row h6 {
    font-weight: 500;
    margin-bottom: 50px;
}
.func-card {
    width: 475px;
    height: 300px;
    background: none;
    border-radius: 25px;
    color: white;
    box-shadow: 0 0 2.5em rgba(0,0,0,0.15);
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 50px;
}
.func-row-2 {
    flex-wrap: wrap; 
    display: flex;
    max-width: 1575px;
    margin: auto;
}
.func-container {
    width: 90%;
    margin-left: 5%;
}
.func-icon {
    font-size: 2.5em;
    height: 1.8em;
    width: 1.8em;
    margin: auto;
    background: linear-gradient(45deg, #05bedf, #2a1cf1);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    margin-top: 45px;
}
.func-text-title {
    font-size: 1.25em;
    margin: 1em 0 1.4em 0;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
}
.func-text-description {
    line-height: 2em;
    color: #fff;
    font-size: 0.9em;
}
@media only screen and (max-width: 1574px) {
    .func-row-2 {
        max-width: 1050px;
    }
}
@media only screen and (max-width: 1049px) {
    .func-row-2 {
        max-width: 525px;
    }
}
/* func */

@media only screen and (max-width: 375px) {
    .logo-main {
        width: 300px !important;
        height: 300px !important;
    }
    .main-container {
        width: 325px;
        margin: auto;
    }
}
@media only screen and (width: 1024px) and (height: 600px) {
    .logo-main {
        margin-top: -100px;
    }
    .container {
        height: 400px;
    }
}
@media only screen and (width: 360px) {
    .main-buttons {
        margin-left: -10px !important
    }
}
@media only screen and (max-width: 1000px) {
    .stats-title {
        margin-top: 75px !important;
    }
}
@media only screen and (max-width: 1100px) {
    .kard-func {
        margin: auto;
    }
}
@media only screen and (max-width: 1200px) {
    .kard-func {
        width: 500px !important;
        border: 1px solid red !important;
        max-width: none !important;
    }
    .func-img {
        max-width: 100% !important;
    }
}

.dropdown-menu {
    background: none !important;
    border: none !important;
    margin: auto !important;
}
.dropdown-item {
    color: white !important;
    padding: 5px !important;
    text-align: center !important;
    transition: all .5s;
    width: 135px !important;
    border-radius: 10px !important;
}
.dropdown-item:hover {
    border-radius: 10px !important;
    background: rgb(32, 102, 148) !important;
}

.text-div-link-guilds1:hover {
    background: rgb(4, 92, 4) !important;
    color: white !important;
}

.text-div-link-guilds2:hover {
    background: rgb(23, 17, 110) !important;
    color: white !important;
}