html {
    font-family: 'Permanent Marker', cursive;
} 

* {
    list-style-type: none;
    box-sizing: border-box;
}  


body {
    background: url(DJ-Wallpaper.jpg) 100% 100%/cover fixed, grey;
}

.homeBody{
    overflow: hidden;
}

.blurHome {
    height: 100vh;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.601);
}

.blur {
    height: 100vh;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.601);
}

.heading {
    padding-top: 10vh;
    animation: fadeInAnimation 2s ease-in-out 0s 1 both;
}

h1 {
    color: white !important;
    text-align: center;
    font-size: 4rem !important;
}

:root {
    --text-color: hsl(0, 0%, 94%);
}

.wrapper {
    display: grid;
    place-content: center;
    background-color: var(--background-color);
    min-height: 10vh;
    font-family: "Oswald", sans-serif;
    font-size: clamp(1.5rem, 1rem + 18vw, 15rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-color);
    animation: fadeInAnimation 2s ease-in-out 0s 1 both;
}

@keyframes fadeInAnimation{
0% {
    /* transform: translate(0, 100vh); */
    opacity: 0;
}
100% {
    /* transform: translate(0, 0); */
    opacity: 1;
}
}
  
.wrapper > div {
grid-area: 1/1/-1/-1;
}
.top {
clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
}
.bottom {
clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
color: transparent;
background: -webkit-linear-gradient(177deg, rgb(179, 179, 179) 53%, var(--text-color) 65%);
background: linear-gradient(177deg, rgb(135, 135, 135) 53%, var(--text-color) 65%);
background-clip: text;
-webkit-background-clip: text;
transform: translateX(-0.02em);
}

.main {
    z-index: 100;
}

.artistName {
    font-family: "Permanent Marker";
    font-size: 8rem;
    color: rgb(255, 255, 255);
    padding-left: 15%;
    padding-top: 10%;
}

#artistImage {
    box-shadow: 5px 5px 10px 10px rgba(19, 19, 19, 0.303);
    border-radius: 10px;
}

.aboutText {
    color: aliceblue;
}

.aboutMeContainer {
    animation: fadeInAnimation 1s ease-in-out 0s 1 both;
}

.navbar {
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.181);

}

.myNavbar {
    margin-top: 20vh;
}

.aboutMeNavbar {
    margin-top: 10vh;  
}

.navbarWrapper {
    padding-left: 5vw !important;
    position: fixed;
    bottom: 10vh;
}

.musicPlayer {
    animation: fadeInAnimation 1s ease-in-out 0s 1 both;
    padding-right: 45vw !important;
    padding-left: 10vw !important;
}

.myMusicContainer {
    margin-top: 5vh;
    animation: fadeInAnimation 1s ease-in-out 0s 1 both;
}

#spotifyLogo {
    
}

.socialLinks {
    margin-top: 19.5vh;
    margin-left: 10%;
}

.aboutMeSocialLinks {
    margin-top: 9.5vh;
    margin-left: 10%;
}

.socialLogos {
    transition: 0.5s !important;
    scale: 0.8 !important;
    height: 70px;
    margin-right: 2vw;
}

.socialLogos:hover {
    scale: 1.1 !important;
    
}   

.particleWrapper {
    position: absolute;
    height: 100vh;
    z-index: -1;
}

/* @media only screen and (max-width: 1921) {
    
    .musicPlayer {
        padding-right: 0 !important;
    }

    .socialLinks {
        margin-top: 5vh;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

}   */

@media only screen and (max-width: 900px) {
    
    .musicPlayer {
        padding-right: 0 !important;
    }

    .socialLinks {
        margin-top: 5vh;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .aboutMeSocialLinks {
        margin-top: 5vh;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    #artistImage {
        height: 200px !important;
        margin-top: auto;
        margin-bottom: auto;
    }

}   

@media only screen and (max-width: 600px) {
    
    .musicPlayer {
        padding-right: 0 !important;
    }

    .socialLinks {
        margin-top: 5vh;
        padding-bottom: 10vh;
        margin-left: auto;
        margin-right: auto;
        text-align: center;

    }

    .wrapper {
        padding-top: 5vh;
      }
      
      .musicPlayer {
        padding-right: 0vw !important;
        margin: 0 0 0 0  !important;
        padding-left: 2vw  !important;
        padding-right: 2vw  !important;
        z-index: 200;
        margin-bottom: 20vh !important;
    }

    .navbarWrapper {
        padding-left: 3vw !important;
        position: relative;
        bottom: 10vh;
    }

    .myNavbar {
        margin-bottom: 0;
        margin-top: 0;
    }

    .heading {
        padding-top: 5vh;
    }

    .blur {
        height: 100%;
    }


    .myMusicContainer {
        margin-top: 0vh !important;
        margin-bottom: 10vh !important;
    }
}