/* GENERAL STYLES */
/* ============================ */

body{
    background-color: aquamarine;
    color:#006a45;
    padding: 50px;
    font-size: 20px;
    font-family: "argent-pixel-cf", sans-serif;
}

body {
    cursor: url('./spotifycursor.png'), auto;
}

/* change color with selection */
::selection{
    color: white;
    text-shadow:0 0 10px rgb(215, 255, 217),
                0 0 10px rgb(215, 255, 217);
}

/* NAV */
/* ============================ */

.nav{
    margin-bottom: 30px;
    text-align: right;
    font-family: "argent-pixel-cf", sans-serif;

}

.nav-link{
    background-color: rgb(82, 255, 203);
    padding: 20px 10px;
    border-radius: 30px;
    margin-right: 10px;
}
.nav-link:hover{
    background-color: aliceblue;
    box-shadow: 0 0 10px rgb(215, 255, 217),
                0 0 10px rgb(215, 255, 217);
}

/* MAIN */
/* ============================ */
.main{
    font-size: 5rem;
    font-family: "argent-pixel-cf", sans-serif;
}

/* adding style main homepage only! */

.home .main {
    font-size: 12rem;
    text-align: center;
}

h1:hover {
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke-width:1.2px;
  }

  .container{
    display: inline-block;
  }
  .text{
    font-size: 5em;
    border-right: 5px solid;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation:
        typing 2s,
        cursor .4s step-end infinite alternate;
  }

  @keyframes cursor{
    50% {border-color: transparent}
  }

  @keyframes typing {
    from {width:0}
}

.slider{
    width: 100%;
    height: var(--height);
    min-width: calc(var(--width) * var(--quantity));
}
.slider .list{
    display: flex;
    width: 100%;
    position: relative;
}
.slider .list .item{
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 10s linear infinite;
    filter: grayscale(1);
    transition: filter 0.5s;
    animation-delay: calc( (18s / var(--quantity)) * (var(--position) - 1));
}
.slider .list .item img{
    width: 100%;
}

@keyframes autoRun{
    from{
        left: 100%;
    } to{
        left: calc(var(--width) * -1);
    }
}

.slider:hover .item{
    animation-play-state: paused!important;
    filter: grayscale(1);
}
.slider .item:hover{
    filter: grayscale(0);
}