body{
    margin:0;
    overflow:hidden;

    background:#000 url("Images/background.png") center center/cover no-repeat fixed;
}

/* =======================
   LOGO
   ======================= */

.logo{
    position:fixed;

    top:15px;
    left:50%;
    transform:translateX(-50%);

    width:1150px;
    height:auto;

    z-index:1000;
}

/* =======================
   BUTTONS
   ======================= */

.about,
.join,
.releases,
.merch,
.contact{

    position:fixed;

    width:300px;
    height:auto;

    bottom:85px;

    transition:0.15s ease;
}

/* Individual Positions */

.about{
    left:calc(50% - 850px);
    bottom:85px;
}

.join{
    left:calc(50% - 490px);
    bottom:85px;
}

.releases{
    left:50%;
    bottom:85px;
    transform:translateX(-50%);
}

.merch{
    left:calc(50% + 200px);
    bottom:85px;
}

.contact{
    left:calc(50% + 563px);
    bottom:85px;
}

/* Hover */

.about:hover,
.join:hover,
.merch:hover,
.contact:hover{
    transform:scale(1.08);
}

.releases:hover{
    transform:translateX(-50%) scale(1.08);
}


/* =======================
   MOBILE
   ======================= */

@media (max-width: 768px){

    body{
        overflow:auto;
    }

    /* Logo */
    .logo{
        width:95%;
        max-width:500px;
        top:20px;
    }

    /* Buttons */
    .about,
    .join,
    .releases,
    .merch,
    .contact{

        position:relative;

        display:block;

        width:80%;
        max-width:300px;
        height:auto;

        left:auto;
        bottom:auto;
        transform:none;

        margin:20px auto;
    }

    .about{
        margin-top:300px; /* Push buttons below logo */
    }

    .about:hover,
    .join:hover,
    .releases:hover,
    .merch:hover,
    .contact:hover{
        transform:scale(1.05);
    }
}