html, body {
  margin: 0;
  padding: 0;
}

/*index.html*/
.indexPage {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
.homepageBtn {
    position: absolute;
    width: clamp(15vmin, 20vmax, 20vmax);
    height: auto;
    transition: transform 180ms ease;
    transform: rotate(0deg) scale(1);   
}

.homepageBtn:hover{
  filter: brightness(0.8);
  transform: rotate(-1deg) scale(1.05);
}

#music {
    top: 0;
    left: 0;
}

#about {
    top: 0;
    right: 0;
}

#merch {
    bottom: 0;
    left: 0;
}

#contact {
    bottom: 0;
    right: 0;
}

#socials{
    bottom: 50%;
    left: 50%;
    transform: translate(80%, 50%) rotate(0deg) scale(1);
}

#socials:hover{
    filter: brightness(0.8);
    transform: translate(80%, 50%) rotate(-1deg) scale(1.05);
}

#gigs {
    top: 50%;
    right: 50%;
    transform: translate(-80%, -50%) rotate(0deg) scale(1);
}

#gigs:hover{
    filter: brightness(0.8);
    transform: translate(-80%, -50%) rotate(-1deg) scale(1.05);
}

#centerButton {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(15vmin, 30vmax, 30vmax);
    height: auto;
}

#pencil {
    top: 0vh;
    left: 20vw;
    width: clamp(10vmin, 12vmax, 12vmax);
}

#pens {
    bottom: 0;
    left: 6vw;
    width: clamp(12vmin, 22vmax, 22vmax);
}

#picks {
    top: 32vh;
    right: 0;
    width: clamp(10vmin, 15vmax, 15vmax);
}

#rubberBands {
    bottom: 0;
    right: 25vw;
    width: clamp(17vmin, 27vmax, 27vmax);
}

#harmonica {
    top: 10vh;
    right: 30vw;
    width: clamp(12vmin, 22vmax, 22vmax);
}

.homepageDeco {
    position: absolute;
    z-index: -1;
    width: clamp(17vmin, 27vmax, 27vmax);
}

/*comingsoon.html*/
#comingSoon {
    position: fixed;
    width: clamp(30vmin, 40vmax, 50vmax);
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*go back button*/
.goBackControl {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

.goBackLink {
    display: flex;
    align-items: center;
    text-decoration: none;
}

#goBackButton {
    position: static;
    width: clamp(10vmin, 10vmax, 20vmax);
    height: auto;
    transition: transform 180ms ease;
    transform: rotate(0deg) scale(1);   
    z-index: 9999;
}

#goBackButton:hover {
    filter: brightness(0.8);
    transform: rotate(-1deg) scale(1.05);
}

.goBackText {
    font-size: 125%;
    color: black;
}

/*contact.html*/
.contactPage {
    position: relative;
    height: 90vh;
}
.contactGroup {
    position: absolute;
    width: clamp(15vmin, 25vmax, 25vmax);
    left: 50%;
    top: 50%;
    transform: translate(-65%, -80%);
}

#doilyDesk {
    position:absolute;
    right: 30%;
    top: 0;
    width: clamp(15vmin, 25vmax, 25vmax);
}

#contactEmail {
    position:absolute;
    left: 5%;
    bottom: 0;
    width: clamp(20vmin, 30vmax, 30vmax);
    transition: transform 180ms ease;
    transform: rotate(0deg) scale(1); 
    cursor: pointer;
}

#contactEmail:hover {
    filter: brightness(0.8);
    transform: rotate(-1deg) scale(1.05);
}

/*gigs.html*/
.gigsTitle {
    text-align: center;
    font-size: 2vw;
    margin-top: 2vh;
}

.gigsContainer {
    display: flex;
    flex-wrap: wrap;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 2vw;
    gap: 4.6vw;
}

.gigsContainer > a {
    width: 20vw;
    box-sizing: border-box;
}

.gigsPoster {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 180ms ease;
}

.gigsPoster:hover {
    filter: brightness(0.8);
    transform: rotate(-1deg) scale(1.05);
}


/*socials.html*/
.socialsPage {
    position: relative;
    height: 90vh;
}

.socialsBtn {
    top: 20%;
    left: 40%;
    position: absolute;
    width: 20vw;
    height: auto;
    transition: transform 180ms ease;
    transform: rotate(0deg) scale(1);
}

.socialsBtn:hover {
    filter: brightness(0.8);
    transform: rotate(-1deg) scale(1.05);
}

#tiktok {
    top: 37%;
}

#facebook {
    top: 54%;
}

#youtube {
    top: 71%;
}

/*music.html*/
.musicPage {
    position: relative;
    height: 90vh;
}

.musicBtn {
    top: 21%;
    left: 70%;
    position: absolute;
    width: 20vw;
    height: auto;
    transition: transform 180ms ease;
    transform: rotate(0deg) scale(1);
}

.musicBtn:hover {
    filter: brightness(0.8);
    transform: rotate(-1deg) scale(1.05);
}

#musicVideo {
    position: absolute;
    left: 9%;
    top: 21%;
    min-height: 61.5vh;
    height: auto;
    width: 55vw;
}

#appleMusic {
    top: 38%;
}

#bandcamp {
    top: 55%;
}

#soundcloud {
    top: 72%;
}

@media (max-width: 600px) {
    .indexPage {
        height: 90vh;
    }

    #centerButton {
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translate(-50%, -50%);
        width: clamp(25vmin, 27vmax, 27vmax);
        height: auto;
    }   
    .homepageBtn {
        position: absolute;
        width: clamp(15vmin, 20vmax, 20vmax);
        height: auto;
        transition: transform 180ms ease;
        transform: rotate(0deg) scale(1);   
    }

    #socials {
        left: auto;
        top: 27vh;
        right: 5vw;
        transform: none;
    }

    #socials:hover {
        filter: brightness(0.8);
        transform: rotate(-1deg) scale(1.05);
    }

    #gigs {
        right: auto;
        top: 27vh;
        left: 5vw;
        transform: none;
    }

    #gigs:hover {
        filter: brightness(0.8);
        transform: rotate(-1deg) scale(1.05);
    }

    #about {
        top: auto;
        bottom: 3vh;
        left: 5vw;
    }

    #contact {
        top: auto;
        bottom: 3vh;
        right: 5vw;
    }

    #music {
        top: auto;
        bottom: 23vh;
        left: 5vw;
        transform: rotate(0deg) scale(1);
    }

    #merch {
        left: auto;
        top: auto;
        bottom: 23vh;
        right: 5vw;
        transform: rotate(0deg) scale(1);
    }

    #music:hover {
        filter: brightness(0.8);
        transform: rotate(-1deg) scale(1.05);
    }

    #merch:hover {
        filter: brightness(0.8);
        transform: rotate(-1deg) scale(1.05);
    }


    .homepageDeco {
        position: absolute;
        height: auto;
        z-index: -1;
    }

    #pencil {
        top: 0;
        left: 0;
        width: clamp(10vmin, 20vmax, 20vmax);
    }

    #pens {
        bottom: 10vh;
        left: 0;
        width: clamp(20vmin, 30vmax, 30vmax);
    }

    #picks {
        top: 39vh;
        right: 25vw;
        width: clamp(10vmin, 20vmax, 20vmax);
    }

    #rubberBands {
        bottom: 0;
        right: 10vw;
        width: clamp(20vmin, 30vmax, 30vmax);
    }

    #harmonica {
        top: 12vw;
        right: 0;
        width: clamp(20vmin, 30vmax, 30vmax);
    }

    #comingSoon {
        position: fixed;
        width: clamp(40vmin, 50vmax, 50vmax);
        height: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .contactGroup {
        position: absolute;
        width: clamp(15vmin, 25vmax, 25vmax);
        left: 35%;
        top: 50%;
        transform: translate(-45%, -80%);
    }

    #doilyDesk {
        position:absolute;
        right: -0%;
        top: 0;
        width: clamp(20vmin, 30vmax, 30vmax);
    }

    #contactEmail {
        position:absolute;
        right: 0;
        bottom: 0;
        width: clamp(30vmin, 40vmax, 40vmax);
        transition: transform 180ms ease;
    }
    
    .socialsBtn {
        width: 70vw;
        left: 17%;
    }
    .musicBtn {
        width: 70vw;
        left: 17%;
    }
    
    #musicVideo {
        top: 10%;
        left: 10%;
        width: 80vw;
        min-height: 20vh;
    }
    #spotify {
        top: 35%;
    }

    #appleMusic {
        top: 49%;
    }

    #bandcamp {
        top: 63%;
    }

    #soundcloud {
        top: 77%;
    }

    .gigsTitle {
        text-align: center;
        font-size: 4vw;
        margin-top: 1vh;
    }

    .gigsContainer {
        display: flex;
        flex-wrap: wrap;
        padding-left: 5vw;
        padding-right: 5vw;
        padding-bottom: 2vw;
        gap: 10vw;
    }

    .gigsContainer > a {
        width: 40vw;
        box-sizing: border-box;
    }
}