@font-face {
    font-family: 'Creepster';
    src: url('creepster.ttf') format('truetype');
}
    @font-face {
    font-family: 'Cabin';
    src: url('cabin2.ttf') format('truetype');
    src: url('cabin1.ttf') format('truetype');
}
    @font-face {
    font-family: 'Archvo Black';
    src: url('archoblack.ttf') format('truetype');
}





/*ID's*/
#jspunch {

    background: -webkit-linear-gradient(top, #141414, black); 
    background: linear-gradient(to bottom, #141414, black);


}

#tabris {

    background: -webkit-linear-gradient(top, #141414, black);
    background: linear-gradient(to bottom, #141414, black); 

}

#twxwks {

    background: -webkit-linear-gradient(top, #141414, black); 
    background: linear-gradient(to bottom, #141414, black); 


}
#reginald-watson {

    background: -webkit-linear-gradient(top, #141414, black);
    background: linear-gradient(to bottom, #141414, black);

}

#saddex {

    background: -webkit-linear-gradient(top, #141414, black); 
    background: linear-gradient(to bottom, #141414, black); 

}

#sketch {

    background: -webkit-linear-gradient(top, #141414, black); 
    background: linear-gradient(to bottom, #141414, black); 


}
#summer {

    background: -webkit-linear-gradient(top, #141414, black); 
    background: linear-gradient(to bottom, #141414, black); 


}

#BackVideo {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
}

#shop-body {
    text-align: center;
    margin: 0 auto;

}

#jss {
    background: blue;
}

#sad {
    background: purple;
}

#reg {
    background: green;
    font-size: 3.6rem;
}

#twx {
    background: red;
}

#seq {
    background: darkorange;
    font-size: 4.8rem;
}

#smo {
    background: orange;
}

#tab {
    background: pink;
}

.artistDescription {
    text-align: left;
}


#albums-grid .grid-item {
    width:300px;

    background: -webkit-linear-gradient(top, #141414, black);
    background: linear-gradient(to bottom, #141414, black); 
}
#albums-grid {
    font-family: "Cabin", sans-serif; 
    font-size: 1rem;
    max-width: 80%;
}

#singles-grid, #clean-grid{
    max-width: 80%;
}

#albums-grid a {
    font-family: 'Archvo Black', sans-serif; 
    font-size: 1rem;
}
#singles-grid .grid-item {
    background: -webkit-linear-gradient(top, #141414, black); 
    background: linear-gradient(to bottom, #141414, black);
}

#clean-grid .grid-item {
    background: -webkit-linear-gradient(top, #141414, black); 
    background: linear-gradient(to bottom, #141414, black); 
}

#smoId2 {
    max-width: 400px;
}

#bandcamp p {
    font-size: 2rem; 
    font-family: 'Archvo Black', sans-serif; 
}

#clean-grid h3 {
    font-family: "Cabin", sans-serif; 

}
#clean-grid a {
    font-family: 'Archvo Black', sans-serif; 
}
#singles-grid {
    font-family: "Cabin", sans-serif; 
    font-size: 1rem;
}
#singles-grid a {
    font-size: 1rem;
    font-family: 'Archvo Black', sans-serif; 
}
#welcome {
    text-align: center;
    margin: 0 auto;
}

#welcome a {
    font-size: 1rem;
    font-family: 'Archvo Black', sans-serif;
}

.kpbutton a{
    color: white;
    padding: .6rem;
}
.kpbutton a:hover{
    color: yellow;
}

#blue {
    color: blue;
}
#purple {
    color: purple;
}


/*CLASSES*/
.archivo-black-regular {
  font-family: "Archvo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.creepster-regular {
  font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
}


.para1 {
        text-indent: 5%;
}

.centersect {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; 
}


.green-pipe {
    color: #00cc66; 
}
.blue-span {
    color: blue; 
}
.pink-span {
    color: pink; 
}
.red-span {
    color: red; 
}


.socials p {
    color: #00cc66;
}

.socials a:hover{
    color: yellow;
    text-decoration: underline;
}

.logo-container {
    text-align: center;
    margin-top: 20px;
}

.logo-container img {
    height: auto;
}

.logo-container.large img {
    width: 30%;

    z-index: -1;
}

.logo-container.small img {
    width: 10%;
    margin-bottom: 1rem;
}

.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.grid-item {
    background-color: #111;
    margin: 10px;
    padding: 20px;
    border-radius: 5px;
    width: 200px;
    text-align: center;
}
.grid-item a:hover {
    text-decoration: underline;
}

.grid-item img {
    max-width: 100%;
    border-radius: 5px;
}

.artist img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.artist h2 {
    font-family: 'Archvo Black', sans-serif; 
    font-size: 5rem;
    margin-top: 0;
    margin-bottom: 0;
}

.artist {
    background-color: #111;
    margin: 10px;
    padding: 20px;
    border-radius: 5px;
    width: 600px;
    text-align: center;


}

.LRwide {
    max-width: 300px;
}



.purple {
    color: purple;
    font-family: 'Archvo Black', sans-serif;  
}



.blue {
    color: blue;
    font-family: 'Archvo Black', sans-serif;    
    font-size: 1rem;  
}


.i {
    font-style: italic; 
}
.u {
    text-decoration: underline; 
}
.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto; 
    max-width: 100%; 
}

.centered-text {
    color: white;
    font-size: 24px;
    position: absolute;
    font-weight: bold;
    text-align: center;
    background-color: black;
    margin-top: 10px; 

}

.siteSpinners {
    margin-top: 4rem;
}

.siteSpinners img {
    max-width: 500px;
    animation: spin 60s linear infinite;
    z-index: -1; 
}

.yellow {
    color: yellow;
    text-decoration: underline;
}
.socials {
    margin-top: 1rem; 
    margin-bottom: -2rem;
}
.socials h2{
    margin-top: 0; 
    margin-bottom: 0;    
}
.socials a{
    color: white;   
}
.socials h3{
    font-family: "Cabin", sans-serif;
  
}

.centered-text a{
        font-family:  'Archvo Black', sans-serif; 
}



h3 h2{
        font-family:  'Archvo Black', sans-serif; 
}

body {
    font-family: 'Archvo Black', sans-serif; 
    background-color: #000;
    color: #fff;
    margin: 0;
    padding: 0;
}

header, footer, main {
    text-align: center;
    padding: 20px;
}

header .small-logo {
    width: 50px;
    font-family: 'Times New Roman', Times, serif;
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
}

p {
    font-family: "Cabin", sans-serif; 
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    min-width:20%;
    max-width:60%;
    display: inline-block;
    border: dashed 1px;
}

nav ul li {
    display: inline;
    margin: 0 10px;
    font-family:  'Archvo Black', sans-serif; 
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

nav ul li a.active {
    border-bottom: 2px solid #fff;
}

nav a:hover {
    text-decoration: underline;
    color: yellow;
}

footer a:hover {
    text-decoration: underline;
    color: yellow;
}

footer {
    margin-bottom: 1rem;
}

footer a{
    font-size: 1rem;
}

a {
    font-size: 1.2rem;
    color: #00cc66;
    text-decoration: none; 
}

h1 {
    margin-top: .4rem;
    margin-bottom: 1rem;
    font-size: 5rem;
    font-family: "Creepster", system-ui;


  background: -webkit-linear-gradient(top, yellow, red, darkgreen);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
    color: white;
    font-size: 1.5rem;
}

h2 a {
    font-size: 1.5rem;
}

h2 a:hover {
    text-decoration: underline; 
    color: yellow;
}

a:hover {
    text-decoration: underline; 

}



@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}








     @media (max-width: 1350px){
        .artist {
            max-width: 400px; 
        }
        #artists-grid img{
            max-width: 300px;
        }
        #artists-grid h2{
            font-size: 3rem;
        }
        #artists-grid a{
            font-size: 1rem;
        }

     }


     @media (max-width: 1000px){
        .artist {
            max-width: 300px; 
        }
        #artists-grid img{
            max-width: 300px;
        }
        #artists-grid h2{
            font-size: 2.4rem;
        }
        #artists-grid h3{
            font-size: .9rem;
        }
        p {
            font-size: 1rem;
        }
        .artist {
            max-width: 80%; 
        }   

     }


    @media (max-width: 750px){

        nav ul {
            max-width: 220px;
        }
        nav a{
        font-size: 1.5rem;

        }


        .image-container img {
            width: 400px;
        }
        #smoId2 {
            width: 300px;
        }


        #artists-grid img{
            max-width: 500px;
        }
        #artists-grid h2{
            font-size: 4rem;
        }


        h3{
            font-size: 1rem;
        }
        .image-container img {
            width: 400px;
        }
        #smoId2 {
            width: 300px;
        }

        .socials a{
            font-size: 1rem;
        }
        

        nav ul {
            max-width: 220px;
        }
        nav a{
        font-size: 1.5rem;

        }

     }



     @media (max-width: 600px){

        #BackVideo {
            display: none;
        }
        body {
            background-image: url('images/mobile.png');
        
            background-repeat: repeat; 

        }

        h1 {
            font-size: 3rem;
        }

        main {
            padding: 0rem;
        }

        .grid-item {
            width: 100%;
        }

        #artists-grid img{
            max-width: 300px;
        }
        #artists-grid h2{
            font-size: 2rem;
        }
        #welcome {
            max-width: 80%;
        }

     }


    @media (max-width: 460px){



        #artists-grid img{
            max-width: 200px;
        }
        #artists-grid h2{
            font-size: 2rem;
        }

        .image-container img {
            width: 300px;
        }
        #smoId2 {
            width: 250px;
        }



     }



    @media (max-width: 400px){



        .image-container img {
            width: 200px;
        }
        #smoId2 {
            width: 150px;
        }



    }