// @import url('https://manekit.now.sh/assets/css/manekit.min.css')

$instagram: #E4405F
$twitter: #1DA1F2
$twitch: #9146FF

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap')
*
    margin: 0
    padding: 0

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar
    display: none

// MAKE SVGS FILL WITH THEIR COLOR ON HOVER

body
    background: #000
    color: #fff
    font-family: 'Orbitron', sans-serif
    -ms-overflow-style: none /* IE and Edge */
    scrollbar-width: none /* Firefox */

.logo
    width: 150px
    text-align: center
    margin: auto
    justify-content: center
    display: flex

a
    color: white
    font-size: 2vw
    text-decoration: none
    &:hover
        color: grey

.twitch svg:hover
    fill: $twitch
.twitter svg:hover
    fill: $twitter
.instagram svg:hover
    fill: $instagram
svg
    fill: white
    padding: 0 10px
    width: 50px
    height: 50px

.sub-nav
    text-align: center
    margin: auto
    justify-content: center
    display: flex

.bar
    position: absolute
    width: 99%
    height: 20px
    background-color: white
    mix-blend-mode: difference
    color: black
    font-size: 15px
    margin: auto
    display: flex
    padding-left: 1%
    a
        font-size: inherit
        color: black

.top
    top: 50px

.bottom
    bottom: 50px

section
    height: 100vh
    width: 100vw

.music
    display: flex
    text-align: center
    margin: auto
    justify-content: space-between
    padding-top: 5vh
    margin: 0 100px
    .title
        font-size: 3vh
        display: flex
        text-align: left
        margin: auto
        justify-content: space-between
        padding-top: 2vh
    img
        height: 30vh

@media screen and ( max-width: 1350px )
    .music
        display: table
        margin: auto
    .title
        padding-bottom: 20px
    img
        height: 20vh
    .top
        top: 60px
    .bottom
        position: sticky
        bottom: 0