@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html {
    font-size: 20px;
    font-family: 'Poppins', 'Roboto', sans-serif;
    color: var(--ns-font-color-100);
}

body {
    overflow-x: hidden;
    background: var(--ns-background-color-15);
}

.ns-content {
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    max-width: 1550px;
    position: relative;
    min-height: calc(100vh - 60px);
}

.ns-content-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    background: var(--ns-background-color-10-035);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all var(--ns-transition-primary);
    -webkit-transition: all var(--ns-transition-primary);
    -moz-transition: all var(--ns-transition-primary);
    -ms-transition: all var(--ns-transition-primary);
    -o-transition: all var(--ns-transition-primary);
    backdrop-filter: blur(3px);
    z-index: 30;
}

.ns-content-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ns-content-overlay.active + .ns-nav .ns-mobile-nav-wrapper {
    bottom: -60px;
}

button.remove-button {
    background: var(--ns-error-color);
    color: var(--ns-font-color-95);
}

button.confirm-button {
    background: var(--ns-theme-primary-color);
    color: var(--ns-font-color-10);
}

.ripple-effect {
    position: relative;
    overflow: hidden;
}

.button-ripple-effect {
    opacity: .3;
    position: absolute;
    background: var(--ns-background-color-20);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    animation: ripple-animation .6s linear;
    -webkit-animation: ripple-animation .6s linear;
}

@keyframes ripple-animation {
    0% {
        width: 0px;
        height: 0px;
    }

    100% {
        width: 350px;
        height: 350px;
    }
}

.noscroll {
    overflow-y: hidden;
    height: 100vh;
}

@media (max-width:639px) {
    .ns-content {
        margin-top: 90px;
    }
}

:root {
    --ns-font-color-10: hsl(0, 0%, 10%);
    --ns-font-color-15: hsl(0, 0%, 15%);
    --ns-font-color-65: hsl(0, 0%, 65%);
    --ns-font-color-70: hsl(0, 0%, 70%);
    --ns-font-color-75: hsl(0, 0%, 75%);
    --ns-font-color-80: hsl(0, 0%, 80%);
    --ns-font-color-85: hsl(0, 0%, 85%);
    --ns-font-color-90: hsl(0, 0%, 90%);
    --ns-font-color-95: hsl(0, 0%, 95%);
    --ns-font-color-100: hsl(0, 0%, 100%);
    
    --ns-background-color-5: hsl(0, 0%, 5%);
    --ns-background-color-10: hsl(0, 0%, 10%);             
    --ns-background-color-10-035: hsla(0, 0%, 10%, 0.35);
    --ns-background-color-10-08: hsla(0, 0%, 10%, 0.8);
    --ns-background-color-15: hsl(0, 0%, 15%);
    --ns-background-color-20: hsl(0, 0%, 20%);
    --ns-background-color-20-085: hsl(0, 0%, 20%, 0.85);
    --ns-background-color-25: hsl(0, 0%, 25%);
    --ns-background-color-30: hsl(0, 0%, 30%);
    --ns-background-color-35: hsl(0, 0%, 35%);
    --ns-background-color-40: hsl(0, 0%, 40%);
    --ns-background-color-55: hsl(0, 0%, 55%);
    --ns-background-color-55-05: hsla(0, 0%, 55%, 0.5);
    --ns-background-color-60: hsl(0, 0%, 60%);
    --ns-background-color-100: hsl(0, 0%, 100%);
 
    --ns-theme-primary-color: hsla(180, 100%, 69%);
    --ns-theme-primary-color-selection: hsla(180, 92.5%, 69%);
    --ns-theme-secondary-color: hsl(300, 100%, 69%);

    --ns-border-radius-primary: 8px;
    --ns-border-radius-secondary: 25px;

    --ns-transition-primary: .3s ease-in-out;

    --ns-box-shadow-primary: 0px 2px 6px 0px var(--ns-background-color-10);

    --ns-anime-deck-img-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.95) 100%);

    --ns-information-color: hsl(211, 100%, 35%);
    --ns-error-color: hsl(0, 73%, 54%);
    --ns-score-rating-color: hsl(47, 100%, 50%);
    --ns-likes-rating-color: hsl(341, 100%, 69%);
    --ns-success-color: hsl(130, 67%, 39%);

    --ns-anime-deck-active-button-background: #EBEBEB;
    --ns-anime-deck-active-button-font-color: #242424;
    --ns-anime-deck-disable-button-background: #898989;
    --ns-anime-deck-disable-button-font-color: #242424;
}

::selection {
    color: var(--ns-theme-primary-color-selection);
    background-color: var(--ns-background-color-5);
}

::-moz-selection {
    color: var(--ns-theme-primary-color-selection);
    background-color: var(--ns-background-color-5);
}


::-webkit-selection {
    color: var(--ns-theme-primary-color-selection);
    background-color: var(--ns-background-color-5);
}